随着前端项目的飞速发展，项目越来越大、文件越来越多，前端工程化的工具也越来越多。下面介绍目前最流行的四种构建工具——grunt、gulp、browserify、webpack

所有的构建工具都是基于NodeJs和Npm，所以使用下面任何工具都需要安装Node

一、grunt

1、需要两个文件：

Gruntfile.js —— grunt执行任务文件：描述项目会执行的任务。

package.json —— 工程描述文件：描述项目基本信息，和项目中使用到的npm包信息，方便其他人了解项目信息、跑起来该项目。

2、安装grunt-cli命令环境和项目里面用到的grunt包

npm install grunt-cli -g

mac下面需要sudo：sudo npm install grunt-cli -g

npm install grunt --save-dev　　// --save-dev：表示该npm包在dev开发环境时需要用到，加这个会在package.json中自动增加相关包描述。

3、安装grunt任务相关的npm包

npm install xxx --save-dev

4、Gruntfile.js任务写法

module.exports = function(grunt){    // 加载需要的任务包    grunt.loadNpmTasks(‘grunt-contrib-less‘);    grunt.loadNpmTasks(‘grunt-contrib-uglify‘);    // 初始化任务    grunt.initConfig({        "less": {  //包名            "a":{  //任务名                "src": "a.less",                "dest": "index.css"            },            "b":{                "src": "b.less",                "dest": "main.css"            }        },        "uglify": {            "a": {                "src": "aa.js",                "dest": "index.js"            }        }    });

}

 总结：最早开始自动化构建前端项目的工具之一，极大提高前端开发过程中的开发效率、更加方便工程化的部署到线上以及优化了线上前端代码。

二、gulp

三、browserify

四、webpack

前端构建工具的用法—grunt、gulp、browserify、webpack