gulp.js

gulp.js - the streaming build system

Gruntみたいなやつだけど、Grunt がJSONで挙動を宣言的に書いていくのに対して、こっちは普通に JavaScript で手続き的に記述できる。

npmで直なら

$ npm install gulp

package.json を使いたいなら

package.json

{
  "name": "hoge",
  "version": "1.0.0",
  "description": "",
  "dependencies": {
    "gulp": "3.9.1"
  }
}

で

$ npm install gulp

インストールされた gulp を使うなら・・・こいつはPJ単位で入れているので

$ node_modules/.bin/gulp --version

こうなる。

いろいろなプラグインあるけど、コマンド打てれば大体解決するんで・・・

$ npm install gulp-run

gulpfile.js という名前でファイルを作る

'use strict';
var gulp = require('gulp');
var run = require('gulp-run');
 
gulp.task('hoge', function(){
    run("echo hogehoge").exec().pipe(gulp.dest('output'));
});

コマンドの引数にタスク名を渡すと gulpfile.js 中のタスクを読んで実行してくれる。

$ gulp hoge
[11:56:16] Using gulpfile ~/gulpfile.js
[11:56:16] Starting 'hoge'...
[11:56:16] Finished 'hoge' after 13 ms
[11:56:16] $ echo hogehoge
hogehoge

$ npm install gulp-less
$ npm install gulp-changed

var gulp = require('gulp');
var less = require('gulp-less');
var changed = require('gulp-changed');
 
gulp.task('default', function(){
    return gulp.src('less/*.less')    //対象を指定
        .pipe(changed('css/', {extension: '.css'}))  //更新比較対象を決定して更新があったファイルのみコンパイルするようにする
        .pipe(less())                 //対象をコンパイル
        .pipe(gulp.dest('css/'));     //cssファイルに吐く
});
gulp.task('watch', function(){
    return gulp.watch('less/*.less', ['default']);
});

$ gulp watch