Gulp導入

インストール

• node, npmがインストールされていることが前提

sudo npm install gulp -g

package.jsonの作成

作業ディレクトリに移動して、package.jsonを作成する

npm init

gulpのインストール

作業ディレクトリにて下記を実行(--save-devをつけるとpackage.jsonに追加してくれます)

npm i gulp --save-dev

タスクを実行してみる

gupfile.jsというファイルが実行ファイルになるので、作業ディレクトリに作成します

gulpfile.js

var gulp = require('gulp');

gulp.task('hello', function() {
  console.log('hello gulp');
});

実行

gulp hello

結果

[18:47:14] Using gulpfile ~/practice/node_practice/gulp_01/gulpfile.js
[18:47:14] Starting 'hello'...
hello gulp
[18:47:14] Finished 'hello' after 89 μs

デフォルトタスクを設定する

以下をgulpfile.jsに追記します

gulpfile.js

gulp.task('default', ['hello']);

実行

gulp

結果

[18:47:57] Using gulpfile ~/practice/node_practice/gulp_01/gulpfile.js
[18:47:57] Starting 'hello'...
hello gulp
[18:47:57] Finished 'hello' after 80 μs
[18:47:57] Starting 'default'...
[18:47:57] Finished 'default' after 7.21 μs

gulp.src(), gulp.dest()

単純にファイルをコピーするタスクを作ってみます

gulpfile.js

gulp.task('copy', function() {
  // src/test.html を dist/ へコピーします
  gulp.src('./src/test.html')
    .pipe(gulp.dest('./dist'));
});

タスクの順番を指定する

copyタスクの後にmessageタスクを実行したい場合は以下のように指定します

gulpfile.js

var gulp = require('gulp');

gulp.task('copy', function() {
  return gulp.src('./src/test.html')
    .pipe(gulp.dest('./dist'));
});

// messageの前に実行したいcopyを第2引数に入れる
gulp.task('message', ['copy'], function() {
  console.log('copy done');
});

gulp.task('default', ['message']);