なんとなくの部分を文書化して知識整理

前提

下記の2つが入っていること

Node
npm

gulpに関して

gulpはビルドシステムランナー(タスクランナーとやってることは同じイメージ)。

gulpはファイルを「ストリーム」として扱いながら処理を実行することができ、
タスクの対象となるファイルに対して、.pipe()で次の処理に結果を渡す。
※jqueryのようなイメージ

また、pipe()で処理を繋ぐ際に、処理の間でI/Oが起きず時間のロストがない。

全体的に各タスクが何をしているのかも把握しやすいのもメリット。

基本的なgulpインストール

公式を参照
https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md

// グローバルにインストール
$ npm install --global gulp-cli

// 別にこれでもいい
$ npm i -g gulp-cli

// バージョン確認
$ gulp -v

個人的には-gでグローバルにインストールせずにパスを通す。
以下手順
http://qiita.com/y_sekitoba/items/78d3ac5e928de438e582

実際にgulp設定する

対象ディレクトリへ移動
対象ディレクトリで下記コマンドを実行し「package.json」を作成

// -yオプションをどっちでもいい
$ npm init -y

// これでもいい
$ npm i -y

「devDependencies」に「gulp」パッケージを記述するために下記コマンドを実行

$ npm install --save-dev gulp

// これでもいい
$ npm i -D gulp

※開発に使用するパッケージなので「--save-dev」オプションで「devDependencies」に記述

対象ディレクトリに「gulpfile.js」を作成※「package.json」と同じ階層
「gulpfile.js」に対して必要な設定を記述
対象ディレクトリで下記コマンドを実行することで「gulp」を起動できる

$ gulp

gulpfile.jsの記述に関して

gulpfile.js


// まずはじめに読み込ませたいプラグインを記述
var gulp = require('gulp');
var 変数名 = require('プラグイン名');
var 変数名 = require('プラグイン名');

// 下のgulpは変数
gulp.task('タスク名_1', function(){
	gulp.src('対象となるファイルまでのパス')
	// .pipeを利用して利用したいプラグインをつないでいくイメージ
	.pipe(対象プラグインの変数名※プラグインによっては設定が必要)
	.pipe(対象プラグインの変数名※プラグインによっては設定が必要)

	// コンパイルだどによりファイルが出力される場合は出力先を記述
	.pipe(gulp.dest('出力先のパス'));
});

// taskは複数記述することが可能
gulp.task('タスク名_2', function(){
	gulp.src('対象となるファイルまでのパス')
	// .pipeを利用して利用したいプラグインをつないでいくイメージ
	.pipe(対象プラグインの変数名※プラグインによっては設定が必要)
	.pipe(対象プラグインの変数名※プラグインによっては設定が必要)

	// コンパイルだどによりファイルが出力される場合は出力先を記述
	.pipe(gulp.dest('出力先のパス'));
});


// defaultタスクの設定※ターミナルでgulpと叩くことで実行されるタスク
gulp.task('default', function(){
	// watchタスク(変更の監視)の設定
	gulp.watch("監視対象ファイルのパス", ["実行させたいタスク名"]);
	gulp.watch("監視対象ファイルのパス", ["実行させたいタスク名"]);
});

gulp.src()のパスの設定方法

パスの指定に関して「MiniMatchパターン」で第1引数に指定する。
※MiniMatchパターン : node.jsで使用されている「path match」用のライブラリ

参考にさせていただいたサイト
http://motemen.hatenablog.com/entry/2014/07/15/minimatch-cheat-sheet

パス設定サンプル

// 指定したディレクトリの中にあるファイルを指定
gulp.src('src/sass/*.scss')

// 指定したディレクトリの中にあるファイルを指定(指定ディレクトリの中にあるディレクトリも含む)
gulp.src('sass/**/*.scss')

// パスを複数指定も可能※!で除外もできる
gulp.src(['sass/**/.scss','!sass/test/**/*.scss'])

gulpのタスクの依存関係

gulpfile.jsのタスクは非同期で実行される。
なので、Aタスクの実行後にBタスクを実行したい場合などは、
タスクの依存関係(タスクの記述順など)に注意する。

複雑な依存に関しての対応策

実行順序を制御するプラグイン「run-sequence」を導入。

// sample_1
gulp.task('testTask', function() {
  runSequence(
    'task_1',
    'task_2'
  );
});

// sample_2
gulp.task('testTask', function() {
	runSequence(
	  'task_1',
	  
	  // 特定のタスクを並列に実行したい時は下記のように記述(時間の効率化)
	  ['task_2a', 'task_2b'],
	  'task_3'
	);
});

さらに設定を細かくしたい場合は、下記のページを参考にさせていただいた。
http://qiita.com/naokitomita/items/d18135b69d917b0d08e4

gulpのv4.0

gulpのv4.0からは「run-sequence」プラグインを導入しなくても、
gulpのAPIで実行順序の制御が可能になるらしい。

※現状の最新はv3.9.1 / 2016年12月現在

便利なプラグインたち

※後々調整しながら追記予定

browser-sync : ブラウザ系
gulp-plumber : エラー処理に関して
gulp-sass : scssのコンパイル
gulp-autoprefixer : コンパイルのタイミングでプレフィックスを付与
gulp.spritesmith : スプライト画像作成
gulp-ftp : ftpのアップロードをコマンドで実施
gulp-sftp : sftpの
gulp-load-tasks : タスクの読み込み支援
gulp-uglify : ファイルの圧縮※公開用とか
gulp-if : 条件分岐させる
gulp-copy : コピーができる
gulp-csslint : cssのlint
gulp-eslint : jsのlint
gulp-html5-int : htmlのlint
gulp-cached : 変更があったファイルのみ処理を実行
gulp-remember : キャッシュしたストリームを取り出す
gulp-using : タスクが処理しているファイル名を表示