Gulp のバックアップの現在との差分(No.0) - 闘うITエンジニアの覚え書き

バックアップ一覧
差分を表示
ソースを表示
バックアップを表示
Gulp へ行く。
追加された行はこの色です。
削除された行はこの色です。
* Gulp [#qc5396ff]
#setlinebreak(on);

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

#contents
-- 関連
--- [[Grunt]]

&br;

** インストール [#oaec1616]
#html(<div style="padding-left:20px;">)

*** Node.js インストール [#oaec1616]
https://nodejs.org/ から node.js をインストール

*** gulp をグローバルインストール [#j73bb05f]
#myterm(){{
sudo npm install gulp -g
}}

*** プロジェクト用ディレクトリを作成し移動 [#j31149be]
#myterm(){{
mkdir example_gulp
cd example_gulp
}}

*** package.json の作成 [#k3fb1b03]
#myterm(){{
npm init
}}
※聞かれる質問は全部 [Enter] 押下でも良い。

*** プロジェクトフォルダに gulp をインストール [#d8a11461]
#myterm(){{
npm install gulp --save-dev
}}
※インストールが成功すると配下に node_modules フォルダが出来る。

*** 必要なプラグインのインストール [#h82960a0]
必要なプラグインを個別にインストールする
#myterm(){{
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
}}
&br;
|プラグイン名|説明|h
|gulp-uglify|JavaScriptのminify|
|gulp-jshint|JavaScriptの構文チェック|
|jshint-stylish|jshintの出力を整形|
|gulp-csso|cssの軽量化|
|gulp-load-plugins|プラグインの読み込みを package.json から自動で行う|
|gulp-concat|複数のファイルを1つに結合|
|gulp-minify-css|cssのminify|
|gulp-csslint|cssの構文チェック|
|gulp-watch|ファイルの監視|
|run-sequence|タスクの実行順序の制御|
|gulp-rename|ファイルのリネーム|
|gulp-notify|デスクトップ通知|
|gulp-plumber|エラーによる強制停止の防止|

#html(</div>)

** gulpfile.js の作成 [#r75eea9b]
#html(<div style="padding-left:20px;">)

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

*** 例) css、js の監視 及び minify [#p22389ed]
#mycode(){{
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']);
}}

*** 実行順序の制御 [#gd78f473]
#mycode(){{
var runSequence = require('run-sequence');

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

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

#html(</div>)

** 実行方法 [#r75eea9b]
#html(<div style="padding-left:20px;">)

*** デフォルトタスクの実行 [#q7f3d5be]
#myterm(){{
gulp
}}

*** タスク名を指定して実行 [#q98bf48e]
#myterm(){{
gulp watch
}}

#html(</div>)