Automating Your Work flow Automating Your Work flow with gulp.jswith gulp.js

Bo-Yi Wu2014@COSCUP

2

Software Engineer @ Realtekhttps://github.com/appleboy

http://blog.wu-boy.comhttps://www.facebook.com/appleboy46

3

Work FlowWork Flow

https://www.flickr.com/photos/shanecasey51/14627365291

4

Work FlowWork Flowfor web developerfor web developer

5

Work Flow Setup

DownloadServer SetupPHPRuby

6

SetupDownloadServer SetupPHPRuby

Develop Watch Live Reload Lint Coffee Sass/Less

Work Flow

7

SetupDownloadServer SetupPHPRuby

Develop Watch Live Reload Lint Coffee Sass/Less

Build Testing Compile Concat Rename Minify Image-min Deployment

Work Flow

8

Automation

http://www.exacttarget.com/blog/marketing-automation-infographic/

9

TasksTasks

Html / JadeJavaScript / CoffeeScript / LiveScript

– JSHintCSS / Sass / Compass / StylusTesting

– MochaDeploy

– Minify– Rename– Replace

10

We need We need JavaScript Task RunnerJavaScript Task Runner

11

2013 @ JSDC Conference你不可不知的前端開發工具http://bit.ly/jsdc-grunt

12

build system for Grunt.js

13

Gulp.js Another streaming build system

14

Who Use Gult.js?Who Use Gult.js?

15

https://github.com/gulpjs/gulp/issues/540

16

17

VS.VS.

Gulp.jsGrunt.js

18

VS.VS.

Gulp.js

File Based Stream Based

Grunt.js

19

VS.VS.

Gulp.js

File Based Stream BasedConfiguration over code code over Configuration

Grunt.js

20

File Based vs. Stream Based

21

Typical grunt taskTypical grunt task

FileSystem

ReadFiles

Modify WriteFiles

Temp

ReadFiles

Modify WriteFiles

Temp

FileSystem

22

GulpGulp uses streams

FileSystem

ReadFiles

Modify Modify WriteFiles

Modify Modify

FileSystem

23

Why use gulp.js

Easy to useEfficientHigh QualityEasy to Learn

24

Easy to useEasy to useBy preferring code over configuration, gulp

keeps simple things simple and makes complex tasks manageable.

25

Easy to useEasy to use

var gulp = require('gulp‘), coffee = require(‘gulp-coffee’);

26

Easy to useEasy to use

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

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

https://www.flickr.com/photos/53382811@N07/4984100421

29

Run commandRun command$ gulp coffee

30

EfficientEfficientBy harnessing the power of node's streams you get fast builds that don't write intermediary files to

disk.

31

Gulp uses streams

FileSystem

ReadFiles

coffee uglify WriteFiles

rename

FileSystem

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

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

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

stream-handbookstream-handbook By By＠＠ substacksubstack

https://github.com/substack/stream-handbook

36

High QualityHigh Qualitygulp's strict plugin guidelines assure plugins stay simple and work the way

you expect.

37

Gulp pluginsGulp pluginsmore than 600+ pluginsmore than 600+ plugins

http://gulpjs.com/plugins/http://gulpjs.com/plugins/

38

Gulp plugin

gulp-coffee / gulp-livescriptgulp-ruby-sass / gulp-compassgulp-imagemingulp-renamegulp-minify-cssgulp-htmlmingulp-mochagulp-replacegulp-livereload

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

Easy to LearnEasy to LearnWith 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

Only 4 functions you need to learnOnly 4 functions you need to learn

42

Really?

https://www.flickr.com/photos/kplawver/8238939/

43

4 functions

gulp.taskgulp.watchgulp.srcgulp.src

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

gulp.watch(glob[, opts], tasks)

gulp.watch('js/**/*.js', ['Task']);

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

gulp.dest(path)

gulp.src('./client/templates/*.jade') .pipe(jade()) .pipe(gulp.dest('./app')) .pipe(minify()) .pipe(gulp.dest('./dist'));

48

Write your first Gulp TaskWrite your first Gulp Taskgulpfile.[js|coffee|ls]

Support CoffeeScript or LiveScript from Gulp > 3.7.0

Thanks @tkellen

https://github.com/tkellen/node-liftoff

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

package.json

{ "devDependencies": { "gulp-concat": "^2.3.3", "gulp-uglify": "^0.3.1", "gulp-jshint": "^1.7.1", "gulp": "^3.8.6" }}

51

How many pluginsHow many pluginsyou need?you need?

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

You needgulp-load-plugins

Automatically load in gulp pluginshttps://github.com/jackfranklin/gulp-load-plugins

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

Only pass through changed files

By using gulp-changed only changed files will be passed through.

56

gulp.task('coffee', function() { gulp.src('app/coffee/**/*.coffee') .pipe(coffeelint()) .pipe(coffeelint.reporter()) .pipe(coffee()) .pipe(gulp.dest(paths.script));});

57

Using gulp-changedUsing gulp-changed

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

Running tasks in seriesRunning tasks in series

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

Using run-sequenceUsing run-sequenceRun a series of dependent gulp tasks in order

https://github.com/OverZealous/run-sequence

62

var runs = require('run-sequence‘);gulp.task('release', function(cb) { return runs(‘clean’, ['build', 'rjs'], cb);});

63

Reloading Changes In The BrowserReloading Changes In The Browser

gulp-livereloadhttps://github.com/vohof/gulp-livereload

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

gulp-webservergulp-webserverStreaming gulp plugin to run a local webserver with

LiveReload

https://github.com/schickling/gulp-webserver

66

var gulp = require('gulp'); webserver = require('gulp-webserver');

gulp.task('webserver', function() { gulp.src('app') .pipe(webserver({ livereload: true }));});

67

BrowserSyncBrowserSyncTime-saving synchronised browser testing.

http://www.browsersync.io/

68

var browserSync = require('browser-sync'), reload = browserSync.reload;

// Watch Files For Changes & Reloadgulp.task('serve', function () { browserSync({ server: { baseDir: 'app' } });

gulp.watch(['*.html'], reload);});

69

Sharing Streams Sharing Streams with Stream Factorieswith Stream Factories

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

uses lazypipe to get the job done

https://github.com/OverZealous/lazypipe

72

var gulp = require('gulp'), $ = require('gulp-load-plugins')(), lazypipe = require('lazypipe');

// give lazypipevar 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

Deploy ProcessDeploy Process

74

Deploy ProcessDeploy ProcessCoffeeScript / LiveScriptCompass / SassJadeImage-minRequireJSRenameReplaceCopy

75

Need more task runnerNeed more task runnerDevelopment

StagingProduction

76

Why not use Makefile?Why not use Makefile?Using Gulp.js tool only for development

77

Gulp.js generatorGulp.js generator

78

A gulp.js generator for modern webapps https://github.com/yeoman/generator-gulp-webapp

79

Web Starter Kithttps://developers.google.com/web/starter-kit/

80

81

SlushThe streaming scaffolding systemGulp as a replacement for Yeoman

http://slushjs.github.io

82

slush-html5-template html5 template engine generator

https://github.com/appleboy/slush-html5-template

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

How to install?How to install?$ npm install -g slush

$ npm install -g slush-html5-template

85

Scaffold your first projectScaffold your first project

$ mkdir app$ cd app && slush html5-template$ npm start

86

87

Gulp TechnologyGulp Technology

88

OrchestratorOrchestrator

A module for sequencing and executing tasks and dependencies in maximum concurrency

https://github.com/orchestrator/orchestrator

89

vinyl-fsvinyl-fsVinyl adapter for the file system

https://github.com/wearefractal/vinyl-fs

90

gulp-cheatsheet gulp-cheatsheet A cheatsheet for gulp.js

https://github.com/osscafe/gulp-cheatsheet

91

92

93

Any Question?

94

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