[Gulp × Sass × EJS]私が使っているgulpfile.jsの中身を公開します(2018年8月版)

コーディングをする時にGulpを使っていますか?

先日、私の地元・福岡で行われた「サト研」というWeb制作者向けの勉強会で、コーディングに特化した集まりがあったので出席してきました。
私が参加したグループの中ではデザイナーさんとコーダーさんの人数がだいたい半々くらいの感じだったのですが、その中で「Gulp使ってます??」という質問が出ており、その時の参加者の回答の感じでは実際にGulpを使っているコーダーさんの割合も半分くらいかなぁという印象でした。

かくいう私もGulpを導入してまだ1年くらい。受託でお仕事をする中、発注元の制作会社さんがGulpとEJSを使ってコーディングしていたので、「これは便利そう」とまずは検索してGulpについて学んでから、発注元で使われていたgulpfile.jsを参考に、見よう見まねで始めてみたのがきっかけです。

それまではSassのコンパイルにはCodekitを使っていて、「静的サイトを作るときもPHPやRubyを使ったテンプレートエンジンやWordPressのようなCMSみたいにヘッダーやフッターを共通パーツで使い回せたら便利なのになぁ」と思っていたので、Gulpで使うEJSはまさに打ってつけな存在!
Dreamweaverにはテンプレート機能があるけどDreamweaver自体ほとんど使っていないし、そもそもCoda2→SublimeText2→atom→VisualStudioCode(今ココ)と渡り歩いてきたので、テキストエディタに依存するテンプレート機能には頼りたくないというのが正直な話でした。

それからGulpとEJSに関する記事をEvernoteに保存しては読み返すことを繰り返し、今では自分のワークフローからGulpは手放せないものになってしまいました。(とか言いながら、あと数年したらもっと良いものが出てきて乗り換えてるのかもしれません。。。Web業界の時代の移り変わりは早い!)

現状で私がGulpを十分に理解し使いこなしていると言えるかどうかといえば自信を持って「YES」と言えるわけでもないのですが、現在自分が使っているgulpfile.jsの中身を公開します。

gulpfile.jsはこんな感じです。

var gulp = require("gulp"),
    ejs = require("gulp-ejs"),
    fs = require('fs'),
    sass = require("gulp-sass"),
    autoprefixer = require('gulp-autoprefixer'),
    mmq = require('gulp-merge-media-queries'),
    browser = require("browser-sync"),
    plumber = require('gulp-plumber'),
    rename = require("gulp-rename"),
    notify  = require('gulp-notify'),
    changed  = require('gulp-changed'),
    imagemin = require('gulp-imagemin'),
    imageminJpg = require('imagemin-jpeg-recompress'),
    imageminPng = require('imagemin-pngquant'),
    imageminGif = require('imagemin-gifsicle'),
    svgmin = require('gulp-svgmin');

var DEV = "dev",
    PUBLIC = "public";

//ejs
gulp.task("ejs", function() {
    var json = JSON.parse(fs.readFileSync(DEV + '/ejs/templates/data.json'));
    gulp.src([DEV + "/ejs/**/*.ejs",'!' + DEV + "/ejs/**/_*.ejs"])
    .pipe(ejs({json:json}))
    .pipe(rename({
      extname: ".html"
    }))
    .pipe(gulp.dest(PUBLIC))
    .pipe(browser.reload({stream:true}));
});

//style
gulp.task("style", function() {
    gulp.src(DEV + "/sass/**/*.scss")
        .pipe(plumber({
            errorHandler: notify.onError("Error: <%= error.message %>")
        }))
        .pipe(sass({
            style:"expanded",
            compass : false,
            "sourcemap=none": true,
        }))
        .pipe(autoprefixer({browsers: ['last 3 versions','ie >=11','android >=4.4']}))
        .pipe(mmq({
            log: false
          }))
        .pipe(gulp.dest(PUBLIC + "/css"))
        .pipe(browser.reload({stream:true}));
});

gulp.task('imagemin', function(){
    var srcGlob = DEV + '/images/**/*.+(jpg|jpeg|png|gif)';
    var dstGlob = PUBLIC + '/images';
    gulp.src( srcGlob )
    .pipe(changed( dstGlob ))
    .pipe(imagemin([
        imageminPng(),
        imageminJpg(),
        imageminGif({
            interlaced: false,
            optimizationLevel: 3,
            colors:180
        })
    ]
    ))
    .pipe(gulp.dest( dstGlob ));
});

gulp.task('svgmin', function(){
    var srcGlob = DEV + '/images/**/*.+(svg)';
    var dstGlob = PUBLIC + '/images';
    gulp.src( srcGlob )
    .pipe(changed( dstGlob ))
    .pipe(svgmin())
    .pipe(gulp.dest( dstGlob ));
});

//copy
gulp.task("js", function() {
    return gulp.src(DEV + "/js/**/*.js")
        .pipe(gulp.dest(PUBLIC + "/js"));
});

//fonts
gulp.task("fonts", function() {
    return gulp.src(DEV + "/fonts/**/*")
        .pipe(gulp.dest(PUBLIC + "/fonts"));
});

//browser sync
gulp.task("server", function() {
    browser({
        server: {
            baseDir: PUBLIC
        },
        port: 4000
    });
});

//watch
gulp.task("default",["ejs","style","js","imagemin","svgmin","fonts","server"], function() {
    gulp.watch(DEV + "/ejs/**/*.ejs",["ejs"]);
    gulp.watch(DEV + "/sass/**/*.scss",{cwd: './'},["style"]);
    gulp.watch(DEV + "js/**/*.js",["js"]);
    gulp.watch(DEV + "images/**/*",['imagemin','svgmin']);
    gulp.watch(DEV + "fonts/**/*",["fonts"]);
});

requireで呼び出しているものは下記のとおり。

gulp-ejs
gulpでEJSを使えるようにする
fs
node.jsのファイルシステムを操作するコアモジュール(EJSの中でJSONを使えるようにパースするため)
gulp-sass
gulpでSassを使えるようにする
gulp-autoprefixer
自動的にベンダープレフィックスを付与
gulp-merge-media-queries
散らかったメディアクエリの記述をまとめる
browser-sync
ブラウザの自動リロード
gulp-plumber
コンパイル時にエラーが起きてもgulpを走らせたままにしておく
gulp-rename
ファイル名を変更(拡張子を.ejsから.htmlにするため)
gulp-notify
エラーが起きた時にデスクトップ画面に通知を出す
gulp-changed
変更が生じたファイルを処理
gulp-imagemin
画像ファイルを圧縮
imagemin-jpeg-recompress
jpegファイルを圧縮<
imagemin-pngquant
pngファイルを圧縮
imagemin-gifsicle
gifファイルを圧縮
gulp-svgmin
svgファイルを圧縮

上記はEJSを使ったバージョンです。WordPressでテーマを作るとき用のgulpfile.jsも別に作っているので、そのうちそちらも公開するかもです。
まだまだおかしいところがあるかもしれないですが、新しい知識も蓄えながら、これからもブラッシュアップを続けていきます。