先ほどのsass.jsに追記していきます。

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');

var options = {
    outputStyle: 'compressed',
    sourceMap: true,
    sourceComments: false
};
var autoprefixerOptions = {
    browsers: <'last 3 version', 'ie >= 6', 'Android 4.0'>
};

gulp.task('sass', function() {
    gulp.src('app/src/sass/*.scss')
    .pipe(sass(options))
    .pipe(autoprefixer(autoprefixerOptions))
    .pipe(gulp.dest('app/product/css/'));
});

変数autoprefixerには、プラグインを読み込み、autoprefixerOptionsにはオプションを記述しました。sassのコンパイル後、autoprefixerを走らせます。

よく使うオプション

実行

gulp sass

HTML編

つづいて、HTML編です。HTMLを記述する場合には、htmlファイルを直接書かず、JavaScriptテンプレートエンジンを使用し、モジュール（部品）に分けて作成していきます。

弊社では「EJS」というテンプレートエンジンを使っているので、それをgulpのタスクとして実行できるプラグインをご紹介します。テンプレートエンジンを使うメリットは、共通パーツをモジュール化して複数ページで読み込めるので、何度も同じ記述をしなくていいところです。修正も一箇所になるので、メンテナンス性も向上します。

「EJS」については、下記の記事で詳述しているので、参考にどうぞ。

gulp-ejs

「gulp-ejs」は、HTMLを生成するテンプレートEJSを、HTMLにコンパイルするプラグインです。

インストール方法

npm install --save-dev gulp-ejs

使用例

まずは、srcディレクトリの中にejsという名前でディレクトリを作成します。出力ファイルと、そのまま出力しないモジュールファイルに分けて管理したいので、ejsディレクトリ内を、下記のようなディレクトリ構成にします。

├── index.ejs
└── parts
    ├── _head.ejs
    ├── _l-footer.ejs
    ├── _l-header.ejs
    └── _media.ejs

_から始まるファイルはindex.ejsなどのファイル内で読み込むので、そのまま出力しないように設定して、gulp.srcのパス設定で使用します。

タスクファイルは下記のように記述します。

var gulp = require('gulp');
var ejs = require('gulp-ejs');

var datas = {
    title: 'test site',
    message: 'hello world'
};
var settings = {
    ext: '.html'
};
gulp.task('ejs', function() {
    gulp.src(<'app/src/ejs/*.ejs', '!app/src/ejs/_*.ejs'>)
        .pipe(ejs(datas, settings))
        .pipe(gulp.dest('app/product'));
});

 
また、gulpfile.jsにこのタスクを読み込むように追記しましょう。

require('./gulp/ejs.js');

よく使うオプション

引数にオブジェクトでデータを渡すことができます。

ejs内でそれを使用するには、

<%= title %>

このように記述すれば、その値が出力されます。

また、settingsは必須ではありませんが、拡張子を設定できます。つまり、PHPなどのファイルとして出力することも可能ということです。

実行

gulp ejs

JavaScript編

つづいて、JavaScriptに関するプラグインをご紹介します。CSSやHTMLと同様、モジュール（部品）に分けて作成していきます。そして、1つのファイルとして出力することで、（まだほとんどのサーバがhttp2ではないので）読み込みファイル数を少なくでき、レスポンス向上にも役立ちます。

gulp-babel

「gulp-babel」は、JavaScriptをES2015で記述する場合に、ブラウザで動作するよう、ES5にコンパイルするプラグインです。

インストール方法

npm install --save-dev gulp-babel babel-preset-es2015

使用例

まずは、srcディレクトリの中にjsという名前でディレクトリを作成します。作成したjsディレクトリの中に、app.jsを作成し記述していきます。また、新たにタスクファイルを記述していきますので、gulpディレクトリ内に下記のファイルを作成します。

var gulp = require('gulp');
var babel = require('gulp-babel');


gulp.task('babel', function() {
    gulp.src('app/src/js/app.js')
    .pipe(babel({
        presets: <'es2015'>
    }))
    .pipe(gulp.dest('app/product/js'));
});

gulpgfile.jsには、上記のファイルを読み込む命令を記述します。

よく使うオプション

その他にも、下記リンク先に記載されているオプションが使えます。
https://babeljs.io/docs/usage/options/

実行

gulp babel

gulp-webpack

「gulp-webpack」は、JavaScriptの依存性を解決しながら、1つにまとめてくれるwebpackのプラグインです。

インストール方法

npm install gulp-webpack --save-dev

使用例

これまでと同様、gulpディレクトリ内にwebpack用のタスクファイルを作成します。

var gulp = require('gulp');
var webpack = require('gulp-webpack');

var options = {
    output: {
        filename: "<name>.js",
        sourceMapFilename: 'map/<file>.map'
    },
    devtool: '#inline-source-map',
    resolve: {
        modulesDirectories: <
            'bower_components',
            'node_modules',
            'src'
        >,
        alias: {

        }
    },
    module: {

    },
    plugins: {

    }
};

gulp.task('webpack', function() {
     gulp.src('app/src/js/app.js')
    .pipe(webpack())
    .pipe(gulp.dest('app/product/js'));
});

よく使うオプション

使用例に記載した、optionsオブジェクトを参照として解説します。

今回optionsには設定情報の雛形を記述しました。

new webpack.ProvidePlugin({
    jQuery: "jquery",
    $: "jquery",
    jquery: "jquery"
})

実行

gulp webpack

gulp-beautify

「gulp-beautify」は、JavaScriptを整形してくれるプラグインです。

インストール方法

npm install gulp-beautify --save-dev

使用例

出力ファイルを整形したいので、先ほど作成したbabel.jsに追記していきます。destを実行する前に、beautifyを実行するようにします。

var beautifyOptions = {
    indent_size: 2,
    indent_char: " ",
    eol: '\n',
    end_with_newline: true
};
gulp.task('babel', function() {
    gulp.src('app/src/js/app.js')
    .pipe(babel({
        presets: <'es2015'>
    }))
    .pipe(beautify(beautifyOptions))
    .pipe(gulp.dest('app/product/js'));
});

よく使うオプション

実行

gulp babel

ユーティリティ編

ここからは、実制作で便利だと思ったものをいくつかご紹介します。

gulp-ftp

「gulp-ftp」は、ftpでのアップロードをコマンドでできるようにするプラグインです。

インストール方法

npm install --save-dev gulp-ftp gulp-util

使用例

gulpディレクトリに、ftpタスクファイルを作成します。また、gulpfile.jsにはそれを読み込むための記述も追記します。

var gulp = require('gulp');
var gutil = require('gulp-util');
var ftp = require('gulp-ftp');

var options = {
    host: 'website.com',
    port: 21,
    user: 'johndoe',
    pass: '1234',
    remotePath: '/home/www/'
};

gulp.task('ftp', function () {
    gulp.src('src/*')
    .pipe(ftp(options))
    .pipe(gutil.noop());
});

よく使うオプション

実行

gulp ftp

gulp-uglify

「gulp-uglify」は、ファイルの圧縮を行うプラグイン。公開用にcssファイルやjsファイルを圧縮することで、ファイルサイズが縮小され、レスポンス向上に役立ちます。

インストール方法

npm install gulp-uglify --save-dev

使用例

こちらも、destを実行する前にuglifyを実行させます。babel.jsに少し変更を加えて、出力ファイルが圧縮されるよう設定してみます。

var gulp = require('gulp');
var babel = require('gulp-babel');
var uglify = require('gulp-uglify');

gulp.task('babel', function() {
    gulp.src('app/src/js/app.js')
    .pipe(babel({
        presets: <'es2015'>
    }))
    .pipe(uglify())
    .pipe(gulp.dest('app/product/js'));
});

実行

gulp babel

ファイルを開くと、圧縮されていることが確認できます。

"use strict";function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function")}var Hoge=function a(n){_classCallCheck(this,a),this.name=n};

gulp-if

「gulp-if」は、タスク記述時に処理の分岐ができるプラグイン。

例えば、設定ファイルで圧縮すると指定した場合にだけ、圧縮の処理をするなどです。

インストール方法

npm install gulp-if --save-dev

使用例

gulp-uglifyでbabel.jsファイルを変更しましたが、こちらでは圧縮の設定がある場合に圧縮するよう記述を変更してみます。

var gulp = require('gulp');
var babel = require('gulp-babel');
var uglify = require('gulp-uglify');
var gulpif = require('gulp-if');

var isUglify = function() {
    if (typeof process.argv<3> !== "undefiend" && process.argv<3> === '-uglify') {
        return true;
    } else {
        return false;
    }
}

gulp.task('babel', function() {
    gulp.src('app/src/js/app.js')
    .pipe(babel({
        presets: <'es2015'>
    }))
    .pipe(gulpif(isUglify(), uglify()))
    .pipe(gulp.dest('app/product/js'));
});

gulp babelを実行した際に -uglify 引数があれば、圧縮をします。isUglifyという関数を作成して、その判定をおこなっています。もちろん、どのような引数にするかは、自分で設定できます。

実行

gulp babel -uglify

gulp-copy

プラグインではないですが、役立つタスクなので紹介させてください。「gulp-copy」は、画像のディレクトリなどの静的ファイルをsrcディレクトリからproductディレクトリへコピーするのに便利なんです。

使用例

gulpディレクトリ内にcopy.jsを作成して、コピーのタスクを記述していきます。また、gulpfile.jsでこのファイルを読み込むように追記します。

var gulp = require('gulp');

gulp.task('copy', function() {
    gulp.src(<'app/src/images/**'>)
    .pipe(gulp.dest('app/product/images'));
});

実行

gulp copy

lint系

構文エラーなどを検出してくれるlintも、入れておくといいでしょう。

• CSS
  https://www.npmjs.com/package/gulp-csslint/
• JavaScript
  https://www.npmjs.com/package/gulp-eslint/
• html
  https://www.npmjs.com/package/gulp-html5-lint/

まとめ

最終的なディレクトリは、下記のようになりました。

├── app
│   ├── product
│   │   ├── css
│   │   │   └── style.css
│   │   ├── images
│   │   │   └── 9d33f56f.png
│   │   ├── index.html
│   │   └── js
│   │       └── app.js
│   └── src
│       ├── ejs
│       │   ├── index.ejs
│       │   └── parts
│       │       ├── _head.ejs
│       │       ├── _l-footer.ejs
│       │       ├── _l-header.ejs
│       │       └── _media.ejs
│       ├── images
│       │   └── 9d33f56f.png
│       ├── js
│       │   └── app.js
│       └── sass
│           └── style.scss
├── gulp
│   ├── babel.js
│   ├── copy.js
│   ├── ejs.js
│   ├── ftp.js
│   ├── sass.js
│   └── webpack.js
├── gulpfile.js
├── node_modules
└── package.json

gulpタスクを自在に組めるようになることで、開発の効率化が図れると思います。プラグインの組み合わせ次第で、世界を変えるようなイノベーションを起こせるはずなので、いろいろと試してみてください。

それでは！

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。