Gulp入門 - コーディングを10倍速くする

1 Gulp入門～コーディングを10倍速くする

2 @frontainer Front-end Engineer 林　優一 2014/4 LIG入社フロントエンドエンジニア最近はAngularJSの勉強会に顔を出していました ng-mtg#6 - ディレクティブパターン第１回AngularJS勉強会@LIG 現在はWebサイトを作ったりテンプレート作ったりいろいろと活動しています。 http://github.com/frontainer GruntからGulpに乗り換えたタイプです

3 今はGrunt使ってますか？

4 今日はGulpにしましょう

Gulpとは Gruntとの違い使うことのメリット 5 目次 Let”s hands on カスタマイズ事例 01 02 03 04 05

6 01 Gulpとは The streaming build system • Node.jsのStreamAPIを利用したビルドシステム • Gruntが抱えているいくつかの問題を解決する手段として登場 • これからはこっちが主流になりそうな予感

7 02 Gruntとの違いプラグインの数やや少ない多い Github Star 8,398 8,439 開始日2013/6/30 2011/9/18 近い記法NodeっぽいJavaScriptっぽいプラグインタイプNodeプラグインGruntプラグイン

8 02 Gruntとの違い SASS Auto Prefixer CSS Min SCSS コンパイル CSS出力コンパイル CSS出力圧縮完成 SCSS Stream 完成コンパイルコンパイル圧縮

9 03 使うことのメリット I like gulp. • Gruntより設定ファイルが記述しやすい • StreamAPIを利用することでGruntより高速でエコ • Gruntと同等のプラグインがほぼ出そろってきている

10 04 Let”s hands on!! Gulp.jsを使ってコーディング作業を10倍速くしよう 1. Node.jsをインストール 2. Gulp.jsをインストール 3. gulpfile.jsの作成 4. SASSのコンパイル 5. ベンダープレフィックス付与 6. スタイルガイド生成 7. JSの圧縮 8. ファイルの監視と自動化 9. LiveReload環境構築 10.エラー時にwatchを止めない

11 Node.jsをインストール

12 Node.js http://nodejs.org

13 確認コマンドnode -v

14 Gulp.jsをインストール

15 package.jsonを作成npm init

16 Gulpインストールnpm install gulp -g

17 ローカルGulpインストールnpm install gulp --save-dev

18 gulpfile.jsの作成

19 gulpfile.js var gulp = require("gulp");

20 SASSのコンパイル

21 sass/style.scss h1 { color: red; &:hover { color: blue; } }

22 gulp-sass npm install gulp-sass --save-dev

23 gulpfile.js var gulp = require("gulp"); var sass = require("gulp-sass"); ! gulp.task("sass", function() { gulp.src("sass/**/*scss") .pipe(sass()) .pipe(gulp.dest("./css")); });

24 var gulp = require("gulp"); var sass = require("gulp-sass"); ! gulp.task("sass", function() { gulp.src("sass/**/*scss") .pipe(sass()) .pipe(gulp.dest("./css")); }); タスクの登録 gulp.task("タスク名",function() {}); 読み出したいファイルのパターンを指定 gulp.src("パターン") srcで取得したファイルに処理実行 .pipe(行いたい処理); 出力先に処理済みのファイルを出力 gulp.dest("出力先")

25 パターン文字列 "sass/style.scss" sass/style.scssだけヒット ! "sass/*.scss" sassディレクトリ直下にあるscssがヒット ! "sass/**/*.scss" sassディレクトリ以下にあるすべてのscssがヒット ! ["sass/**/*.scss","!sass/sample/**/*.scss] sass/sample以下にあるscssを除くsassディレクトリ以下のscssがヒット ※ gulp-renameを使うと出力ファイルの名前を簡単に変更することができます。

26 ベンダープレフィックス付与

27 gulp-autoprefixer npm install gulp-autoprefixer --save-dev

28 sass/style.scss h1 { color: red; transition: 200ms ease-out transform; &:hover { color: blue; transform: transition(10px,0); } }

29 gulpfile.js var gulp = require("gulp"); var sass = require(“gulp-sass"); var autoprefixer = require("gulp-autoprefixer"); ! gulp.task("sass", function() { gulp.src("sass/**/*scss") .pipe(sass()) .pipe(autoprefixer()) .pipe(gulp.dest("./css")); });

30 gulp-frontnote npm install gulp-frontnote --save-dev

31 gulpfile.js var gulp = require("gulp"); var sass = require(“gulp-sass"); var autoprefixer = require(“gulp-autoprefixer"); var frontnote = require("gulp-frontnote"); ! gulp.task("sass", function() { gulp.src("sass/**/*scss") .pipe(frontnote({ css: '../css/style.css' })) .pipe(sass()) .pipe(autoprefixer()) .pipe(gulp.dest("./css"); });

32 sass/style.scss /*#overview Gulp入門サンプル !サンプルファイルです */ /*#styleguide サンプル見出し１ !サンプルの見出しスタイル hoverすると青く2倍になる ``` <h1>見出し１</h1> ``` */

33 JSを圧縮

34 gulp-uglify npm install gulp-uglify --save-dev

35 gulpfile.js var gulp = require("gulp"); //..(略 var uglify = require("gulp-uglify"); ! gulp.task("js", function() { gulp.src(["js/**/*.js","!js/min/**/*.js"]) .pipe(uglify()) .pipe(gulp.dest("./js/min")); }); ! // (略

36 ファイルの監視

37 gulpfile.js var gulp = require("gulp"); //..(略 ! gulp.task("default", function() { gulp.watch([“js/**/*.js”,"!js/min/**/*.js"],["js"]); gulp.watch(“sass/**/*.scss”,["sass"]); });

38 LiveReload

39 gulp-browser-sync npm install browser-sync --save-dev

40 gulpfile.js var gulp = require("gulp"); //..(略 var browser = require("browser-sync"); ! gulp.task("server", function() { browser({ server: { baseDir: "./", directory: true } }); }); ! // (略

41 gulpfile.js var gulp = require("gulp"); //..(略 gulp.task("js", function() { gulp.src(["js/**/*.js","!js/min/**/*.js]) .pipe(uglify()) .pipe(gulp.dest("./js/min"); .pipe(browser.reload({stream:true})) }); ! gulp.task("sass", function() { gulp.src("sass/**/*scss") .pipe(frontnote()) .pipe(sass()) .pipe(autoprefixer()) .pipe(gulp.dest("./css") .pipe(browser.reload({stream:true})) }); // (略

42 gulpfile.js var gulp = require("gulp"); //..(略 gulp.task("default",['server'], function() { gulp.watch(["js/**/*.js","!js/min/**/*.js"],["js"]); gulp.watch("sass/**/*.scss",["sass"]); }); // (略

43 エラー時にwatchを止めない

44 gulp-plumber npm install gulp-plumber --save-dev

45 gulpfile.js var gulp = require("gulp"); //..(略 var plumber = require(“gulp-plumber"); ! gulp.task("js", function() { gulp.src(["js/**/*.js","!js/min/**/*.js]) .pipe(plumber()) .pipe(uglify()) // (略 ! gulp.task("sass", function() { gulp.src("sass/**/*scss") .pipe(plumber()) .pipe(frontnote()) // (略

HTML/JSのバリデーション（gulp-htmlhint, gulp-jshint）スプライト画像生成（gulp-spritesmith,gulp-sprite-glue） HTMLテンプレート（gulp-ejs,gulp-ect,gulp-jade） 46 その他の便利プラグイン FTP/SFTPアップロード（gulp-sftp,gulp-ftp）設定ファイル支援（gulp-load-tasks）

47 05 カスタマイズ事例 frontplate https://github.com/frontainer/frontplate 1. SASS 2. ベンダープレフィックス付与 3. LiveReload 4. スタイルガイド生成 5. EJS(HTMLテンプレート) 6. JSの依存関係解決 & 結合 & 圧縮 (Browserify) 7. 画像の最適化 8. スプライト画像の生成 9. スプライトSCSS出力 10.CSSの最適化 & 圧縮 11.エラーの通知 12.HTML/JSのバリデーション

いつもやる作業は自動化しよう GulpはGruntよりも短く設定を書くことができるオリジナルのgulpfile.jsを作り上げてさらに効率を高めよう！ 48 まとめ

49 ご清聴ありがとうございました

Gulp入門 - コーディングを10倍速くする

by Hayashi Yuichi , Front-end Engineer at Lig inc / Ueno, Tokyo

on Sep 12, 2014

Statistics

Views

Actions

0 Embeds 0

Accessibility

Categories

Upload Details

Usage Rights

Report content

Gulp入門 - コーディングを10倍速くする Presentation Transcript