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

Gulp 2018.06.14

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

Tags: ,,,
最終更新日: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で便利なタスクを作ってみよう【エラーと通知編】

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?