F R O N T- E N D
W O R K F L O W S
C E S A R C H E N
Slide 2
Slide 2 text
O u r t o o l s l a n d s c a p e i s
g e t t i n g m o re c o m p l e x .
Slide 3
Slide 3 text
Boilerplate
Frameworks
Testing
Dependency management
Version Control
Deployment
Performance optimization Docs
Build
Continuous Integration
Abstractions
Workflow
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
A S Y O U K N O W…
“Time” is a key factor in staying productive.
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
The average front-end workflow today
S E T U P D E V E L O P B U I L D
Slide 8
Slide 8 text
S E T U P
Scaffolding
Download libraries
Download templates
Download frameworks
Slide 9
Slide 9 text
D E V E L O P
Watch Sass / Less / Stylus
Watch ES6 / CoffeeScript
Watch HTML / Jade / Haml
LiveReload
JS / CSS Linting
Slide 10
Slide 10 text
B U I L D
Code linting
Running unit tests
Compile everything
Minify & concatenate
Generate images / icons
Optimize performance
HTTP Server
Deployment
Slide 11
Slide 11 text
A U T O M A T E T H I S W O R K F L O W F O R
A L L T Y P E S O F P R O J E C T
Slide 12
Slide 12 text
B U I L D T O O L S
Slide 13
Slide 13 text
There are so many tools.
Just choose what you wants.
Slide 14
Slide 14 text
B U I L D T O O L S
Slide 15
Slide 15 text
Webpack
Gulp
NPM
Slide 16
Slide 16 text
N O D E PA C K A G E S M A N A G E R
Slide 17
Slide 17 text
var path = require(‘path’);
var gulp = require(‘gulp’);
var webpack = require(‘webpack’);
Slide 18
Slide 18 text
I N S TA L L M O D U L E S
$ npm install module-name
$ npm install —save module-name
Slide 19
Slide 19 text
I N S TA L L M O D U L E S
Slide 20
Slide 20 text
PA C K A G E . J S O N
{
“name”: “project-name”,
“version”: “0.0.0”,
“dependencies: {
“gulp”: “^3.9.0”,
“webpack”: “^1.11.0”
}
}
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
G U L P
• A build system
• A task runner
• A workflow automator
Slide 23
Slide 23 text
W H Y G U L P ?
• Smaller, more efficient
plug-ins
• Built-in file watching
functionality
• JavaScript Configuration
files
• Streams
Slide 24
Slide 24 text
I N S TA L L
$ npm install -g gulp
Slide 25
Slide 25 text
G U L P F I L E . J S
var gulp = require(‘gulp’);
gulp.task(‘task-name’, function() {
…
});
gulp.task(‘default’, [‘task-name’]);
Slide 26
Slide 26 text
G U L P F I L E . J S
$ gulp task-name
Slide 27
Slide 27 text
G U L P A P I
gulp.task
gulp.src
gulp.dest
gulp.watch
Slide 28
Slide 28 text
S O U R C E
gulp.task(‘task-name’, function() {
return gulp.src(‘./src/js/*.js’)
.pipe(…);
});
Slide 29
Slide 29 text
D E S T I N AT I O N
gulp.task(‘task-name’, function() {
return gulp.src(‘./src/js/*.js’)
.pipe(…)
.pipe(gulp.dest(‘./build’);
});
Slide 30
Slide 30 text
D E S T I N AT I O N
gulp.task(‘task-name’, function() {
gulp.watch(‘./src/js/**’,
[‘build-task’]);
});
Slide 31
Slide 31 text
U S E F U L P L U G I N S F O R G U L P
gulp-concat
gulp-uglify
gulp-rename
gulp-util
browser-sync
Slide 32
Slide 32 text
P L U G I N S
var concat = require(‘gulp-concat’);
var rename = require(‘gulp-rename’);
gulp.task(‘task-name’, function() {
return gulp.src(‘./src/js/*.js’)
.pipe(concat(‘app.js’))
.pipe(rename({ suffix: ‘.min’}
.pipe(gulp.dest(‘./build’);
});
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
Q U E S T I O N ?
Slide 35
Slide 35 text
M O D U L E B U N D L E R
Slide 36
Slide 36 text
Before we do that …
There were something you remembered
C O N F I G U R AT I O N
C L I & w e b p a c k . c o n f i g . j s
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
L O A D E R S
preprocess files
Slide 46
Slide 46 text
P L U G I N S
Slide 47
Slide 47 text
H O T M O D U L E R E P L A C E M E N T
http://webpack.github.io/docs/hot-module-replacement-with-webpack.html
Slide 48
Slide 48 text
H O T M O D U L E R E P L A C E M E N T
Entry
webpack-dev-server/client?http://localhost:3000
webpack/hot/only-dev-server
Plugins
new webpack.HotModuleReplacementPlugin()
Slide 49
Slide 49 text
W E B PA C K - D E V- S E R V E R
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
Q U E S T I O N ?
Slide 52
Slide 52 text
M O R E …
• NPM
• https://www.npmjs.com/
• Gulp
• http://gulpjs.com/
• https://scotch.io/tutorials/automate-your-tasks-easily-with-
gulp-js
• http://leveluptuts.com/tutorials/learning-gulp
• Webpack
• https://webpack.github.io/
• https://github.com/petehunt/webpack-howto