Grunt, Gulp difference webpack, Requirejs difference

1. How to Write

Grunt use the idea of configuration to write packaging scripts, everything is configured, so there will be more configuration items, such as option,src,dest and so on. and different plug-ins may have their own extension fields, resulting in increased cognitive costs, when used to understand the various plug-in configuration rules.
Gulp is the code to write the packaging script, and the code in a flow-style, only abstract out the gulp. src, gulp. pipe, gulp. dest, gulp. Watch Gulp. tasks and other interfaces are fairly simple to use. By trial, the amount of code used gulp can be about half as much as grunt.

2. Task Partitioning

gulpis a tool chain, build tools, can be used with a variety of plug-ins to do JS compression, CSS compression, less compilation instead of manual implementation of automated work

1. build tools: Can be used to build a foundation project

2. Automation: The Gulp.task can be configured by the interface to automatically compress the js,css,html code, automatically refresh the page (IDE many can be automatically refreshed)

3. improve efficiency by: can compile less syntax, can recognize the rapid editing of CSS

webpackis a file packaging tool, you can combine the various JS text, CSS files and other packaging into one or more files, mainly for the modular scheme, pre-compiled module scheme

1. Packaging Tools: Gulp can also, but need to configure property items by project, Webpack is very integrated, simple

2. Modular Identification

3. Compile the module code scheme with

So the definition and usage are not a kind of things, no comparable, more conflict! "Of course, there are similar functions, such as merging, distinguishing, but each has its own advantages."

• Seajs/require: is an online "compile" module that is equivalent to loading a CMD/AMD interpreter on the page. In this way the browser knows define, exports, module these things. Modularity is also achieved.

• Browserify/webpack: is a pre-compiled module scheme, which is more intelligent than above. Use Browserify, here take Webpack for example. First, it is precompiled and does not need to load the interpreter in the browser. In addition, you write in the local JS, regardless of the amd/cmd/es6 style of modularity, it can be recognized, and compiled into the browser to understand the JS. This will know that Gulp is a tool, and webpack and so on are modular solutions. Gulp can also configure Seajs, Requirejs, and even webpack plugins.

Grunt, Gulp difference webpack, Requirejs difference