how to use and different of Gulp.js & webpack in web front-end development tool

1. gulp.js & webpack
how to use and different of they
Ted @firstweb

2. Agenda
1. Why use development tool like Grunt, gulp, Browserify,
webpack…?
2. Why gulp?
3. Why webpack?
4. Different of they?

3. Why use development tool like Grunt, gulp, Browserify,
webpack…?

4. Some thing we can do in front-end develop
SASS ⇨ CSS
CSS minify
coffee script ⇨ javascript
babel ⇨ javascript
uglify js
...

5. 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
...

6. a lot of command line need to do

7. we begin to write shell script handle this thing

8. So we need development tool

9. gulpfile.js

10. Why gulp?

11. powerful
has pipe
support async task
lot of plugin

13. Why webpack?

14. for modularized develop
include AMD design pattern
packaged your code
can build with other development tool

16. webpack.config.js

17. 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

18. 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
○

19. Different of they?

20. webpack
圖片來源: 百岳
V.S.
gulp

21. webpack gulp
Modular Processing O O
Modular bundle O X
run async task X O
development O O
handle CSS image ▵ O

22. Reference
● webpack module bundler
● JavaScript - Why i from RequireJS to webpack