Upgrade to Pro — share decks privately, control downloads, hide ads and more …

gulp.js CheatSheet!

gulp.js CheatSheet!

「gulp.jsチートシート: 使いこなしの7パターン」
東京Node学園 13時限目にて。gulp.jsの基本と、ストリームなタスクを使いこなす7パターンを紹介します。
http://nodejs.connpass.com/event/6763/

Tsutomu Kawamura

June 23, 2014
Tweet

More Decks by Tsutomu Kawamura

Other Decks in Programming

Transcript

  1. HVMQͷ࣮ߦ $ gulp! $ gulp task_name! $ gulp task1 task2

    task3 … ϓϩδΣΫτͷσΟϨΫτϦͰʜ
  2. ग़ྗઌͭ ؂ࢹ uglify coffee gulp.dest gulp.src gulp = require 'gulp'

    coffee = require 'gulp-coffee' uglify = require 'gulp-uglify' gulp.task 'js', -> gulp = require 'gulp' coffee = require 'gulp-coffee' uglify = require 'gulp-uglify' gulp.task 'js', -> gulp.src './js/src/*.coffee' .pipe coffee() .pipe uglify() .pipe gulp.dest ‘./js/‘ gulp.task 'watch', -> gulp.watch './js/src/*.coffee', ['js'] 1
  3. ग़ྗઌ͕ෳ਺ gulp.dest autoprexier minify-css rename gulp.dest gulp.src gulp = require

    'gulp' autoprefixer = require 'gulp-autoprefixer' minifyCss = require 'gulp-minify-css' rename = require 'gulp-rename' gulp.task 'css', -> gulp.src './css/src/style.css' .pipe autoprefixer 'last 2 versions' .pipe gulp.dest ‘./css/‘ .pipe minifyCss() .pipe rename extname: '.min.css' .pipe gulp.dest ‘./css/‘ gulp = require 'gulp' autoprefixer = require 'gulp-autoprefixer' minifyCss = require 'gulp-minify-css' rename = require 'gulp-rename' 2
  4. ߋ৽ϑΝΠϧ͚ͩॲཧ changed uglify gulp.dest gulp.src gulp = require 'gulp' changed

    = require 'gulp-changed' uglify = require 'gulp-uglify' gulp.task 'script', -> gulp.src './src/*.js' .pipe changed './dist/' .pipe uglify() .pipe gulp.dest './dist/' gulp = require 'gulp' changed = require 'gulp-changed' uglify = require 'gulp-uglify' gulp.task 'script', -> 3
  5. ૿෼ϦϏϧυ cached uglify concat remember gulp.dest gulp.src gulp = require

    'gulp' cached = require 'gulp-cached' uglify = require 'gulp-uglify' remember = require 'gulp-remember' concat = require 'gulp-concat' gulp.task ‘script’, -> gulp = require 'gulp' cached = require 'gulp-cached' uglify = require 'gulp-uglify' remember = require 'gulp-remember' concat = require 'gulp-concat' gulp.task ‘script’, -> gulp.src './js/src/*.js' .pipe cached() .pipe uglify() .pipe remember() .pipe concat 'app.js' .pipe gulp.dest ‘./js/‘ 4
  6. ඇಉظλεΫ less gulp.dest gulp.src autoprexier gulp.dest gulp.src merge gulp =

    require 'gulp' merge = require 'merge-stream' less = require 'gulp-less' autoprefixer = require 'gulp-autoprefixer' gulp.task 'css', -> merge( gulp.src './css/src/first.less' .pipe less() .pipe gulp.dest './css/' gulp.src './css/src/second.css' .pipe autoprefixer 'last 2 versions' .pipe gulp.dest './css/' ) gulp = require 'gulp' merge = require 'merge-stream' less = require 'gulp-less' autoprefixer = require 'gulp-autoprefixer' gulp.task 'css', -> gulp.src './css/src/first.less' .pipe less() .pipe gulp.dest './css/' gulp.src './css/src/second.css' .pipe autoprefixer 'last 2 versions' .pipe gulp.dest './css/' gulp = require 'gulp' merge = require 'merge-stream' less = require 'gulp-less' autoprefixer = require 'gulp-autoprefixer' gulp.task 'css', -> gulp.src './css/src/first.less' .pipe less() .pipe gulp.dest './css/' gulp.src './css/src/second.css' .pipe autoprefixer 'last 2 versions' .pipe gulp.dest './css/' ࢀߟ/(ྫ 5
  7. γϦΞϧλεΫ less cssimport gulp.src autoprexier gulp.dest gulp.src concat minify-css streamqueue

    gulp = require 'gulp' streamqueue = require 'streamqueue' less = require 'gulp-less' cssimport = require 'gulp-cssimport' autoprefixer = require 'gulp-autoprefixer' concat = require 'gulp-concat' minifyCss = require 'gulp-minify-css' gulp.task 'css', -> gulp = require 'gulp' streamqueue = require 'streamqueue' less = require 'gulp-less' cssimport = require 'gulp-cssimport' autoprefixer = require 'gulp-autoprefixer' concat = require 'gulp-concat' minifyCss = require 'gulp-minify-css' gulp.task 'css', -> streamqueue objectMode: true, gulp.src './css/src/first.less' .pipe less() gulp.src './css/src/second.css' .pipe cssimport() .pipe autoprefixer 'last 2 versions' .pipe concat 'app.css' .pipe minifyCss() .pipe gulp.dest './css/' 6
  8. λεΫͷ഑ྻ rename consolidate gulp.dest gulp.src rename consolidate gulp.dest gulp.src rename

    consolidate gulp.dest gulp.src es.concat gulp.task 'page', -> es.concat.apply null, for name, options of data gulp.src './templates/a.html' .pipe consolidate 'lodash', title: options.title attrs: options.attrs .pipe rename basename: name extname: '.html' .pipe gulp.dest './html/' data = gulp = require 'gulp' es = require 'event-stream' consolidate = require 'gulp-consolidate' rename = require 'gulp-rename' ⇧ BQQMF PSBOHF ʜ data = apple: title: 'Apple Cake' attrs: some_data orange: title: 'Orange Cookie' attrs: some_data ... 7