Usually commonly used build tools have NPM script, grunt, gulp, webpack.

Construction tools can do operations: code conversion, file optimization, code segmentation, module merge automatic refresh, code verification, automatic release.

NPM is package management installed with Node.js. NPM Script is a built-in feature of NPM that allows you to define tasks using script fields in package.json files, as ege:


{"script": {"dev":"node dev.js"."pub":"node build.js"}}Copy the code

Grunt has a large number of plugins that encapsulate common tasks and manage dependencies between tasks. The specific execution code and dependencies for each task are in the gruntfile.js configuration file. ede:


module.exports=function(grunt){// Configuration information of all plug-ins grunt. InitConfig ({uglify:{app_task:{files:{'build/app.min.js': ['lib/index.js'.'lib/test.js'Watch :{another:{files:[lib/*.js]}}}) // Tell grunt to use these plugins grunt. LoadNpmTask ()'grunt-contrib-uglify');

grunt.loadNpmTask('grunt-contrib-watch');

grunt.registerTask('dev'['uglify'.'watch']); }Copy the code

Executing Grunt dev in the project root will enable javascript file compression and automatic refresh.

The advantage of Grunt is that it is flexible and only takes care of the tasks that we have defined. A large number of reusable components are repackaged for common build tasks. The disadvantage of Grunt is that it is not very integrated and requires many configurations to be written before it can be used.

Gulp is a stream-based automated build tool. In addition to managing and executing tasks, you can also listen to files and read and write files. Gulp supports all scenarios in the following five ways:

  • Gulp. task Registers a task
  • Gulp. run Executes the task
  • Gulp.watch listens for file changes
  • Gulp.src reads the file
  • Gulp. Dest to write documents
The main feature of GULp is that it introduces the concept of streams and provides a series of plug-ins to handle streams, which can be delivered directly from plug-ins


Var gulp = require('gulp'); Var jshint = require('gulp-jshint');

var sass = require('gulp-sass');

var concat = require('gulp-concat');

var uglify = require('gulp-uglify'); // Compile SCSS task gulp.task('sass'.function(){// read gulp.src()'./scss/*.scss').pipe(sass()).pipe(gulp.dest('./css'))})Copy the code

Gulp has the advantage of being both easy to use and flexible, and can be built on its own or in conjunction with other tools. The disadvantage is that it requires a lot of configuration before it can be used

Webpack is a tool to package modular javascript, in Webpack all files are modules, through loader to convert files, through plugin to inject hooks, and finally output multiple combined files, javascript, CSS, SCSS, images, templates, The advantage of webPack is that the dependencies between modules can be clearly described.


Module. exports={// All modules' entry, webPack recursively resolves all dependent modules' entry:'./app.js', output:{// Package all the modules that the entry depends on into a bundle.'bundle,js'}}Copy the code

  • Focus on modular projects, can do out of the box;
  • Through plugin extension, complete easy to use and flexible;
  • Usage scenarios are not limited to Web development;
  • The community is active and constantly updated;
  • Good development experience;
The disadvantage of WebPack is that it is only suitable for development projects that adopt modularity, otherwise it is not suitable for use.