gulp入門
アジェンダ
- なぜなにgulp
- 実際に使ってみる
- おまけ
- 参考
なぜなにgulp
gulpとは
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っぽく書ける上に記述量も減って好きです。
おまけ
参考
なにか気づいた点などあればコメントの方に書いてもらえればと思います。