井村 圭介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!!