コーディング時には欠かせないタスクランナーのGulpですが、実際によく使っている便利なタスク例をまとめていきたいと思います。今回はSassのコンパイルに関するタスクです。   今回のタスクは、「Sassファイルの更新を監視」「コンパイルエラーを検知」「デスクトップ通知を表示」をまとめたものになります。Sassファイルを編集している時にはとても便利になります。今回のタスクではGulpのプラグインである「gulp-sass」「gulp-watch」「gulp-plumber」「gulp-notify」を使用します。では順番にコマンドを見ていきます。  

Gulpのセットアップ

まずはプロジェクトのディレクトリにGulpを準備していきます。詳しくは過去記事「gulpをローカルにインストールしてプロジェクト内で使用する」にもまとめていますので参考に

$ cd プロジェクトディレクトリ

// package.jsonの作成
$ npm init -y

// gulpをローカルにインストール
$ npm i -D gulp

  次に各タスクで使うGulpのプラグインをインストールしていきます。

// Sassコンパイル
$ npm i -D gulp-sass
$ npm i -D node-sass

// Sassファイル更新監視
$ npm i -D gulp-watch

// コンパイルエラー検知
$ npm i -D gulp-plumber

// デスクトップ通知
$ npm i -D gulp-notify

   

Gulpのタスクを登録

次にgulpfile.js作成し、タスクの登録を下記のように進めていきます。 【gulpfile.js】

var gulp = require("gulp");
var sass = require("gulp-sass");
var plumber = require('gulp-plumber');
var watch = require('gulp-watch');
var notify = require('gulp-notify');

// Sassコンパイル ＋ エラー検知 ＋デスクトップ通知
sass.compiler = require('node-sass');
gulp.task("sass", function() {
  gulp.src("./scss/**/*.scss")
  .pipe(plumber({
    errorHandler: notify.onError("Error: <%= error.message %>")
  }))
  .pipe(sass())
  .pipe(gulp.dest("./css"))
  .pipe(notify({
    title: 'Task running Gulp',
    message: 'sass file compiled.',
    sound: 'Tink',
  }));
});

// Sassファイル更新監視
gulp.task('watch', () => {
  return watch(['./scss/**'], () => {
    return gulp.start(['sass']);
  });
});

  これで、下記のコマンドを実行すると、Sassファイルが更新されるたびにエラーの検知を行い、エラー内容もしくはコンパイル完了をデスクトップ通知で確認できるようになります。

$ gulp watch

  実際に表示されるデスクトップ通知はこんな感じになります。 エラーが出ている場合   エラーが出ていなくてコンパイルが完了した場合    

Gulpのバージョン4系で推奨されている記述方法について

Gulpのバージョンが4系の場合には、gulp.task()が非推奨となっており、関数でタスクを記述する形になりますので、実際には例として下記のような形になります。 【gulpfile.js】

const { src, dest, watch } = require("gulp"),
 plumber = require('gulp-plumber'),
 notify = require('gulp-notify'),
 rename = require('gulp-rename'),
 sourcemaps = require('gulp-sourcemaps'),
 sass = require('gulp-sass'),
 autoprefixer = require('autoprefixer'),
 postcss = require('gulp-postcss'),
 cleanCSS = require('gulp-clean-css');

sass.compiler = require('node-sass');
const taskSass = () => 
 src('src/scss/**/*.scss')
  .pipe(plumber(
   { errorHandler: notify.onError('Error: <%= error.message %>') }
  ))
  .pipe(sourcemaps.init())
  .pipe(sass())
  .pipe(postcss([
    autoprefixer(
     { cascade: false, grid: "autoplace" }
    )
  ]))
  .pipe(cleanCSS())
  .pipe(rename(
   { extname: '.min.css' }
  ))
  .pipe(sourcemaps.write('../maps'))
  .pipe(dest('dist/assets/css'));

// Wacth 
const taskWatch = (done) => {
 watch('src/scss/**/*.scss', taskSass);
 done();
}

exports.default = taskWatch;

  細かいところですが、こういった便利な機能もGulpの魅力ですね、コーディングの効率化につなげていきましょう。   （参考） gulp.jsで便利なタスクを作ってみよう【エラーと通知編】