Introduction to Gulp.js tool

Automating your workflow with Gulp.js

Transcript

1. Automating Your Work flow Automating Your Work flow with gulp.js with gulp.js Bo-Yi Wu 2014@COSCUP
2. 2 Software Engineer @ Realtek https://github.com/appleboy http://blog.wu-boy.com https://www.facebook.com/appleboy46
3. 3 Work Flow Work Flow https://www.flickr.com/photos/shanecasey51/14627365291
4. 4 Work Flow Work Flow for web developer for web developer
5. 5 Work Flow Setup Download Server Setup PHP Ruby
6. 6 Setup Download Server Setup PHP Ruby Develop Watch Live Reload Lint Coffee Sass/Less Work Flow
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 Automation http://www.exacttarget.com/blog/marketing-automation-infographic/
9. 9 Tasks Tasks Html / Jade JavaScript / CoffeeScript / LiveScript – JSHint CSS / Sass / Compass / Stylus Testing – Mocha Deploy – Minify – Rename – Replace
10. 10 We need We need JavaScript Task Runner JavaScript Task Runner
11. 11 2013 @ JSDC Conference 你不可不知的前端開發工具 http://bit.ly/jsdc-grunt
12. 12 build system for Grunt.js
13. 13 Gulp.js Another streaming build system
14. 14 Who Use Gult.js? Who Use Gult.js?
15. 15 https://github.com/gulpjs/gulp/issues/540
17. 17 VS. VS. Gulp.js Grunt.js
18. 18 VS. VS. Gulp.js File Based Stream Based Grunt.js
19. 19 VS. VS. Gulp.js File Based Stream Based Configuration over code code over Configuration Grunt.js
20. 20 File Based vs. Stream Based
21. 21 Typical grunt task Typical grunt task File System Read Files Modify Write Files Temp Read Files Modify Write Files Temp File System
22. 22 Gulp Gulp uses streams File System Read Files Modify Modify Write Files Modify Modify File System
23. 23 Why use gulp.js Easy to use Efficient High Quality Easy to Learn
24. 24 Easy to use Easy to use By preferring code over configuration, gulp keeps simple things simple and makes complex tasks manageable.
25. 25 Easy to use Easy to use var gulp = require('gulp‘), coffee = require(‘gulp-coffee’);
26. 26 Easy to use Easy to use var gulp = require('gulp‘), coffee = require(‘gulp-coffee’); gulp.task('coffee', function() { //ready to go });
27. 27 Easy to use Easy 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 https://www.flickr.com/photos/53382811@N07/4984100421
29. 29 Run command Run command $ gulp coffee
30. 30 Efficient Efficient By harnessing the power of node's streams you get fast builds that don't write intermediary files to disk.
31. 31 Gulp uses streams File System Read Files coffee uglify Write Files rename File System
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 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 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 stream-handbook stream-handbook By By ＠ ＠ substack substack https://github.com/substack/stream-handbook
36. 36 High Quality High Quality gulp's strict plugin guidelines assure plugins stay simple and work the way you expect.
37. 37 Gulp plugins Gulp plugins more than 600+ plugins more than 600+ plugins http://gulpjs.com/plugins/ http://gulpjs.com/plugins/
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 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 Easy to Learn Easy 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 Only 4 functions you need to learn Only 4 functions you need to learn
42. 42 Really? https://www.flickr.com/photos/kplawver/8238939/
43. 43 4 functions gulp.task gulp.watch gulp.src gulp.src
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 gulp.watch(glob[, opts], tasks) gulp.watch('js/**/*.js', ['Task']);
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 gulp.dest(path) gulp.src('./client/templates/*.jade') .pipe(jade()) .pipe(gulp.dest('./app')) .pipe(minify()) .pipe(gulp.dest('./dist'));
48. 48 Write your first Gulp Task Write 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 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 package.json { "devDependencies": { "gulp-concat": "^2.3.3", "gulp-uglify": "^0.3.1", "gulp-jshint": "^1.7.1", "gulp": "^3.8.6" } }
51. 51 How many plugins How many plugins you need? you need?
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 You need gulp-load-plugins Automatically load in gulp plugins https://github.com/jackfranklin/gulp-load-plugins
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 Only pass through changed files By using gulp-changed only changed files will be passed through.
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 Using gulp-changed Using gulp-changed
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 Running tasks in series Running tasks in series
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 Using run-sequence Using run-sequence Run a series of dependent gulp tasks in order https://github.com/OverZealous/run-sequence
62. 62 var runs = require('run-sequence‘); gulp.task('release', function(cb) { return runs(‘clean’, ['build', 'rjs'], cb); });
63. 63 Reloading Changes In The Browser Reloading Changes In The Browser gulp-livereload https://github.com/vohof/gulp-livereload
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 gulp-webserver gulp-webserver Streaming gulp plugin to run a local webserver with LiveReload https://github.com/schickling/gulp-webserver
66. 66 var gulp = require('gulp'); webserver = require('gulp-webserver'); gulp.task('webserver', function() { gulp.src('app') .pipe(webserver({ livereload: true })); });
67. 67 BrowserSync BrowserSync Time-saving synchronised browser testing. http://www.browsersync.io/
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 Sharing Streams Sharing Streams with Stream Factories with Stream Factories
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 uses lazypipe to get the job done https://github.com/OverZealous/lazypipe
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 Deploy Process Deploy Process
74. 74 Deploy Process Deploy Process CoffeeScript / LiveScript Compass / Sass Jade Image-min RequireJS Rename Replace Copy
75. 75 Need more task runner Need more task runner Development Staging Production
76. 76 Why not use Makefile? Why not use Makefile? Using Gulp.js tool only for development
77. 77 Gulp.js generator Gulp.js generator
78. 78 A gulp.js generator for modern webapps https://github.com/yeoman/generator-gulp-webapp
79. 79 Web Starter Kit https://developers.google.com/web/starter-kit/
81. 81 Slush The streaming scaffolding system Gulp as a replacement for Yeoman http://slushjs.github.io
82. 82 slush-html5-template html5 template engine generator https://github.com/appleboy/slush-html5-template
83. 83 Features Features • 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 How to install? How to install? $ npm install -g slush $ npm install -g slush-html5-template
85. 85 Scaffold your first project Scaffold your first project $ mkdir app $ cd app && slush html5-template $ npm start
87. 87 Gulp Technology Gulp Technology
88. 88 Orchestrator Orchestrator A module for sequencing and executing tasks and dependencies in maximum concurrency https://github.com/orchestrator/orchestrator
89. 89 vinyl-fs vinyl-fs Vinyl adapter for the file system https://github.com/wearefractal/vinyl-fs
90. 90 gulp-cheatsheet gulp-cheatsheet A cheatsheet for gulp.js https://github.com/osscafe/gulp-cheatsheet
93. 93 Any Question?
94. 94 謝謝在場聽眾及 全體 COSCUP 工作人員