井村 圭介KEISUKE IMURA
ファンタラクティブ株式会社 CEO / デザイナー / エンジニア
フリーランスを経てWeb制作会社を設立。CMS案件やWebサービス開発に多数関わる。Webに関することならデザイン・フロントエンド・バックエンドと幅広くこなすオールラウンダー。2015年はDjangoを使った自社サービスを開発中。
デザイン、フロントエンド、WordPressを中心としたCMS構築などWeb制作全般を行なっています。2週間に1度、ファンタラクティブ・オープンミーティングを開催中。
https://funteractive.co.jp/
株式会社LiB チーフデザイナー
WordBench東京モデレータ
書籍の執筆、登壇などもしています
極度にフロントエンドに偏った内容です。
過度な期待はしないでください。
WARNING!!
入力 処理 出力
gulpの基本
入力
gulp.src .pipe gulp.dest
処理
プラグインNode.js パッケージオリジナルタスク
出力
gulpの基本
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')); // 出力ファイル
});
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')); // 出力ファイル
});
入力 処理 出力
色々な処理をgulpを通して実行
• 実行手順の自動化
• 実行手順の一元化 / 単純化
gulpを通して実行するメリット
やりたいことがたくさん!
HTMLをパーツ化して読み込みたい
SCSS使いたい
脱compass
foundation大好き!
Bowerでライブラリ管理したい(若干滅びそうな雰囲気あるけど)
かっこ良くて見やすいスタイルガイド作りたい
レスポンシブ実機で確認しながら進めたい
JSモジュール化したい
スプライト画像の生成やサイズ縮小は勝手にやって欲しい
WordPressテーマにも使いたい
foundation-start-kit
https://github.com/funteractive/foundation-start-kit
できました!
require
npm installbower 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
• BowerでFoundation 5をインストール
• KSSでスタイルガイド作成
• BrowserifyでJSを結合
gulpで楽にしているポイント
Foundationの設定ファイルをコピー
bower_components
└─ foundation
└─ scss
├─ foundation.scss
└─ foundation
└─ _settings.scss
shared
└─ scss
└─ core
├─ _foundation.scss
└─ __settings.scss
コピーBowerでインストール
コピー
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/'));});
他のファイルは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)); });
gulp-kssでスタイルガイドをコマンド一発で作成
styleguide
├─ styleguide.md
├─ template
├─ public
├─ index.html
├─ section-1.html
└─ section-2.html
shared
└─ scss
└─ module
├─ _hoge.scss
└─ _fuga.scss
生成
生成
$ gulp styleguide
minimal-kss-node-template
https://github.com/funteractive/minimal-kss-node-template
シンプルなkss-nodeテンプレート配布してます。
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 {
...
}
// 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でスタイルガイドをコマンド一発で作成
BrowserifyでJSを結合
Bower でインストール
npmでインストール
オリジナルで制作
bower_components
└─ packages...
node_modules
└─ packages...
shared
└─ js
├─ package.js
├─ app.js
└─ build.js 生成
require
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を結合
var jQuery = require('jquery'); (function($) { $(document).ready(function() { $('#hello').text('hello'); }); })(jQuery);
app.jsの例
Jasmine & Karmaでテスト回したい
やりたいけどやれてないこと
gulpfileにタスクを追加するときの思考
1. 目的に合ったgulpプラグインがあるか探す
2. 目的に合ったnpmパッケージがあるか探す
3. 何もなければ自分で書く
gulp単体で価値はない
gulpfileは何をどの順番で動かすかの
仕様書みたいなもの
やりたいこと全部書こう!
Let’s try writing your own gulpfile.js!!