こんにちは
前回の続きです。
前回は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を使っていきましょう。
また、紹介しきれていませんが便利なモジュールはこれ以外にもたくさんあるのでぜひいろいろインストールしてみてくださいね!!
参考

コメント
[…] […]