The difference between Gulp and Webpack

Often people take gulp and webpack to compare, know that these two building tools function overlap Place, can be used alone, can also use together, but the essential difference is not so clear.

Gulp

Gulp emphasizes the workflow of front-end development by configuring a series of tasks to define the transactions processed by the task (for example, file compression merge, Sprite, boot server, versioning, and so on), and then define the order of execution to let gulp execute these tasks. Thus building the entire front-end development process for the project.

PS: Simply say a task Runner

Webpack

Webpack is a front-end modular solution, more focused on module packaging, we can develop all the resources (Pictures, JS files, CSS files, etc.) as modules, through the loader (loader) and plugins (plug-in) to the resource processing, packaged into a production environment to meet the deployment of the front-end resources.

Ps:webpack is a module bundle

Same function

Gulp and Webpack can implement some of the same functions, as follows (enumeration section):

Function	Gulp	Webpack
File merge and compression (CSS)	Using the Gulp-minify-css module Gulp.task (' sass ', function () { GULP.SRC (Cssfiles) . Pipe (Sass (). On (' Error ', Sass.logerror)) . Pipe (Require (' gulp-minify-css ') ()) . Pipe (Gulp.dest (Distfolder)); });	Style merging is typically used with the Extract-text-webpack-plugin plugin, Compression uses the Webpack.optimize.UglifyJsPlugin.
File merging and compression (JS)	Use of gulp-uglify and Gulp-concat two modules	JS Merge has been done at the beginning of modularity, Compression uses the Webpack.optimize.UglifyJsPlugin
Sass/less Pre-compilation	Using the Gulp-sass/gulp-less module	Sass-loader/less-loader for pretreatment
Start the server	Using the Gulp-webserver module var webserver =require (' gulp-webserver '); Gulp.task (' webserver ', function () { GULP.SRC ('./') . Pipe (webserver ({ Host: ' localhost ', port:8080, Livereload:true,//Auto Refresh directorylisting:{ Enable:true, Path: './' }, })); });	Module.exports = {      ...      devserver: {           contentbase: " Build/",           port:8080,            inline:true//real-time refresh     } }
Version control	Use of Gulp-rev and gulp-rev-collector two modules	Add the generated file to the hash value Module.exports = { ...... Output: { ...... FileName: "[name]. [Hash:8].js] }, plugins:[ ...... New Extracttextplugin (style.[ Hash].css ") ] }

difference between the two

Although they are all front-end automation building tools, it is not equivalent to look at their location.

Gulp Strictly speaking, modularity is not something he emphasizes, he aims to standardize the front-end development process.

Webpack is the obvious emphasis on modular development, and those file compression merging, preprocessing and other functions, but his accompanying features.

Summarize

Gulp should be compared with grunt, and Webpack should be with browserify (too much information on the internet so to speak, so there is no mistake, but this sentence alone can not make people clear).

Gulp and Webpack are complementary, or replaceable, depending on the needs of your project. If it's just a single page app for Vue or react, webpack is enough, and if webpack some of the features don't even bother to use it (Sprite doesn't), it can be combined with gulp.

This article for the original article, reproduced please retain the original source, convenient traceability, if there is the wrong place, thank you correct.

This address: http://www.cnblogs.com/lovesong/p/6413546.html

The difference between Gulp and Webpack