gulpのタスクを追加して便利な環境にしよう

globでパーシャルファイルを一括で読み込む

@import "components/headers"
@import "components/footers"
@import "components/contents"

上記のようにコンポーネントが増えるたびにパーシャルファイルを@inportで指定するのは面倒！
そこで

npmから「gulp-sass-glob」パッケージをインストール

cmd

npm install --save-dev gulp-sass-glob

インストールしたら、gulpfile.jsに読み込みの設定とsassGlobをsassの前に追記します。

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
// 「gulp-sass-glob」を読み込む
var sassGlob = require('gulp-sass-glob');

gulp.task('sass', function () {
    return gulp.src('./sass/**/*.scss')
    // sassの前に指定
    .pipe(saccGlob());
    .pipe(sass({outputStyle:'expanded'}))
    .pipe(gulp.dest('css'));
});

これで設定は完了です。

@import "components/**"

これだけで「components」ディレクトリの全ファイルがインポートされます。

ソースマップでコンパイル前のソースの場所を知る

sassはコンパイルが必要なので、ブラウザで確認する際は、コンパイルされたCSSをみることになりますが、その際、Chromeデベロッパーツールなどでデバックしたりすることが多いと思います。
しかし、コンパイルする前のSassファイルの場所がわからないと元のファイルを修正しようがありません。
そんなとき、「ソースマップ」を使うと、コンパイル前のソースの場所がわかります。

npmから「gulp-sourcemaps」パッケージをインストールします。

cmd

npm install --save-dev gulp-sourcemaps

インストールしたら、gulpfile.jsに読み込みの設定とsourcemap.init、sourcemaps.writeの３ヶ所を追記します。

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var sassGlob = require('gulp-sass-glob');
// 「gulp-sourcemaps」を読み込む
var sourcemaps = require('gulp-sourcemaps');

gulp.task('sass', function () {
    return gulp.src('./sass/**/*.scss')
    .pipe(sourcemaps.init());   // gulp.srcの直後に指定
    .pipe(saccGlob());
    .pipe(sass({outputStyle:'expanded'}))
    .pipe(sourcemaps.write());  // gulp.destの直前に指定
    .pipe(gulp.dest('css'));
});

mapファイルの書き出し
CSS内にインラインで書き込まず、外部ファイルとして書き出したい場合は、writeメソッドの引数にパスを指定すれば、mapファイルをして書き出されます。

gulpfile.js

.pipe(sourcemaps.write('./css'));   // パスを指定

エラー時にWatchを停止させずに自動コンパイルを継続させる

Sassの記述ミスでコンパイルエラーになってwatchタスクがとまってしまい、、エラーのたびにタスクが止まってコマンドを入れ直すのは面倒くさいです。
またプラグインを追加して、停止させないようにしましょう。

インストールと設定

npmから「gulp-plumber」パッケージをインストールします。

cmd

npm install --save-dev gulp-plumber

インストールしたら、gulpfile.jsに読み込みの設定とplumberをgulp.srcの直下に追記します。

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var sassGlob = require('gulp-sass-glob');
var sourcemaps = require('gulp-sourcemaps');
// 「gulp-plumber」を読み込む
var plumber = require('gulp-plumber');

gulp.task('sass', function () {
    return gulp.src('./sass/**/*.scss')
    .pipe(plumber());   // gulp.srcの直下に指定
    .pipe(sourcemaps.init());
    .pipe(saccGlob());
    .pipe(sass({outputStyle:'expanded'}))
    .pipe(sourcemaps.write());
    .pipe(gulp.dest('css'));
});

これでエラーを起こしてもwatchタスクを継続されます。
※@errorディレクティブでもWatchは停止しないので注意してください。

エラーに気づきやすくするため、通知を出す

今度はwatchを停止させないかわりに、エラーに気づかない可能性もあります。
そこでエラー時に通知を出す設定をします。

インストールを設定

npmから「gulp-notify」パッケージをインストールします。

cmd

npm install --save-dev gulp-notify

インストールしたら、gulpfile.jsに読み込みの設定とnotifyをplumberの引数に追記します。

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var sassGlob = require('gulp-sass-glob');
var sourcemaps = require('gulp-sourcemaps');
var plumber = require('gulp-plumber');
// 「gulp-notify」を読み込む
var notify = require('gulp-notify');

gulp.task('sass', function () {
    return gulp.src('./sass/**/*.scss')
    .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")});   
    // plumberの引数にエラーメッセージを設定
    .pipe(sourcemaps.init());
    .pipe(saccGlob());
    .pipe(sass({outputStyle:'expanded'}))
    .pipe(sourcemaps.write());
    .pipe(gulp.dest('css'));
});

エラーのファイル名を行数が表示されるので、修正箇所も見つけやすいです。

続きます　⇒　PostCSSでSassをもっと楽に