今、話題のビルドツール gulp/gruntを徹底解剖!...

今、話題のビルドツール gulp/Gruntを徹底解剖!～ハンズオンで基礎から学ぶ、Web制作の味方 ビルドツール～

Tomoki Kubo株式会社まぼろし

マークアップエンジニア

ブログ: KOJIKA17

Lecture

Task Runner作業（タスク）を実行するためのアプリケーション

The JavaScript Task Runner

Node.js

nodejs.org

インストールする前に注意

バージョン管理ツールを使いましょう

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する

npmjs.com

[gulp stylus]

HTMLをMinifyする

リリース タスク

gulp.task('release', [‘HTMLのリリースタスク名’, ’CSSのリリースタスク’]);

gulpのプラグインは どんなものを使えばいいか？

gulp おすすめ プラグイン

記事の日付を確認しよう

npm scripts

今日学んだこと

今日学んだこと

• ターミナル？

• gulpの書き方？

• プラグインがあること？

自動化のツールの使い方を学んだ

• 作業を効率化する道具

• 品質の担保

• 繰り返し作業を機械と分業化できる

手段が目的にならないように 気をつけましょう

ありがとうございました