Gulpfile.jsの設定

10/17/2020公開
10/19/2020更新(browsersyncでブラウザのオートリロード追加)
08/30/2022更新(新しくコピーするパスの追加。gulp-changedの再調整。*sassなどファイル名が変わるものはgulp-cachedを使用するとのことなのでこれも追加。ディレクトリ名が変わったのでこれの変更。)

やりたいこと--

dev(開発用のディレクトリ)以下のファイルで変更があったものをdeployファイル(本番反映用のディレクトリ)に都度gulp watchで吐き出す。*毎度すべてのファイルを吐き出すと反映まで時間がかかるため。devディレクトリ以下にあるcss、img、js、scss内のファイルはコンパイルや縮小化などの処理が必要なため変更後gulpで処理を加えてから所定の場所(deployディレクトリのpublic以下)に出力されるようにする。

参考にしたサイト--

gulp-changed:
https://whiskers.nukos.kitchen/2014/12/13/gulp-changed.html
gulp.dist:
https://www.nxworld.net/services-resource/gulp-dest-to-keep-directory-and-file-structure.html
sourcemaps, gulp-plumber:
https://book2.scss.jp/code/c5/04.html
browsersync:
https://guwii.com/bytes/best-simple-gulp-setup-sass-browsersync-local-server/
など。


Gulpfile.jsの中身--

/* jshint node: true */
'use strict';

//Note: imagemin and jsmin issues (files were not copied) were fixed on Feb 22, 2021. 
//Still need to work on the watch system for when new image files added and scss import files modified

// Load plugins
const gulp = require('gulp');
const cache = require('gulp-cached');
const changed = require('gulp-changed');
const sass = require('gulp-sass'); //scss
const autoprefixer = require('gulp-autoprefixer'); //vendor prefix
const plumber = require("gulp-plumber"); //error handling
const cssnano = require("gulp-cssnano"); // css minify
const jsmin = require("gulp-minify"); //js minify
const imagemin = require('gulp-imagemin'); //image
const imageminMozjpeg = require('imagemin-mozjpeg');
const imageminPngquant = require('imagemin-pngquant');
const imageminGifsicle = require('imagemin-gifsicle');
const imageminSvgo = require('imagemin-svgo');
const sourcemaps = require('gulp-sourcemaps');
const browserSync = require('browser-sync');


//paths
const paths = {
	//src
   dev: 'dev', 
   ejs : 'dev/*.ejs',
   scss: 'dev/scss/*.scss',
   js : 'dev/javascripts/*.js',
   img : 'dev/images/**/*.{gif,jpg,png,svg,ico}',
   files : 'dev/files/*',
   lib_js : 'dev/javascripts/libraries/**/*.js',
   lib_css : 'dev/stylesheets/libraries/*.css',
   //directory for compiled css
   css_dist : 'dev/stylesheets',
   partials: 'dev/partials/*.ejs',

   //master
   deploy: 'deploy', //top
   views_deploy: 'deploy/views', //ejs, error
   partials_deploy: 'deploy/views/partials', // ejs partials
   css_deploy: 'deploy/public/stylesheets', //css
   img_deploy: 'deploy/public/images', //img
   files_deploy : 'deploy/public/files',
   js_deploy: 'deploy/public/javascripts', //js
   lib_jsdeploy: 'deploy/public/javascripts/libraries', //js library
   lib_cssdeploy: 'deploy/public/stylesheets/libraries' //js library
};

//Sass compile
function sassComp () {
 return gulp
 .src(paths.scss)
 .on("error", sass.logError)
 .pipe(cache(paths.css_dist))
 .pipe(plumber())
 .pipe(sourcemaps.init())
 .pipe(sass({ outputStyle: "expanded" }))
 .pipe(autoprefixer())
 .pipe(sourcemaps.write())
 .pipe(gulp.dest(paths.css_dist));
}

//Minify css
function cssMin () {
 return gulp.src(paths.css_dist + '/*.css')
     .pipe(changed(paths.css_deploy))
     .pipe(plumber())
     .pipe(cssnano({zindex: false}))     
     .pipe(gulp.dest(paths.css_deploy))
     .pipe(browserSync.reload({ stream: true }));
}

//Minify js 
function jsMin () {
return gulp.src(paths.js)
 .pipe(changed(paths.js_deploy))
 .pipe(plumber())
 .pipe(sourcemaps.init())
 .pipe(jsmin({
     ext:{
         src:'.js',
         min:'.js'
     },
     noSource: true
 }))
 .pipe(sourcemaps.write())
 .pipe(gulp.dest(paths.js_deploy))
 .pipe(browserSync.reload({ stream: true }));
}

//Optimize images
function imageMin () {
 return gulp
 .src(paths.img)
 .pipe(changed(paths.img_deploy))
 .pipe(plumber())
 .pipe(imagemin([
   imageminMozjpeg({ quality:　80}),
   imageminPngquant({ quality: [.8, .9]}),
   imageminGifsicle(),
   imageminSvgo()
 ]))
 .pipe(gulp.dest(paths.img_deploy))
 .pipe(browserSync.reload({ stream: true }));
}

// Copy ejs
function updateEjs () {
 return gulp
 .src(paths.ejs)
 .pipe(changed(paths.views_deploy))
 .pipe(gulp.dest(paths.views_deploy))
 .pipe(browserSync.reload({ stream: true }));
}

// Copy partials 
function updatePartials () {
 return gulp
 .src(paths.partials)
 .pipe(changed(paths.partials_deploy))
 .pipe(gulp.dest(paths.partials_deploy))
 .pipe(browserSync.reload({ stream: true }));
}

// Copy files 
function updateFiles () {
 return gulp
 .src(paths.files)
 .pipe(changed(paths.files_deploy))
 .pipe(gulp.dest(paths.files_deploy))
 .pipe(browserSync.reload({ stream: true }));
}

// Copy js libraries
function copy_jslibs () {
 return gulp
 .src(paths.lib_js)
 .pipe(changed(paths.lib_jsdeploy))
 .pipe(gulp.dest(paths.lib_jsdeploy))
 .pipe(browserSync.reload({ stream: true }));
}

// Copy css libraries
function copy_csslibs () {
 return gulp
 .src(paths.lib_css)
 .pipe(changed(paths.lib_cssdeploy))
 .pipe(gulp.dest(paths.lib_cssdeploy))
 .pipe(browserSync.reload({ stream: true }));
}

// Browsersync proxy setting function
function connectSync() {
   browserSync.init({
       browser: "google chrome",
       proxy: 'localhost:3000',
       open: true
   });
}

// Watch function
function watchFiles() {
gulp.watch(paths.dev).on('change', gulp.series(sassComp, cssMin, jsMin, imageMin, updateEjs, updatePartials, updateFiles, copy_jslibs, copy_csslibs, browserSync.reload));
}

// Gulp default
gulp.task('default', gulp.parallel(connectSync, watchFiles));

手順--

a. Load plugins
必要なプラグインを読み込む。gulp、sass、gulp-changed (出力先のファイルと変更があったファイルのみ書き出してくれる?)、gulp-autoprefixer(ベンダープレフィックスを自動で付与してくれる)、gulp-plumber(エラーがあった際に処理を継続してくれる？)、css、js、imageのファイル最適化、縮小系、gulp-sourcemaps(利点に関してよくわかっていないがデバック用などにコンパイル前の情報を残してくれる？)などを利用。

b. Paths
各パス（入力先や出力先）を変数化。
基本的にはディレクトリ構造を維持してdevで変更のあったファイルをdeployに出力。*dev以下のファイルscss、js、css、imageファイルは処理を加えてdeploy内のpublic以下に出力。

c. Sass compile
scssファイルをコンパイルするファンクション。

d. Minify css
cssファイルの縮小化するファンクション。

e. Minify js
jsファイルの縮小化するファンクション。

f. Optimize images
画像を最適化するファンクション。

g. Copy ejs 
dev内のejsファイルをdeploy以下の所定の場所にコピー。

以下同様にコピーするファンクションのため説明一部省略...

h. Browsersync proxy setting function
browsersyncでproxyの設定 (localhost:3000)。

i. Watch function
devディレクトリ以下のファイルで何かしら変更があれば上記のファンクションを実行するファンクション。

j. Gulp default
Gulpのデフォルトタスクの設定(i. Browsersync proxy setting functionとk. Watch function)。gulp.seriesではタスクがとまりwatchしてくれなかったのでgulp.parallelに変更。

あとがき--

とりあえず希望している通り動いているようだがこれがベストかどうかはまだわからず。dev以下で変更があった場合全てのファンクションを呼び出しているが、ある程度ブロック分けしてwatchで監視する方がいいのか？（jsのwatch、scssのwatch、ejsファイルのwatchなど）。使いながら調整予定。以前懸念していたgulp-changedは記述の位置を変える（ファンクション内の処理の上に記述する）ことで思ったように機能し処理が早くなった事を確認済み。