今、話題のビルドツール gulp/gruntを徹底解剖!...
TRANSCRIPT
今、話題のビルドツール gulp/Gruntを徹底解剖!～ハンズオンで基礎から学ぶ、Web制作の味方 ビルドツール～
Tomoki Kubo株式会社まぼろし
マークアップエンジニア
ブログ: KOJIKA17
Lecture
Task Runner作業（タスク）を実行するためのアプリケーション
The JavaScript Task Runner
Node.js
インストールする前に注意
バージョン管理ツールを使いましょう
Mac- nodebrew
Windows- nodist
バージョン管理ツールを使いましょう
Mac- nodebrew
Windows- nodist
今日は時間がない
Mac: インストーラーの削除
# ターミナルでlsbom -f -l -s -pf /var/db/receipts/org.nodejs.pkg.bom \| while read i; do sudo rm /usr/local/${i}donesudo rm -rf /usr/local/lib/node \ /usr/local/lib/node_modules \ /var/db/receipts/org.nodejs.*sudo rm -rf ~/.npm
バージョン管理ツールを 使いましょう
どんなことができるのか？
• ファイルを保存すると勝手にブラウザを更新
• 言語の構文チェック
• ファイルの結合
• 特定のフォルダ、ファイルの複製、削除
• メタ言語のコンパイル
• HTML, JS, CSSなどをminify
• CSS Spriteの自動生成
Grunt gulp
PowerShell / ターミナルの使い方
# 現在位置の確認pwd
# ディレクトリのファイルの一覧表示ls
# カレントディレクトリの変更cd [パス | フォルダをドロップ]
PowerShell / ターミナルの使い方
# フォルダの作成mkdir [フォルダ名]
# ファイルの作成echo > [ファイル名] | touch [ファイル名]
Install
npmNode Package Manager
インストールする場所
• グローバル
• プロジェクト単位
パッケージのインストール
# グローバルnpm install -g [パッケージ名]
# プロジェクト単位npm install [パッケージ名]
gulpをグローバルにインストールする
# グローバルnpm install gulp -g
# Macでインストーラーで入れた人sudo npm install gulp -g
package.jsonパッケージを管理するファイル
package.jsonの生成
npm init
プロジェクトにgulpをインストール
npm install gulp —save-dev
npm uninstall gulp --save-dev
npmコマンドの省略
install = iuninstall = un--save-dev = -D
# 例npm un gulp —Dnpm i -D gulp-stylus browser-sync
インストールできてたものが、 エラーになる場合npm cache clean
ひな形をダウンロード
goo.gl/MZ7roy
パッケージをインストール
npm i
package.jsonがあれば、 パッケージの共有がしやすい
gulpfile.js
パッケージの読み込み
タスク
タスク
1. タスク名
2. ファイル指定
3. pipe()
タスク - タスク名
gulp.task('タスク名', function() {
});
タスク - ファイル指定
gulp.task('タスク名', function() { gulp.src(‘タスクを行うファイル').pipe(gulp.dest(‘タスク後の出力先’));
});
タスク - ファイル指定
gulp.task('タスク名', function() { gulp.src(‘./asset/index.html’).pipe(gulp.dest(‘./public/’));
});
gulp.task('タスク名', function() { gulp.src(‘./asset/about.html’).pipe(gulp.dest(‘./public/’));
});
gulp.task('タスク名', function() { gulp.src(‘./asset/demo/index.html’).pipe(gulp.dest(‘./public/’));
});
タスク - ファイル指定
gulp.task('タスク名', function() { gulp.src(‘./asset/**/*.html’).pipe(gulp.dest(‘./public/’));
});
タスク - pipe()
gulp.task('タスク名', function() { gulp.src(‘処理を行うファイル’) .pipe(‘処理’) .pipe(‘処理’) .pipe(‘処理’).pipe(gulp.dest(‘処理後の出力先’));
});
タスクの監視
タスクの監視
gulp.task('watch', function() {
});
タスクの監視
gulp.task('watch', function() { gulp.watch( '監視対象のファイル', ‘タスク名’ );});
タスクの監視
gulp.task('watch', function() { gulp.watch( ‘./asset/**/*.html’, ‘build:html’ );});
タスクの監視
gulp.task('watch', function() { gulp.watch( [‘assets/stylus/*.styl’, ‘assets/sprite/*.png’] [‘build:sprite’, ’build:css’] );});
タスクをまとめて実行
タスクの複数実行
gulp.task('default', [‘build:html', 'build:css', 'bs', 'watch']);
gulp.task('build', [‘build:css’, ‘build:js’]);
タスクの実行
ターミナルからタスクの実行
gulp タスク名gulp build:html
# デフォルトの場合gulp
リリースタスクを増やそう
CSSをMinifyする
[gulp stylus]
HTMLをMinifyする
リリース タスク
gulp.task('release', [‘HTMLのリリースタスク名’, ’CSSのリリースタスク’]);
gulpのプラグインは どんなものを使えばいいか？
gulp おすすめ プラグイン
記事の日付を確認しよう
npm scripts
今日学んだこと
今日学んだこと
• ターミナル？
• gulpの書き方？
• プラグインがあること？
自動化のツールの使い方を学んだ
• 作業を効率化する道具
• 品質の担保
• 繰り返し作業を機械と分業化できる
手段が目的にならないように 気をつけましょう
ありがとうございました