Movatterモバイル変換

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

Tomoki Kubo株式会社まぼろし マークアップエンジニア ブログ: KOJIKA17

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

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

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

バージョン管理ツールを使いましょうMac - nodebrewWindows - nodist今日は時間がない

Mac: インストーラーの削除# ターミナルでlsbom -f -l -s -pf /var/db/receipts/org.nodejs.pkg.bom | while read i; dosudo 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の自動生成

PowerShell / ターミナルの使い方# 現在位置の確認pwd# ディレクトリのファイルの一覧表示ls# カレントディレクトリの変更cd [パス | フォルダをドロップ]

PowerShell / ターミナルの使い方# フォルダの作成mkdir [フォルダ名]# ファイルの作成echo > [ファイル名] | touch [ファイル名]

インストールする場所• グローバル• プロジェクト単位

パッケージのインストール# グローバルnpm install -g [パッケージ名]# プロジェクト単位npm install [パッケージ名]

gulpをグローバルにインストールする# グローバルnpm install gulp -g# Macでインストーラーで入れた人sudo npm install gulp -g

package.jsonパッケージを管理するファイル

プロジェクトにgulpをインストールnpm install gulp —save-devnpm uninstall gulp --save-dev

npmコマンドの省略install = iuninstall = un--save-dev = -D# 例npm un gulp —Dnpm i -D gulp-stylus browser-sync

インストールできてたものが、エラーになる場合npm cache clean

ひな形をダウンロード

パッケージをインストールnpm i

package.jsonがあれば、パッケージの共有がしやすい

パッケージの読み込み

タスク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

リリースタスクを増やそう

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

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

gulp おすすめプラグイン

記事の日付を確認しよう

今日学んだこと• ターミナル？• gulpの書き方？• プラグインがあること？

自動化のツールの使い方を学んだ• 作業を効率化する道具• 品質の担保• 繰り返し作業を機械と分業化できる

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

ありがとうございました

Movatterモバイル変換

Change Language

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

Embed presentation

Recommended

More Related Content

What's hot

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

More from 知己久保

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

Movatterモバイル変換

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

Recommended

More Related Content

What's hot

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

More from 知己 久保

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

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

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

More from 知己久保

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