OWNED MEDIAウェブ制作に役立つコンテンツを発信中!

Gulpでファイル更新監視とエラー検知・通知でSassのコンパイルを効率化する

最終更新日:2020.4.9 Update!!
コーディング時には欠かせないタスクランナーの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でファイル更新監視とエラー検知・通知でSassのコンパイルを効率化する   エラーが出ていなくてコンパイルが完了した場合 Gulpでファイル更新監視とエラー検知・通知でSassのコンパイルを効率化する    
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で便利なタスクを作ってみよう【エラーと通知編】
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram