Gulp and webpack are development tools that can automate front-end tasks like compiling Sass to CSS, minifying files, and more. Gulp is powerful and supports asynchronous tasks via plugins. Webpack is suited for modular development, packaging code into bundles, and can be used with other tools. The key differences are that webpack bundles modules whereas gulp does not, webpack runs synchronously while gulp supports async tasks, and webpack handles assets like CSS and images in addition to JavaScript.

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