Gulpでファイル更新監視とエラー検知・通知でSassのコンパイルを効率化する
最終更新日: 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のバージョン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で便利なタスクを作ってみよう【エラーと通知編】
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
categories