WP-D Fes #03で使用したスライドです。

2. 井村 圭介
KEISUKE IMURA
ファンタラクティブ株式会社 CEO / デザイナー / エンジニア
フリーランスを経てWeb制作会社を設立。CMS案件やWebサービス開発に多数関わる。
Webに関することならデザイン・フロントエンド・バックエンドと幅広くこなすオール
ラウンダー。2015年はDjangoを使った自社サービスを開発中。

3. デザイン、フロントエンド、WordPressを中心としたCMS
構築などWeb制作全般を行なっています。
2週間に1度、ファンタラクティブ・オープンミーティン
グを開催中。
https://funteractive.co.jp/

4. 株式会社LiB チーフデザイナー
WordBench東京モデレータ
書籍の執筆、登壇などもしています

5. 極度にフロントエンドに偏った内容です。
過度な期待はしないでください。
WARNING!!

6. 入力 処理 出力
gulpの基本

7. 入力
gulp.src .pipe gulp.dest
処理
プラグイン
Node.js パッケージ
オリジナルタスク
出力
gulpの基本

8. gulpfile.jsの例
//
モジュールの読み込み
var
gulp
=
require('gulp');
var
csso
=
require('gulp-­‐csso');
//
$
gulp
cssminコマンドで実行するタスクの登録
gulp.task('cssmin',
function()
{
gulp.src('app.css')
//
入力ファイル
.pipe(csso())
//
処理をpipeで記述
.pipe(gulp.dest('app.min.css'));
//
出力ファイル
});

9. gulp-load-pluginsが便利
//
モジュールの読み込み
var
gulp
=
require('gulp');
var
gulpLoadPlugins
=
require('gulp-­‐load-­‐plugins')({
pattern:
['gulp-­‐*',
'gulp.*']
});
//
$
gulp
cssminコマンドで実行するタスクの登録
gulp.task('cssmin',
function()
{
gulp.src('app.css')
//
入力ファイル
.pipe(gulpLoadPlugins.csso())
//
処理をpipeで記述
.pipe(gulp.dest('app.min.css'));
//
出力ファイル
});

10. 入力 処理 出力
色々な処理をgulpを通して実行

11. • 実行手順の自動化
• 実行手順の一元化 / 単純化
gulpを通して実行するメリット

12. やりたいことがたくさん！

13. HTMLをパーツ化して読み込みたい
SCSS使いたい
脱compass
foundation大好き！
Bowerでライブラリ管理したい（若干滅びそうな雰囲気あるけど）
かっこ良くて見やすいスタイルガイド作りたい
レスポンシブ実機で確認しながら進めたい
JSモジュール化したい
スプライト画像の生成やサイズ縮小は勝手にやって欲しい
WordPressテーマにも使いたい

14. foundation-start-kit
https://github.com/funteractive/foundation-start-kit
できました！

15. require
npm install
bower install
@include
gulp-jade browserify gulp.spritesmith
BrowserSync
jade scss app.js
bower_components
└─ foundation
node_modules
sprite/*.png
触るファイル
出力されるファイル
html style.css styleguide build.js sprite.png
gulp-ruby-sass gulp-kss

16. • BowerでFoundation 5をインストール
• KSSでスタイルガイド作成
• BrowserifyでJSを結合
gulpで楽にしているポイント

17. Foundationの設定ファイルをコピー
bower_components
└─ foundation
└─ scss
├─ foundation.scss
└─ foundation
└─ _settings.scss
shared
└─ scss
└─ core
├─ _foundation.scss
└─ __settings.scss
コピーBower でインストール
コピー

18. Foundationの設定ファイルをコピー
//
Foundationのファイルをコピー
gulp.task('copy:foundation',
function()
{
return
gulp.src([
foundationScssPath
+
'foundation.scss',
foundationScssPath
+
'foundation/_settings.scss'
])
.pipe(gulpLoadPlugins.rename({
prefix:
'_'
}))
.pipe(gulp.dest(scssPath
+
'core/'));
});

19. 他のファイルはbower_componentsから直接読み込む
gulp.task('sass', function() {
return gulpLoadPlugins.rubySass(scssPath, {
loadPath: [bowerPath + 'foundation/scss'],
style: 'nested',
bundleExec: false,
require: 'sass-globbing',
sourcemap: false
})
.pipe(gulp.dest(cssPath));
});

20. gulp-kssでスタイルガイドをコマンド一発で作成
styleguide
├─ styleguide.md
├─ template
├─ public
├─ index.html
├─ section-1.html
└─ section-2.html
shared
└─ scss
└─ module
├─ _hoge.scss
└─ _fuga.scss
生成
生成
$ gulp styleguide

22. minimal-kss-node-template
https://github.com/funteractive/minimal-kss-node-template
シンプルなkss-nodeテンプレート配布してます。

23. css（scss）のコメントとしてスタイルガイドを記述
// Button
//
// Your standard button suitable for clicking.
//
// Markup: <a href="#" class="button {$modifiers}">CLICK</a>
//
// :hover - Highlights when hovering.
// .shiny - Do not press this big, shiny, red button.
//
// Style guide 1
.button {
...
}
.button.shiny {
...
}

24. //
KSSでスタイルガイドを生成するタスク
gulp.task('styleguide',
function()
{
//
CSSをスタイルガイド内にコピー
gulp.src(cssPath
+
'style.css')
.pipe(gulp.dest(styleGuidePath));
//
スタイルガイドを生成
gulp.src([scssPath
+
'*.scss',
scssPath
+
'**/*.scss'])
.pipe(gulpLoadPlugins.kss({
overview:
styleGuidePath
+
'styleguide.md',
templateDirectory:
styleGuidePath
+
'template/'
}))
.pipe(gulp.dest(styleGuidePath));
});
gulp-kssでスタイルガイドをコマンド一発で作成

25. BrowserifyでJSを結合
Bower でインストール
npm でインストール
オリジナルで制作
bower_components
└─ packages...
node_modules
└─ packages...
shared
└─ js
├─ package.js
├─ app.js
└─ build.js
生成
require

26. var
browserify
=
require('browserify');
var
buffer
=
require('vinyl-­‐buffer');
var
source
=
require('vinyl-­‐source-­‐stream');
gulp.task('js',
function()
{
browserify(jsPath
+
'src/app.js')
.bundle()
.pipe(source('build.js'))
.pipe(buffer())
.pipe(gulpLoadPlugins.uglify())
.pipe(gulp.dest(jsPath));
});
BrowserifyでJSを結合

27. var jQuery = require('jquery');
(function($) {
$(document).ready(function() {
$('#hello').text('hello');
});
})(jQuery);
app.jsの例

28. Jasmine & Karmaでテスト回したい
やりたいけどやれてないこと

29. gulpfileにタスクを追加するときの思考
1. 目的に合ったgulpプラグインがあるか探す
2. 目的に合ったnpmパッケージがあるか探す
3. 何もなければ自分で書く

30. gulp単体で価値はない

31. gulpfileは何をどの順番で動かすかの
仕様書みたいなもの

32. やりたいこと全部書こう！

33. Let’s try writing your own gulpfile.js!!