俺だけのGulp（ガルプ）

2014-10-16
Web制作

※2016.07.28一部修正しました。
※2014.11.20一部修正しました。
前回、Yeoman（ヨーマン）を使ってみたのは良いですが、その中の主役級の活躍をするタスクランナーのことをあまり知らないではありませんか。

というわけで、使ってみようと思います。

（2016.07.28追記）
gulp.task(‘****’, function() {})の中で、returnをしないと、処理が不完全になってしまうことがありました。
returnがなければ、非同期で速く処理できると思っていたのですが、処理が多く走りすぎると、不完全なファイルになってしまうので、return入れた方が安全です。

（2014.11.20追記）
gulp-sassの不具合なのか、Sassがうまく動いていないことに気がつきました。
gulpfile.jsのsass部分を修正しました。

gulp-sassで.sassファイルを使うときの注意点

タスクランナーとは

Node.jsやRubyにある便利なツールを自動で実行することができます。

JavaScript/CSS/HTMLの圧縮
Sass
CoffeeScript
CSSスプライト
画像の軽量化

などなど。

ほかにも多数ありますが、このような機能を自動化できます。

Grunt（グラント）とGulp（ガルプ）

現在、有名なタスクランナーと言えば、この二つです。
基本的にYeomanのジェネレータでは、Gruntが使われています。

Gruntのあとに出てきたのが、Gulpです。

機能的は、ほとんど同じですが、Gruntのほうがプラグインが多く、Gulpのほうが処理が速い、と言われています。

今回は、Gulpでいこうと思います。

理由は、Gruntfileの書き方がどうしても慣れなかったからです。
それぞれ、Gruntfile、Gulpfileというファイルに、使いたいプラグインなどの設定を書くのですが、いろいろと長くなってしまいます。

私の場合、Gruntfileの入れ子具合に、ちょっと厳しかったです。

Gulpは、jQueryのようにチェーンメソッドで書けるのが、分かりやすかったのかもしれません。
そんなわけで、Gulpにしました。

gulp.js The streaming build system

GRUNT The JavaScript Task Runner

欲しい機能を考えよう

欲しい機能は、人それぞれだと思います。
私の欲しい機能を考えて、Gulpfileを作成してみたいと思います。

私がよく行う案件としては、html/css/jsのコーディングを行い、一式を納品することが多いです。

そのあとで、クライアントが更新したり、モックとして、動的に組み込んだりすることがあります。

ということは、ソースの圧縮にはこだわらない方が良いですね。
どちらかというと、できるだけ分かりやすく、美しいコードを保ちたいです。

しかし、SassやCoffeeScriptを全く使わないのは、面白くないので、使える状態にしておきたいです。
ベンダープレフィックスを自動でつけるのも良いですね。

cssスプライトや画像の軽量化は、自動でできるのならそうしたいですね。
（その後、cssスプライトのプラグインは上手くインストールできなかったので、断念しました）

パーツの共有化もしたいです。phpのincludeみたいにしたいですね。
でも、最終的には静的なhtmlを吐き出したいです。

こんな感じで、いきましょう。

プラグイン	機能
gulp-sass	Sassのコンパイル
gulp-autoprefixer	自動でベンダープレフィックスを付ける
browser-sync	ブラウザを自動更新、複数のブラウザに同期
gulp-plumber	エラー時に監視を止めない
gulp-file-include	ファイルをインクルード
gulp-prettify	HTMLを整形する
gulp-cssbeautify	CSSを整形する
gulp-jsbeautifier	JavaScriptを整形する
gulp-changed	変更したファイルだけ反映する
del	ファイルの削除

私の環境では、gulp-imageminが動かせなかったので、個別にしました。

プラグイン	機能
imagemin-gifsicle	gifを軽量化する
imagemin-jpegtran	jpegを軽量化する
imagemin-optipng	pngを軽量化する
imagemin-svgo	svgを軽量化する

いつものNode.jsのインストール

Windowsは、公式サイトから実行ファイルをダウンロードしてインストールしましょう。

Macも同じようにインストールできますが、Homebrewというパッケージ管理ツールを使用しても良いです。

node.js

Homebrew

Gulpをインストール

Node.jsが用意できたらGulpをインストールしましょう。

WindowsならDOSコマンドプロンプト、Macならターミナルからコマンドを実行していきます。

> npm install -g gulp

Gulpを使うディレクトリを作成しましょう。

> mkdir project  
> cd project

package.jsonを作成します。基本的には、全てEnterで大丈夫です。

> npm init  
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install  --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (project_c)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /project_c/package.json:

{
  "name": "project_c",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this ok? (yes)

Gulpのバージョンを確認すると以下のようになります。

> gulp -v
[00:00:00] CLI version 3.8.8
[00:00:00] Local version undefined

Gulpを使うディレクトリにもGulpをインストールする必要があります。

> npm install gulp@3.8.8 --save-dev
> gulp -v
[00:00:00] CLI version 3.8.8
[00:00:00] Local version 3.8.8

Gulpのプラグインなどのインストール

CoffeeScriptのコンパイル

> npm install gulp-coffee --save-dev

Sassのコンパイル

> npm install gulp-sass --sava-dev

自動でベンダープレフィックスを付ける

> npm install gulp-autoprefixer --save-dev

ブラウザを自動更新、複数のブラウザに同期

> npm install browser-sync --save-dev

エラー時に監視を止めない

> npm install gulp-plumber --save-dev

ファイルをインクルード

> npm install gulp-file-include --save-dev

HTMLを整形する

> npm install gulp-prettify --save-dev

CSSをきれいにする

> npm install gulp-cssbeautify --save-dev

JavaScriptを整形する

> npm install gulp-jsbeautifier --save-dev

変更したファイルだけ反映する

> npm install gulp-changed --save-dev

ファイルの削除

> npm install del --save-dev

gifの軽量化

> npm install imagemin-gifsicle --save-dev

jpegの軽量化

> npm install imagemin-jpegtran --save-dev

pngの軽量化

> npm install imagemin-optipng --save-dev

svgの軽量化

> npm install imagemin-svgo --save-dev

gulpfile.js

ディレクトリ構成はこんな感じにしました。

appにファイルを作成して、distに納品データが入るようにします。
incには、インクルードしたいファイルを入れて、gulp-file-includeでファイルをインクルードします。

├app（制作データ）
├dist（納品データ）
├inc（インクルードするファイル）
├node_modules（ローカルのgulpやプラグインがあるディレクトリ）
├gulpfile.js（gulpの挙動を記述したファイル）
└package.json（gulpやプラグインのインストール情報がかかれたファイル）

それでは、gulpfile.jsを書きましょう。
package.jsonと同じところに置きましょう。

gulpfile.js

var
gulp = require('gulp'),
coffee = require('gulp-coffee'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
browser = require('browser-sync'),
plumber = require("gulp-plumber"),

gifsicle = require('imagemin-gifsicle'),
jpegtran = require('imagemin-jpegtran'),
optipng = require('imagemin-optipng'),
svgo = require('imagemin-svgo'),

fileinclude = require('gulp-file-include'),
prettify = require('gulp-prettify'),
cssbeautify = require('gulp-cssbeautify'),
jsprettify = require('gulp-jsbeautifier'),
changed = require('gulp-changed'),
del = require('del')
;

var paths = {
    base:'/project/',
    scss  :'app/**/*.scss',
    js    :'app/**/*.js',
    coffee:'app/**/*.coffee',
    html  :'app/**/*.html',
    image :'app/**/img/*',
    dist  :'./dist'
};

gulp.task('server', function() {
    browser({server: {baseDir: paths.dist}});
});

gulp.task('image', function() {
    return gulp
    .src(paths.image)
    .pipe(plumber())
    .pipe(changed(paths.dist))
    .pipe(gifsicle())
    .pipe(jpegtran())
    .pipe(optipng())
    .pipe(svgo())
    .pipe(gulp.dest(paths.dist))
    .pipe(browser.reload({stream:true}));
});

gulp.task('sass', function() {
    return gulp
    .src(paths.scss)
    .pipe(plumber())
    .pipe(changed(paths.dist))
    .pipe(fileinclude({basepath: paths.base}))
    //（2014.11.20追記）
    .pipe(sass({
        errLogToConsole: true,
        sourceComments: 'normal'
    }))
    .pipe(autoprefixer())
    .pipe(cssbeautify())
    .pipe(gulp.dest(paths.dist))
    .pipe(browser.reload({stream:true}));
});

gulp.task('coffee', function() {
    return gulp
    .src(paths.coffee)
    .pipe(plumber())
    .pipe(changed(paths.dist))
    .pipe(fileinclude({basepath: paths.base}))
    .pipe(coffee())
    .pipe(gulp.dest(paths.dist))
    .pipe(browser.reload({stream:true}));
});

gulp.task('js', function() {
    return gulp
    .src(paths.js)
    .pipe(plumber())
    .pipe(changed(paths.dist))
    .pipe(fileinclude({basepath: paths.base}))
    .pipe(jsprettify())
    .pipe(gulp.dest(paths.dist))
    .pipe(browser.reload({stream:true}));
});

gulp.task('html', function() {
    return gulp
    .src(paths.html)
    .pipe(plumber())
    .pipe(changed(paths.dist))
    .pipe(fileinclude({basepath: paths.base}))
    .pipe(prettify())
    .pipe(gulp.dest(paths.dist))
    .pipe(browser.reload({stream:true}));
});

gulp.task('clean', function(cb) {
  del(paths.dist, cb);
});

gulp.task('watch', function() {
    gulp.watch(paths.scss,['sass']);
    gulp.watch(paths.coffee,['coffee']);
    gulp.watch(paths.html,['html']);
    gulp.watch(paths.js,['js']);
    gulp.watch(paths.image,['image']);
});

gulp.task('build', ['clean'], function(){
    gulp.start('create');
});

gulp.task('create', ['sass','coffee','html','js','image']);
gulp.task('default', ['build','watch','server']);

あとは、コマンドを叩けば、ブラウザが立ち上がり、ディレクトリの監視など全て自動で行われるはずです。