dayjournal memo

Total 967 articles!!

gulp #001 – gulpでタスク実行

Yasunori Kirimoto's avatar

今回は、先日参加した勉強会きっかけで「gulp」を試してみたいと思います。ずっと試してみたかったので勉強になりそうです。


node.js_016_02

gulpとは、Node.jsで利用できる「タスクランナー」です。gulpを利用することで様々な作業を自動化することが可能になります。同じようなタスクランナーとしてGruntとよく比較されていますが、gulpは正式には「タスクランナー」ではなく「ストリーミングビルドシステム」のようです。

何をどこまでできるのか、今日はまずgulpでタスクを動かすところから試していきます。


まずnpmでgulpをグローバルインストールします。


npm install -g gulp

node.js_016_01


次に作業フォルダに「package.json」を作成します。 ※今回は{}のみ記載します。

package.json


{
}

作業フォルダでnpmでgulpをローカルインストールします。


npm install --save-dev gulp

node.js_016_06


インストール時の引数に「—save-dev」を記述することによって「package.json」にバージョン情報が追加されます。

package.json


{
  "devDependencies": {
    "gulp": "^3.9.1"
  }
}

gulpがインストールされているか確認します。


gulp -v

node.js_016_04

インストールが完了したら処理を記述する「gulpfile.js」を作成します。 ※今回は簡単なコメント表示を記述します。

gulpfile.js


var gulp = require('gulp');

gulp.task('sample', function() {
    console.log('サンプル!');
});

gulp.task('default', ['sample'])

作業フォルダでgulpを実行すると下記のようにコメントがコマンドプロンプトに表示されます。


gulp

[![node.js_016_05](../img/migration/2016/02/node.js_016_05-1024x527.jpg)](../img/migration/2016/02/node.js_016_05.jpg)

タスクの内容を記述:


gulp.task('sample', function() {
    console.log('サンプル!');
})

デフォルトのタスクを指定:


gulp.task('default', ['sample'])

とりあえずタスクを動かすところまでできました。



book

Q&A