第5章現場で使える実践Sassテクニック

5-4 gulpのタスクを追加してもっと便利な環境にする

npm install

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

@import "components/headings";
@import "components/texts";
@import "components/lists";
@import "components/buttons";
@import "components/images";

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

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

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

@import "components/**";

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

npm install --save-dev gulp-sourcemaps

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

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

ソースマップ書き出し

/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2 ...（略）... IifQ== */

mapファイルの書き出し

    .pipe(sourcemaps.write('./css'))

/*# sourceMappingURL=../css/sample.css.map */

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

npm install --save-dev gulp-plumber

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'); //①「gulpplumber」を読み込み

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

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

npm install --save-dev gulp-notify

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');
var notify = require('gulp-notify'); //①「gulp-notify」を読み込み

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