Usage of front-end build tools-grunt, Gulp, Browserify, Webpack

With the rapid development of front-end projects, more and more projects, more and more documents, front-end engineering tools are more and more. Here are four of the most popular build tools--grunt, Gulp, Browserify, Webpack

All build tools are based on Nodejs and NPM, so you need to install node using any of the following tools

First, Grunt

1. Two files required:

Gruntfile.js--grunt Execution Task File: Describes the tasks that the project will perform.

package.json--Project Description: Describes the project's basic information, and the NPM package information used in the project, to make it easier for others to understand the project information and run the project.

2. Install the GRUNT-CLI command environment and the grunt package used in the project

NPM Install Grunt-cli-g

Sudo:sudo NPM install grunt-cli-g required under Mac

NPM Install grunt--save-dev//--save-dev: Indicates that the NPM package needs to be used in the dev development environment, plus this automatically adds the relevant package description to the Package.json.

3. Install Grunt task related NPM package

NPM Install XXX--save-dev

4. Gruntfile.js Task

Module.exports =function(grunt) {//load the required task packagesGrunt.loadnpmtasks (' grunt-contrib-less '); Grunt.loadnpmtasks (' Grunt-contrib-uglify '); //Initializing TasksGrunt.initconfig ({"Less": {//Package Name"A": {//Task Name"src": "a.less",                "Dest": "Index.css"            },            "B":{                "src": "b.less",                "Dest": "Main.css"            }        },        "Uglify": {            A: {                "src": "Aa.js",                "Dest": "Index.js"            }        }    });

Register multi-tasking
Grunt.registertask (' abc ', [' less:a ', ' uglify ']);

}

Summary: One of the first tools to automate the building of front-end projects greatly improves development efficiency in the front-end development process, facilitates engineering deployment to the line, and optimizes online front-end code.

Second, gulp

Third, browserify

Iv. Webpack

Usage of front-end build tools-grunt, Gulp, Browserify, Webpack