gulp入門

アジェンダ

なぜなにgulp
実際に使ってみる
おまけ
参考

なぜなにgulp

gulpとは

gulp公式
Gruntと同じ自動化ツールです（参考：Grunt入門）

Gruntと何が違うの？

（個人的主観ですが）Gruntよりも書きやすい
まだ対応パッケージが少ない

gulpの特徴

The streaming build system
どういうイメージかというと以下のように入力から出力までを数珠つなぎに処理していきます。

入力 >>> 処理1 >>> ... >>> 処理N >>> 出力

実際に使ってみる

事前準備

GithubのGetting Startを参考にします
どこか適当な場所にフォルダを作ってcdコマンドでそのフォルダに移動しておきます。

gulpをグローバルにインストール

-gオプションでグローバルになるのでインストール後はどこからでもgulpコマンドを呼べるようになります。

npm install -g gulp

プロジェクトにgulpをインストール

グローバルと両方必要なようです

npm install --save-dev gulp

ちなみにnpm i -D gulpでショートカットできます

package.json の作成

Getting Startだと記載されてないけど必要（のはず）

npm init

package.jsonの内容についてはGrunt入門を参考にしてもらえればと思います

これでひとまずgulpを使う環境ができました。

gulpfile.jsの作成

GruntでいうGruntfile.jsと同じでここにタスクを記述していきます。
ファイルを作成、編集していきます

vi gulpfile.js

//gulpのインポート
var gulp = require('gulp');

//この記述でタスクを登録していきます
gulp.task('default',function(){

});

タスクの登録

モジュール名は「gulp-なんとか」になるようなので「gulp connect」みたいに欲しいパッケージをググるとでてくるので

npm i -D gulp-connect

とパッケージを追加していけば大丈夫です。ここはGruntと同じですね。

jshint,uglify,connectのタスクを登録した例

//パッケージのインポート
var gulp    = require('gulp');
var connect = require('gulp-connect');
var jshint  = require('gulp-jshint');
var uglify  = require('gulp-uglify');

//connectの登録
gulp.task('server',connect.server({
    root:['dst'],
    port:8080,
    livereload:true,
    open:{
        browser:'Google Chrome'
    }
}));

//jshintとcompressのタスクをまとめて登録
gulp.task('hint&compress',function(){
    gulp.src('./src/**/*.js')
    .pipe(jshint())
    .pipe(uglify())
    .pipe(gulp.dest('dst'));
});

//タスクを全部まとめてdefaultで実行できるようにする
gulp.task('default',['hint','compress','server']);

jshintとcompressの処理が数珠つなぎで行うようになっています。

入力(gulp.src()) >>> 処理1(pipe()) >>> ... >>> 処理N(pipe()) >>> 出力(gulp.dest())

ファイルに対してタスクを振り分けることができるのでとてもわかりやすいと思います。

あとはgulpコマンドだけで実行できます

$ gulp
[gulp] Using file /Users/niko/workspace/gulp/gulp_test/gulpfile.js
[gulp] Working directory changed to /Users/niko/workspace/gulp/gulp_test
[gulp] Running 'hint&compress'...
[gulp] Finished 'hint&compress' in 6.21 ms
[gulp] Running 'server'...
[gulp] Connect LiveReload on 35729 port
[gulp] Finished 'server' in 520 ms
[gulp] Running 'default'...
[gulp] Finished 'default' in 24 μs
[gulp] Server started on 8080 port
[gulp] Opened http://localhost:8080/ in Google Chrome

以上になりますが、いかがだったでしょうか。
個人的にはnode.jsっぽく書ける上に記述量も減って好きです。

おまけ

gulpfile.jsをGUIで記述できるサイト

参考

なにか気づいた点などあればコメントの方に書いてもらえればと思います。