Successfully reported this slideshow.

Automating your workflow with Gulp.js

9,196 views

Published on

Automating your workflow with gulp

Published in: Technology

Automating your workflow with Gulp.js

  1. 1. Automating Your Work flowAutomating Your Work flow with gulp.jswith gulp.js Bo-Yi Wu 2014@COSCUP
  2. 2. 2 Software Engineer @ Realtek https://github.com/appleboy http://blog.wu-boy.com https://www.facebook.com/appleboy46
  3. 3. 3 Work FlowWork Flow https://www.flickr.com/photos/shanecasey51/14627365291
  4. 4. 4 Work FlowWork Flow for web developerfor web developer
  5. 5. 5 Work Flow Setup Download Server Setup PHP Ruby
  6. 6. 6 Setup Download Server Setup PHP Ruby Develop Watch Live Reload Lint Coffee Sass/Less Work Flow
  7. 7. 7 Setup Download Server Setup PHP Ruby Develop Watch Live Reload Lint Coffee Sass/Less Build Testing Compile Concat Rename Minify Image-min Deployment Work Flow
  8. 8. 8 Automation http://www.exacttarget.com/blog/marketing-automation-infographic/
  9. 9. 9 TasksTasks Html / Jade JavaScript / CoffeeScript / LiveScript – JSHint CSS / Sass / Compass / Stylus Testing – Mocha Deploy – Minify – Rename – Replace
  10. 10. 10 We needWe need JavaScript Task RunnerJavaScript Task Runner
  11. 11. 11 2013 @ JSDC Conference 你不可不知的前端開發工具 http://bit.ly/jsdc-grunt
  12. 12. 12 build system for Grunt.js
  13. 13. 13 Gulp.js Another streaming build system
  14. 14. 14 Who Use Gult.js?Who Use Gult.js?
  15. 15. 15 https://github.com/gulpjs/gulp/issues/540
  16. 16. 16
  17. 17. 17 VS.VS. Gulp.jsGrunt.js
  18. 18. 18 VS.VS. Gulp.js File Based Stream Based Grunt.js
  19. 19. 19 VS.VS. Gulp.js File Based Stream Based Configuration over code code over Configuration Grunt.js
  20. 20. 20 File Based vs. Stream Based
  21. 21. 21 Typical grunt taskTypical grunt task File System Read Files Modify Write Files Temp Read Files Modify Write Files Temp File System
  22. 22. 22 GulpGulp uses streams File System Read Files Modify Modify Write Files Modify Modify File System
  23. 23. 23 Why use gulp.js Easy to use Efficient High Quality Easy to Learn
  24. 24. 24 Easy to useEasy to use By preferring code over configuration, gulp keeps simple things simple and makes complex tasks manageable.
  25. 25. 25 Easy to useEasy to use var gulp = require('gulp‘), coffee = require(‘gulp-coffee’);
  26. 26. 26 Easy to useEasy to use var gulp = require('gulp‘), coffee = require(‘gulp-coffee’); gulp.task('coffee', function() { //ready to go });
  27. 27. 27 Easy to useEasy to use var gulp = require('gulp‘), coffee = require(‘gulp-coffee’); gulp.task('coffee', function() { gulp.src(‘assets/coffee/**/*.coffee’) .pipe(coffee()) .pipe(gulp.dest(‘assets/js/’)); });
  28. 28. 28 https://www.flickr.com/photos/53382811@N07/4984100421
  29. 29. 29 Run commandRun command $ gulp coffee
  30. 30. 30 EfficientEfficient By harnessing the power of node's streams you get fast builds that don't write intermediary files to disk.
  31. 31. 31 Gulp uses streams File System Read Files coffee uglify Write Files rename File System
  32. 32. 32 Efficient var gulp = require('gulp‘), coffee = require(‘gulp-coffee’); gulp.task('coffee', function() { gulp.src(‘assets/coffee/main.coffee’) .pipe(coffee()) .pipe(uglify()) .pipe(rename(‘assets/js/main.min.js’)) .pipe(gulp.dest(‘dist/assets/js/’)); }); Read file
  33. 33. 33 Efficient var gulp = require('gulp‘), coffee = require(‘gulp-coffee’); gulp.task('coffee', function() { gulp.src(‘assets/coffee/main.coffee’) .pipe(coffee()) .pipe(uglify()) .pipe(rename(‘assets/js/main.min.js’)) .pipe(gulp.dest(‘dist/assets/js/’)); }); Process in Memory Process in Memory Process in Memory
  34. 34. 34 Efficient var gulp = require('gulp‘), coffee = require(‘gulp-coffee’); gulp.task('coffee', function() { gulp.src(‘assets/coffee/main.coffee’) .pipe(coffee()) .pipe(uglify()) .pipe(rename(‘assets/js/main.min.js’)) .pipe(gulp.dest(‘dist/assets/js/’)); }); Write file
  35. 35. 35 stream-handbookstream-handbook ByBy @@ substacksubstack https://github.com/substack/stream-handbook
  36. 36. 36 High QualityHigh Quality gulp's strict plugin guidelines assure plugins stay simple and work the way you expect.
  37. 37. 37 Gulp pluginsGulp plugins more than 600+ pluginsmore than 600+ plugins http://gulpjs.com/plugins/http://gulpjs.com/plugins/
  38. 38. 38 Gulp plugin gulp-coffee / gulp-livescript gulp-ruby-sass / gulp-compass gulp-imagemin gulp-rename gulp-minify-css gulp-htmlmin gulp-mocha gulp-replace gulp-livereload
  39. 39. 39 gulp black list gulp-browserify gulp-requirejs gulp-shell gulp-connect gulp-twitter gulp-if-else https://github.com/gulpjs/plugins/blob/master/src/blackList.json
  40. 40. 40 Easy to LearnEasy to Learn With a minimal API surface, you can pick up gulp in no time. Your build works just like you envision it: a series of streaming pipes.
  41. 41. 41 Only 4 functions you need to learnOnly 4 functions you need to learn
  42. 42. 42 Really? https://www.flickr.com/photos/kplawver/8238939/
  43. 43. 43 4 functions gulp.task gulp.watch gulp.src gulp.src
  44. 44. 44 gulp.task(name[, deps], fn)gulp.task(name[, deps], fn) gulp.task(‘hello', function() { console.log('Hello world!'); }); gulp.task('css', ['greet'], function () { // Deal with CSS here }); gulp.task('build', ['css', 'js', 'imgs']); gulp.task('default', function () { // Your default task });
  45. 45. 45 gulp.watch(glob[, opts], tasks) gulp.watch('js/**/*.js', ['Task']);
  46. 46. 46 gulp.src(globs[, options]) gulp.src('./*.jade') gulp.src('*.+(js|css)') gulp.src('*.{jpg,jpeg,png,gif}') gulp.src(['js/**/*.js', '!js/**/*.min.js'])
  47. 47. 47 gulp.dest(path) gulp.src('./client/templates/*.jade') .pipe(jade()) .pipe(gulp.dest('./app')) .pipe(minify()) .pipe(gulp.dest('./dist'));
  48. 48. 48 Write your first Gulp TaskWrite your first Gulp Task gulpfile.[js|coffee|ls] Support CoffeeScript or LiveScript from Gulp > 3.7.0 Thanks @tkellen https://github.com/tkellen/node-liftoff
  49. 49. 49 var gulp = require('gulp'), jshint = require('gulp-jshint'), uglify = require('gulp-uglify'), concat = require('gulp-concat'); gulp.task('js', function () { return gulp.src('js/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')) .pipe(uglify()) .pipe(concat('app.js')) .pipe(gulp.dest('build')); });
  50. 50. 50 package.json { "devDependencies": { "gulp-concat": "^2.3.3", "gulp-uglify": "^0.3.1", "gulp-jshint": "^1.7.1", "gulp": "^3.8.6" } }
  51. 51. 51 How many pluginsHow many plugins you need?you need?
  52. 52. 52 gutil = require 'gulp-util' coffee = require 'gulp-coffee' coffeelint = require 'gulp-coffeelint' compass = require 'gulp-compass' w3cjs = require 'gulp-w3cjs' imagemin = require 'gulp-imagemin' cache = require 'gulp-cache' changed = require 'gulp-changed' connect = require 'gulp-connect' size = require 'gulp-size' gulpif = require 'gulp-if' rename = require 'gulp-rename' uglify = require 'gulp-uglify' minifyCSS = require 'gulp-minify-css' htmlmin = require 'gulp-htmlmin' replace = require 'gulp-replace' mocha = require 'gulp-mocha'
  53. 53. 53 You need gulp-load-plugins Automatically load in gulp plugins https://github.com/jackfranklin/gulp-load-plugins
  54. 54. 54 var gulp = require('gulp'), $ = require('gulp-load-plugins')(); gulp.task('js', function () { return gulp.src('js/*.js') .pipe($.jshint()) .pipe($.jshint.reporter('default')) .pipe($.uglify()) .pipe($.concat('app.js')) .pipe(gulp.dest('build')); });
  55. 55. 55 Only pass through changed files By using gulp-changed only changed files will be passed through.
  56. 56. 56 gulp.task('coffee', function() { gulp.src('app/coffee/**/*.coffee') .pipe(coffeelint()) .pipe(coffeelint.reporter()) .pipe(coffee()) .pipe(gulp.dest(paths.script)); });
  57. 57. 57 Using gulp-changedUsing gulp-changed
  58. 58. 58 gulp.task('coffee', function() { gulp.src('app/coffee/**/*.coffee') .pipe(changed(paths.script, {extension: '.js'})) .pipe(coffeelint()) .pipe(coffeelint.reporter()) .pipe(coffee()) .pipe(gulp.dest(paths.script)); });
  59. 59. 59 Running tasks in seriesRunning tasks in series
  60. 60. 60 var gulp = require('gulp'); gulp.task('one', function(cb) { // do stuff -- async or otherwise cb(err); }); gulp.task('two', ['one'], function() { // task 'one' is done now }); gulp.task('default', ['one', 'two']);
  61. 61. 61 Using run-sequenceUsing run-sequence Run a series of dependent gulp tasks in order https://github.com/OverZealous/run-sequence
  62. 62. 62 var runs = require('run-sequence‘); gulp.task('release', function(cb) { return runs(‘clean’, ['build', 'rjs'], cb); });
  63. 63. 63 Reloading Changes In The BrowserReloading Changes In The Browser gulp-livereload https://github.com/vohof/gulp-livereload
  64. 64. 64 var gulp = require('gulp'), sass = require('gulp-sass'), livereload = require('gulp-livereload'), watch = require('gulp-watch'); gulp.task(‘sass', function() { gulp.src(‘sass/*.scss') .pipe(watch()) .pipe(sass()) .pipe(gulp.dest('css')) .pipe(livereload()); });
  65. 65. 65 gulp-webservergulp-webserver Streaming gulp plugin to run a local webserver with LiveReload https://github.com/schickling/gulp-webserver
  66. 66. 66 var gulp = require('gulp'); webserver = require('gulp-webserver'); gulp.task('webserver', function() { gulp.src('app') .pipe(webserver({ livereload: true })); });
  67. 67. 67 BrowserSyncBrowserSync Time-saving synchronised browser testing. http://www.browsersync.io/
  68. 68. 68 var browserSync = require('browser-sync'), reload = browserSync.reload; // Watch Files For Changes & Reload gulp.task('serve', function () { browserSync({ server: { baseDir: 'app' } }); gulp.watch(['*.html'], reload); });
  69. 69. 69 Sharing StreamsSharing Streams with Stream Factorieswith Stream Factories
  70. 70. 70 var gulp = require('gulp'), $ = require('gulp-load-plugins')(); gulp.task('bootstrap', function() { return gulp.src('bootstrap/js/*.js') .pipe($.jshint()) .pipe($.jshint.reporter(stylish)) .pipe($.uglify()) .pipe(gulp.dest('public/bootstrap')); }); gulp.task('coffee', function() { return gulp.src('lib/js/*.coffee') .pipe($.coffee()) .pipe($.jshint()) .pipe($.jshint.reporter(stylish)) .pipe($.uglify()) .pipe(gulp.dest('public/js')); });
  71. 71. 71 uses lazypipe to get the job done https://github.com/OverZealous/lazypipe
  72. 72. 72 var gulp = require('gulp'), $ = require('gulp-load-plugins')(), lazypipe = require('lazypipe'); // give lazypipe var jsTransform = lazypipe() .pipe($.jshint) .pipe($.jshint.reporter, stylish) .pipe($.uglify); gulp.task('bootstrap', function() { return gulp.src('bootstrap/js/*.js') .pipe(jsTransform()) .pipe(gulp.dest('public/bootstrap')); }); gulp.task('coffee', function() { return gulp.src('lib/js/*.coffee') .pipe($.coffee()) .pipe(jsTransform()) .pipe(gulp.dest('public/js')); });
  73. 73. 73 Deploy ProcessDeploy Process
  74. 74. 74 Deploy ProcessDeploy Process CoffeeScript / LiveScript Compass / Sass Jade Image-min RequireJS Rename Replace Copy
  75. 75. 75 Need more task runnerNeed more task runner Development Staging Production
  76. 76. 76 Why not use Makefile?Why not use Makefile? Using Gulp.js tool only for development
  77. 77. 77 Gulp.js generatorGulp.js generator
  78. 78. 78 A gulp.js generator for modern webapps https://github.com/yeoman/generator-gulp-webapp
  79. 79. 79 Web Starter Kit https://developers.google.com/web/starter-kit/
  80. 80. 80
  81. 81. 81 Slush The streaming scaffolding system Gulp as a replacement for Yeoman http://slushjs.github.io
  82. 82. 82 slush-html5-template html5 template engine generator https://github.com/appleboy/slush-html5-template
  83. 83. 83 FeaturesFeatures ● The latest html5boilerplate.com source code. ● Includes Normalize.scss v3.0.x and v1.1.x. ● The latest jQuery and Modernizr via Bower package manager. ● Support CoffeeScript, RequireJS, Sass or Compass, html minification (via htmlcompressor). ● Support JavaScript test framework Mocha. ● Support streaming build system Gulp. ● Support Minify PNG and JPEG images with image-min. ● Support browser-sync Keep multiple browsers & devices in sync when building websites.
  84. 84. 84 How to install?How to install? $ npm install -g slush $ npm install -g slush-html5-template
  85. 85. 85 Scaffold your first projectScaffold your first project $ mkdir app $ cd app && slush html5-template $ npm start
  86. 86. 86
  87. 87. 87 Gulp TechnologyGulp Technology
  88. 88. 88 OrchestratorOrchestrator A module for sequencing and executing tasks and dependencies in maximum concurrency https://github.com/orchestrator/orchestrator
  89. 89. 89 vinyl-fsvinyl-fs Vinyl adapter for the file system https://github.com/wearefractal/vinyl-fs
  90. 90. 90 gulp-cheatsheetgulp-cheatsheet A cheatsheet for gulp.js https://github.com/osscafe/gulp-cheatsheet
  91. 91. 91
  92. 92. 92
  93. 93. 93 Any Question?
  94. 94. 94 謝謝在場聽眾及 全體 COSCUP 工作人員

×