【便利】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: <%= error.message %>")}))
        //追加
        .pipe(sass({outputStyle: "expanded"}))
        .pipe(pleeease({
           sass: true,
           autoprefixer:true,
           mqpacker: true,
           minifier: false,
         }))
        .pipe(gulp.dest("css"))
    );
  });
});

これで完了です。

まとめ

これで最低限のSassを書く準備はそろいました。最初はかなり苦戦しますが、慣れると非常にきれいなコードが書け、大幅な効率化が図れるので、cssを書く際はぜひSassを使っていきましょう。

また、紹介しきれていませんが便利なモジュールはこれ以外にもたくさんあるのでぜひいろいろインストールしてみてくださいね!!

参考

CSS最適化から圧縮までできる「gulp-pleeease」 | ブログ - Blog | 佐藤純平 - Jumpei Sato
今回は gulp-pleeease の紹介です。Sassの使用から、CSSのベンダープレフィックスの付与、圧縮、メディアクエリを一つにまとめる等、使えるオプションが豊富なのが魅力です。
タイトルとURLをコピーしました