Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

High Performance Gulp

11,991 views

Published on

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

  • Dating for everyone is here: ❶❶❶ http://bit.ly/2u6xbL5 ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ❤❤❤ http://bit.ly/2u6xbL5 ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ACCESS that WEBSITE Over for All Ebooks (Unlimited) ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... DOWNLOAD FULL EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m77EgH }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes ,Download or read Ebooks here ... ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m6jJ5M }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ...................................ALL FOR EBOOKS................................................. Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

High Performance Gulp

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

×