gulp導入メモ

node.jsをインストールする

環境に合ったものを。

gulpでタスクを走らせるディレクトリに移動

$ mkdir /path/to/target/dir
$ cd /path/to/target/dir

なければ作る。

npmの初期設定をする

$ npm init

ウィザード形式でいろいろ聞かれるので答える。
それを反映したpackage.jsonがカレントディレクトリ以下に作成される。

package.json

{
    "name": "hoge",
    "version": "1.0.0",
    "description": "piyo",
    "main": "index.js",
    "directories": {
        "doc": "docs"
    },
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "fuga",
    "license": "MIT"
}

gulpをインストールする

グローバルインストール

$ npm install gulp --global

node.js配下のディレクトリにパッケージが展開される。
同時にパスが通り、gulpをコマンドで呼び出せるようになる。

開発環境（ローカル）にインストール

$ npm install gulp --save-dev

globalオプションがないnpm installは、パッケージが
カレントディレクトリ下のnode_modulesディレクトリに展開される。
save-devオプションをつけることで、インストールしたパッケージを
devDependenciesとして自動的にpackage.jsonに反映させる。

package.json

{
    ...,
    "devDependencies": {
        "gulp": "^3.9.0"
    },
    ...
}

gulpを設定する

gulpfile.jsの作成

package.jsonと同じディレクトリにgulpfile.jsを作成する。

gulpfile.js

var gulp = require('gulp');

処理を追加する

例として、sassのコンパイルを行うパッケージgulp-sassの導入手順を記載する。

パッケージのインストール

$ npm install gulp-sass --save-dev

ローカルのnode_modulesディレクトリにgulp-sassパッケージを展開。
package.jsonは以下のように自動的に修正される。

package.json

{
    ...,
    "devDependencies": {
        "gulp": "^3.9.0",
        "gulp-sass": "^2.1.0"
    },
    ...
}

タスクの追加

パッケージの機能を利用するためには、
gulpfile.js内でパッケージをタスクとして追加する必要がある。
以下は、gulp-sassパッケージを"sass"という名前のタスクとして追加した例。

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function(){
    gulp.src('sass/**/*scss')
        .pipe(sass())
        .pipe(gulp.dest("./css")
});

タスクの書式はパッケージによって様々なので、よく調べること。

MiniMatchパターン

gulp.src()で指定するパスの書き方。
gulpfile.jsのあるディレクトリからの相対パスを指定する。

• *はパスセパレータを含まない任意の文字列
• **はパスセパレータを含む任意の文字列

他にもいろいろある。

タスクを実行する

$ gulp sass

gulpコマンドのあとにタスク名を入力して実行することで、
タスク単体を任意に実行することができる。
またタスク名を省略した場合は、"default"という名前で追加されたタスクの内容を実行する。

おまけ：既存のパッケージ設定を他のディレクトリに反映する

package.jsonを別のディレクトリにコピーしてnpm installすると、
元のディレクトリで使われたnpmパッケージがそのまま展開される。
妙なことをしていなければgulpfile.jsもコピーしてくればそのまま動く。