Gulp.js & webpack
22
gulp.js & webpack how to use and different of they Ted @firstweb
Transcript of Gulp.js & webpack
gulp.js & webpack
how to use and different of they
Ted @firstweb
Agenda
1. Why use development tool like Grunt, gulp, Browserify, webpack…?
2. Why gulp?3. Why webpack?4. Different of they?
Why use development tool like Grunt, gulp, Browserify, webpack…?
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
...
a lot of command line need to do
we begin to write shell script handle this thing
So we need development tool
gulpfile.js
Why gulp?
powerful
has pipe
support async task
lot of plugin
Why webpack?
for modularized develop
include AMD design pattern
packaged your code
can build with other development tool
webpack.config.js
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
○
Different of they?
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
