Edited at

gulp入門

More than 5 years have passed since last update.


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っぽく書ける上に記述量も減って好きです。


おまけ


参考

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