Automating your workflow with gulp

1. Automating Your Work flowAutomating Your Work flow
with gulp.jswith 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 FlowWork Flow
https://www.flickr.com/photos/shanecasey51/14627365291

4. 4
Work FlowWork Flow
for web developerfor 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
TasksTasks
Html / Jade
JavaScript / CoffeeScript / LiveScript
– JSHint
CSS / Sass / Compass / Stylus
Testing
– Mocha
Deploy
– Minify
– Rename
– Replace

10. 10
We needWe need
JavaScript Task RunnerJavaScript 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

16. 16

17. 17
VS.VS.
Gulp.jsGrunt.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 taskTypical grunt task
File
System
Read
Files
Modify Write
Files
Temp
Read
Files
Modify Write
Files
Temp
File
System

22. 22
GulpGulp 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 useEasy to use
By preferring code over configuration, gulp
keeps simple things simple and makes complex
tasks manageable.

25. 25
Easy to useEasy to use
var gulp = require('gulp‘),
coffee = require(‘gulp-coffee’);

26. 26
Easy to useEasy to use
var gulp = require('gulp‘),
coffee = require(‘gulp-coffee’);
gulp.task('coffee', function() {
//ready to go
});

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
https://www.flickr.com/photos/53382811@N07/4984100421

29. 29
Run commandRun command
$ gulp coffee

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
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-handbookstream-handbook ByBy ＠＠ substacksubstack
https://github.com/substack/stream-handbook

36. 36
High QualityHigh Quality
gulp's strict plugin guidelines assure
plugins stay simple and work the way
you expect.

37. 37
Gulp pluginsGulp plugins
more than 600+ pluginsmore 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 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
Only 4 functions you need to learnOnly 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 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
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 pluginsHow 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-changedUsing 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 seriesRunning 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-sequenceUsing 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 BrowserReloading 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-webservergulp-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
BrowserSyncBrowserSync
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 StreamsSharing Streams
with Stream Factorieswith 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 ProcessDeploy Process

74. 74
Deploy ProcessDeploy Process
CoffeeScript / LiveScript
Compass / Sass
Jade
Image-min
RequireJS
Rename
Replace
Copy

75. 75
Need more task runnerNeed 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 generatorGulp.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/

80. 80

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
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
How to install?How to install?
$ npm install -g slush
$ npm install -g slush-html5-template

85. 85
Scaffold your first projectScaffold your first project
$ mkdir app
$ cd app && slush html5-template
$ npm start

86. 86

87. 87
Gulp TechnologyGulp Technology

88. 88
OrchestratorOrchestrator
A module for sequencing and executing tasks
and dependencies in maximum concurrency
https://github.com/orchestrator/orchestrator

89. 89
vinyl-fsvinyl-fs
Vinyl adapter for the file system
https://github.com/wearefractal/vinyl-fs

90. 90
gulp-cheatsheetgulp-cheatsheet
A cheatsheet for gulp.js
https://github.com/osscafe/gulp-cheatsheet

91. 91

92. 92

93. 93
Any Question?

94. 94
謝謝在場聽眾及
全體 COSCUP 工作人員