Gulp - 闘うITエンジニアの覚え書き

Node.js インストール †

https://nodejs.org/ から node.js をインストール

gulp をグローバルインストール †

sudo npm install gulp -g

プロジェクト用ディレクトリを作成し移動 †

mkdir example_gulp
cd example_gulp

package.json の作成 †

npm init

※聞かれる質問は全部 [Enter] 押下でも良い。

プロジェクトフォルダに gulp をインストール †

npm install gulp --save-dev

※インストールが成功すると配下に node_modules フォルダが出来る。

必要なプラグインのインストール †

必要なプラグインを個別にインストールする

npm install gulp-uglify --save-dev
npm install gulp-jshint --save-dev
npm install gulp-minify-css --save-dev
npm install gulp-csslint --save-dev
npm install gulp-concat --save-dev

Grunt の設定ファイルがJSON形式で記述されるのに対して、gulpfile.js は スクリプトを記述する。

例) css、js の監視 及び minify †

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var minify = require('gulp-minify-css');

// cssのminify を行うタスク
gulp.task('minify-css', function() {
  gulp.src(["css/*.css", "!css/*.min.css"])  // 配列で複数のディレクトリ等を指定可、頭に!を付けて除外するファイルを指定可
  .pipe(concat('css/css-all.min.css'))
  .pipe(minify())
  .pipe(gulp.dest("./"));
});

// jsのuglify を行うタスク
gulp.task('uglify', function() {
  gulp.src(["js/*.js", "js2/*.js", "!js/*.min.js"])
  .pipe(concat('js/js-all.min.js'))
  .pipe(uglify())
  .pipe(gulp.dest("./"));
});

// ファイル監視のタスク
gulp.task('watch', function(){
    gulp.watch('./css/*.css', ['minify-css']);
    gulp.watch('./js/*.js', ['uglify']);
    gulp.watch('./js2/*.js', ['uglify']);
});

// デフォルトタスクの指定
//gulp.task('default', ['minify-css','uglify']);
gulp.task('default', ['watch']);

実行順序の制御 †

var runSequence = require('run-sequence');

gulp.task('sequence_task', function() {
  runSequence('task1', ['task2A', 'task2B'], 'task3');
});

上記の例だと、実行順序は以下の通りとなる。
task1
↓
task2A、task2B　（配列で指定した部分は並列実行される）
↓
task3

デフォルトタスクの実行 †

gulp

タスク名を指定して実行 †

gulp watch