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

Front-end Build Tools - JTF2014 Tokyo

Front-end Build Tools - JTF2014 Tokyo

インフラエンジニアの祭典「July Tech Festa 2014」でフロントエンドの自動化の話をしてきました。(まだ6月だけど)

Tsutomu Kawamura

June 22, 2014

More Decks by Tsutomu Kawamura

Other Decks in Programming


  1. gulp.task 'sass', -> gulp.src 'app/styles/**/*.scss' .pipe sass() .pipe autoprefixer 'last

    1 version' .pipe gulp.dest ‘dist/styles' ! gulp.task 'default', ['sass'] -> gulp.watch 'app/styles/**/*.scss', ['sass'] grunt.initConfig sass: dist: files: [ cwd: 'app/styles' src: '**/*.scss' dest: '../.tmp/styles' expand: true ext: '.css' ] autoprefixer: options: ['last 1 version'] dist: files: [ expand: true cwd: '.tmp/styles' src: '{,*/}*.css' dest: 'dist/styles ] watch: styles: files: ['app/styles/{,*/}*.scss'] tasks: ['sass:dist', ‘autoprefixer:dist'] ! grunt.registerTask 'default', ['styles', 'watch']
  2. HVMQͷ࣮ߦ $ gulp! $ gulp task_name! $ gulp task1 task2

    task3 … ϓϩδΣΫτͷσΟϨΫτϦͰʜ
  3. uglify coffee gulp.dest gulp.src 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'] Single Dest & Watch ग़ྗઌͭ ؂ࢹ
  4. ग़ྗઌ͕ෳ਺ 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/‘ Multi Dest
  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.src './js/src/*.js' .pipe cached() .pipe uglify() .pipe remember() .pipe concat 'app.js' .pipe gulp.dest ‘./js/‘ Incremental Rebuilding 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/' Only Changed
  6. data = apple: title: 'Apple Cake' attrs: some_data orange: title:

    'Orange Cookie' attrs: some_data 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/' rename consolidate gulp.dest gulp.src rename consolidate gulp.dest gulp.src rename consolidate gulp.dest gulp.src es.concat Stream Array gulp = require 'gulp' es = require 'event-stream' consolidate = require 'gulp-consolidate' rename = require 'gulp-rename' Serial Join 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', -> 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/' Async Streams 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/' ) less gulp.dest gulp.src autoprexier gulp.dest gulp.src merge