【便利】Sassのおすすめモジュール

こんにちは

前回の続きです。

前回はsassを使えるようにセットアップしました。

ネストと呼ばれる構造でCSSを見やすいコードを書くことができました。

しかし、sassの便利なところはここだけではありません。

さまざまなモジュールをインストールすることによってより便利にアレンジすることができます。

今回は入れておいて損はないモジュールを紹介します。

モジュール紹介
まとめ
参考

モジュール紹介

watch

さっそくモジュールではないですが…。watchタスクはsassを使う上では必須なので紹介させていただきます。

前回の記事でSassファイルをcssファイルにコンパイルしましたが、Sassファイルを更新するたびにいちいちやっているとめんどくさいですよね！

ここでwatchです。

このタスクを追加するとSassファイルを監視して、変更するたびにcssにコンパイルしてくれます。しかも自動で。

素晴らしいですね！！

では、さっそくタスクを追加してみましょう！

以下のようにgulpfile.jsを変更してみましょう。

 
// gulpプラグインの読み込み 
var gulp = require("gulp"); 
var sass = require("gulp-sass"); 
// style.scssの監視タスクを作成する 
gulp.task("sass", function() {   
　　return gulp.watch("./sass/**/*.scss", function() { 
　　  // style.scssファイルを監視     
　　return (       
　　　　gulp.src("./sass/**/*.scss")         
　　　　.pipe(sass({outputStyle: "expanded"}))         
　　　　.pipe(gulp.dest("css"))     );  
　　 }); 
});

powershellでプロジェクトファイルに移動して、

gulp sass

と打ち込みましょう。

するとsassファイルの監視が始まります。変更するたびcssが変更されていることが分かると思います。

Ctrl + Cで終了できます。

gulp-pleeese

このモジュールを紹介するためにこの記事を書いたといっても過言ではありません！

このモジュールは

ベンダープレフィックスの自動付与（-webkitとか-mozとかを自動付与）
メディアクエリを一つにまとめる
cssファイルの圧縮

を一括でやってくれるモジュールです！まさにいいとこどりですね！

ではまず、gulp-pleeeseをインストールします。

 npm install --save-dev gulp-pleeease

でインストール出来たら、次にgulpfileを編集します。

 
// gulpプラグインの読み込み
var gulp = require("gulp");
var sass = require("gulp-sass");
var pleeease = require('gulp-pleeease');

// style.scssの監視タスクを作成する
gulp.task("sass", function() {
  return gulp.watch("./sass/**/*.scss", function() {
  // style.scssファイルを監視
    return (
      gulp.src("./sass/**/*.scss")
        .pipe(sass({outputStyle: "expanded"}))
        .pipe(pleeease({
           sass: true,
           autoprefixer:true,
           mqpacker: true,
           minifier: false,
         }))
        .pipe(gulp.dest("css"))
    );
  });
});

では、scssファイルを

 
.hoge {
  display: flex;
  flex-direction: column;
  background: linear-gradient(red, blue);
}
@media (max-width: 36em) {
  .hoge {
    color: white;
  }
}
@media (max-width: 36em) {
  .hogehoge {
    color: blue;
  }
}

としてみましょう。powershellで

 gulp sass

を行い、

 
.hoge {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  background: linear-gradient(red, blue); }
@media (max-width: 36em) {
  .hoge {
    color: white; }
  .hogehoge {
    color: blue; } }

というcssファイルが出来上がっていたら成功です。

HPを作る際はcssファイルを圧縮した方がいいので、そういう場合はgulpfileの

 minifier: false　を　minifier: true

に変更します。すると

  .hoge {    display: -ms-flexbox;   display: flex;   -ms-flex-direction: column;       flex-direction: column;   background: linear-gradient(red, blue); } @media (max-width: 36em) {   .hoge {     color: white; }   .hogehoge {     color: blue; } }

と圧縮されたcssファイルが生成できます。

gulp-plumberとgulp-notify

文法ミスをするとwatchが止まってしまいます。エラーするたびにその都度watchを入力するのは面倒なので動作が止まらないようにしたいところです。

そんなときに役に立つのがgulp-plumberです。これで、watchが止まることはありません。

watchが止まるとエラーに気づかない場合があるので、さらにエラーを表示できるようにしたいところです。

そんなときに使うのがgulp-notifyです。ではさっそくこれらの機能を追加してみましょう。

まず、powershellに行って、インストールを行います。

npm install --save-dev gulp-plumber

 npm install --save-dev gulp-notify

次にgulpfileを変更します。

// gulpプラグインの読み込み
var gulp = require("gulp");
var sass = require("gulp-sass");
var plumber = require('gulp-plumber');
//追加
var notify = require('gulp-notify');
//追加
var pleeease = require('gulp-pleeease');

// style.scssの監視タスクを作成する
gulp.task("sass", function() {
  return gulp.watch("./sass/**/*.scss", function() {
  // style.scssファイルを監視
    return (
      gulp.src("./sass/**/*.scss")
        .pipe(plumber({errorHandler: notify.onError("Error: &lt;%= error.message %&gt;")}))
        //追加
        .pipe(sass({outputStyle: "expanded"}))
        .pipe(pleeease({
           sass: true,
           autoprefixer:true,
           mqpacker: true,
           minifier: false,
         }))
        .pipe(gulp.dest("css"))
    );
  });
});

これで完了です。