Upload
ted-shiu
View
144
Download
2
Embed Size (px)
Citation preview
Agenda
1. Why use development tool like Grunt, gulp, Browserify, webpack…?
2. Why gulp?3. Why webpack?4. Different of they?
Some thing we can do in front-end develop
SASS ⇨ CSS
CSS minify
coffee script ⇨ javascript
babel ⇨ javascript
uglify js
...
Some thing we can do in front-end develop
SASS ⇨ CSS sass-convert
CSS minify yuicompressor, minify, ...
coffee script ⇨ javascript coffee --compile
babel ⇨ javascript babel
uglify js uglify
...
for modularized develop
include AMD design pattern
packaged your code
can build with other development tool
config
● entry○ source code need packaged
● output○ packaged code
● loaders○ transformations your code like jade, sass, baabel
○ handle css, image
● plugin○ some thing you want handle in build process
○ http://webpack.github.io/docs/list-of-plugins.html
Some tips
● build for different environment○ set different config like webpack.config.dev.js and webpack.config.production.js
● watch○ webpack --watch
● Use plugins handle libery like jQuery
○
webpack gulp
Modular Processing O O
Modular bundle O X
run async task X O
development O O
handle CSS image ▵ O
Reference
● webpack module bundler
● JavaScript - Why i from RequireJS to webpack