gulpの便利なタスク gulpfile.jsの記述例
gulpの便利なおすすめプラグインで紹介したプラグインなどを利用したgulp
の便利なタスクの実装例を紹介します。
less
,js
,html
のコンパイルや軽量化、watch
とlivereload
、エラー時の処理などを実装しています。
var gulp = require('gulp');
var $ = require('gulp-load-plugins')(); //プラグインを一括で読み込みます
var del = require('del'); //ファイルを削除するプラグイン
var runSequence = require('run-sequence'); //タスクの処理順序を制御するプラグイン
var process = require('process'); //プロセスを制御するプラグイン
var src = 'src'; //対象ファイルのパス
var dest = 'dist'; //ファイルの出力先パス
//エラー時にデスクトップ通知するファンクションを定義
var onError = function(err) {
$.notify.onError({
title: 'Gulp',
subtitle: 'エラー',
message: 'エラー: <%= error.message %>'
})(err);
this.emit('end');
};
//localhostを起動
gulp.task('webserver', function() {
gulp.src(dest)
.pipe($.webserver({
livereload: true,
open: true
}));
});
//LESSをコンパイルするタスク
//LESSのコンパイル→軽量化→ベンダープレフィックスを付与→ファイル名に.minを追加
gulp.task('less', function(){
//ファイル名の先頭に_の付くファイルはコンパイルしない(インクルードファイルなど)
return gulp.src([src + '/less/**/*.less',
'!' + src + '/less/**/_*.less'])
.pipe($.plumber({errorHandler: onError}))
.pipe($.cached('less'))
.pipe($.less({compress: true}))
.pipe($.autoprefixer('> 1%'))
.pipe($.rename({suffix: '.min'}))
.pipe(gulp.dest(dest + '/css')
);
});
//jsファイルを軽量化するタスク
//軽量化→ファイル名に.minを追加
gulp.task('js', function(){
return gulp.src([src + '/js/**/*.js',
'!' + src + '/js/**/_*.js'])
.pipe($.plumber({errorHandler: onError}))
.pipe($.cached('js'))
.pipe($.uglify())
.pipe($.rename({suffix: '.min'}))
.pipe(gulp.dest(dest + '/js')
);
});
//画像を圧縮するタスク
gulp.task('imagemin', function(){
return gulp.src([src + '/**/*.+(jpg|jpeg|png|gif|svg)'])
.pipe($.plumber({errorHandler: onError}))
.pipe($.changed(dest))
.pipe($.imagemin({progressive: true}))
.pipe(gulp.dest(dest)
);
});
//nunjucksをコンパイルするタスク
//nunjucksをコンパイル→軽量化
gulp.task('nunjucks', function () {
//コンパイル時に使用するパラメータを指定
var params ={
param1: 'パラメータ1',
param2: 'パラメータ2'
};
$.nunjucksRender.nunjucks.configure(['src/']);
return gulp.src([src + '/nunjucks/**/*.njk',
'!' + src + '/nunjucks/**/_*.njk'])
.pipe($.cached('nunjucks'))
.pipe($.plumber({errorHandler: onError}))
.pipe($.data(params))
.pipe($.nunjucksRender())
.pipe($.minifyHtml({
empty: true,
conditionals: true,
quotes: true
}))
.pipe(gulp.dest(dest));
});
//出力先フォルダを削除
//gulp-chachedのキャッシュをクリア
gulp.task('clean', function(){
del(dest);
$.cached.caches = {};
});
//デフォルトのタスク
//watchを開始
gulp.task('default', function(){
gulp.watch(src + '/less/**/*.less',['less']);
gulp.watch([src + '/nunjucks/**/*.njk'],['nunjucks']);
gulp.watch(src + '/js/**/*.js',['js']);
gulp.watch(src + '/**/*.+(jpg|jpeg|png|gif|svg)',['imagemin']);
});
//watchを停止するタスク
//プロセスを停止する
gulp.task('kill', function(){
process.exit(0);
});
//すべてのタスクを実行するタスク
//cleanタスクをしてからless,nunjucks,js,imageminを並列で実行する
gulp.task('build', function(){
runSequence(['clean'],
['less', 'nunjucks', 'js', 'imagemin']);
});