0%

Programmingプログラミングナレッジ

Posted:2018.06.14

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

コーディング時には欠かせないタスクランナーの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で便利なタスクを作ってみよう【エラーと通知編】

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

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

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

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

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】