Gulp

SCSS や minify などを行うWebクライアント(js、cssなど) 用のビルドツール。
ファイルの監視機能によりminifyなどの自動化が行える。
Grunt と比較した場合「少ないコード量でタスクを定義できる」「ファイルを毎回書き出さない為 grunt より高速」等のメリットがある。


インストール

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


プラグイン名説明
gulp-uglifyJavaScriptのminify
gulp-jshintJavaScriptの構文チェック
jshint-stylishjshintの出力を整形
gulp-cssocssの軽量化
gulp-load-pluginsプラグインの読み込みを package.json から自動で行う
gulp-concat複数のファイルを1つに結合
gulp-minify-csscssのminify
gulp-csslintcssの構文チェック
gulp-watchファイルの監視
run-sequenceタスクの実行順序の制御
gulp-renameファイルのリネーム
gulp-notifyデスクトップ通知
gulp-plumberエラーによる強制停止の防止

gulpfile.js の作成

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

トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2015-11-17 (火) 20:29:22 (1125d)