随着前端项目的飞速发展，项目越来越大、文件越来越多，前端工程化的工具也越来越多。下面介绍目前最流行的四种构建工具——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" } } }); // 注册多任务
grunt.registerTask('abc', ['less:a', 'uglify']);}
总结：最早开始自动化构建前端项目的工具之一，极大提高前端开发过程中的开发效率、更加方便工程化的部署到线上以及优化了线上前端代码。
二、gulp
1、需要两个文件：
gulpfile.js —— gulp执行任务文件：描述项目会执行的任务。
package.json —— 工程描述文件：描述项目基本信息，和项目中使用到的npm包信息，方便其他人了解项目信息、跑起来该项目。
2、安装gulp-cli命令环境和项目里面用到的gulp包
npm install gulp-cli -g
mac下面安装全局包都需要sudo一下：sudo npm install gulp-cli -g
npm install gulp --save-dev // --save-dev：表示该npm包在dev开发环境时需要用到，加这个会在package.json中自动增加相关包描述。
3、安装gulp任务相关的npm包
npm install xxx --save-dev
4、gulpfile.js任务写法
// 引用需要的包 const gulp = require('gulp');const less = require('gulp-less');const uglify = require('gulp-uglify');gulp.task('less:a', function(){ gulp.src('a.less').pipe(less()).pipe(gulp.dest('css'));});gulp.task('uglify:a', function(){ gulp.src('a.js').pipe(uglify()).pipe(gulp.dest('js'));});// 注册多任务，默认任务用 defaultgulp.task('abc', ['less:a', 'uglify:a']); 优点：1、执行任务比grunt快（原因：读取二进制流通过pipe执行）2、写法上更优雅、简洁、清晰
三、browserify
使用目的：
1、用作模块化（跟requireJs、seaJs类似作用）
2、构建化构建打包工作
3、可以使用node中的一些内置模块如querystring、path、util等，提高工作效率
使用方法：
1、安装browserify-cli命令环境和项目中用到的browserify包
npm install -g browserify-cli
npm install browserify --save-dev
2、项目中自己编写的模块，通过 modules.exports 或 export 抛出去，如：
// sum.jsmodule.exports = function (sum1, sum2){ return sum1+sum2;} 引用时通过 require('./sum') 来使用，如：
// index.jsvar sum = require('./sum.js');var querystring = require('querystring');var parse = "a=1&b=2&c=2";console.log(querystring.parse(parse));console.log(sum(11, 12)); 注意：使用node内置模块或者通过npm下载的包，直接 require('querystring') 即可。但如果是自己编写的模块，需要加 ./ ，require('./sum')
3、编译
// 通过browserify命令，将index.js编译成bundle.jsbrowserify index.js -o bundle.js
4、如果需要 项目自动编译，需要安装 全局watchify这个包
npm install -g watchify
执行时，就不用browserify命令，用watchify命令
watchify index.js -o bundle.js
四、webpack
webpack是近来最火的工程化构建工具，为什么这么火？是因为在webpack中 “一切皆模块” ！
最大的优点也就在这：js、css、less、sass、json、coffer、image、...... 各种类型文件都可以通过loader来处理打包。
1、安装webpack-cli命令环境和项目用刀到的webpack包
npm install -g webpack-cli
npm install webpack --save-dev
2、跟browserify第二步一样，module.export抛出自定义模块，require来模块化引用
3、编译打包
// 跟browserify区别是 没有 -owebpack index.js bundle.js
// -w：监视 -p：压缩代码webpack -w -p index.js bundle.js
4、打包less、sass、image等
1）安装使用的loader的安装包
// 同时安装多个包，可以用 空格 分开npm install less-loader css-loader style-loader --save-dev
2）引用less包等
// index.jsrequire('style-loader!css-loader!less-loader!./less/index.less');// 或者省去loader简写成：require('style!css!less!./less/index.less'); 如果每个文件的loader都这么写的话，太麻烦，可以在webpack的配置文件作配置
5、配置文件名：webpack.config.js
// webpack.config.jsmodule.exports = { module: { loaders: [ // less结尾的文件，使用style、css、less三种loader处理 // 用!连接loader { test: /\.less$/, loader: 'style!css!less'} ] }}; 此时的index.js入口文件引用index.less
require('./less/index.less'); 6、配置文件可以配置入口、输出等
module.exports = { entry: "./index.js", // 入口文件 output: { filename: 'bundle.js' // 出口文件名 }, module: { loaders: [ { test: /\.less$/, loader: 'style!css!less'} ] }}; 7、如果我们要修改完文件后，自动编译、同时刷新浏览器怎么做？
1）安装webpack-dev-server 全局包 和webpack-dev-server 项目包
npm install webpack-dev-server -gnpm install webpack-dev-server --save-dev
2）此时需要使用webpack中另外一个强大的功能——插件，plugins，在配置文件中配置
// 引用webpackvar webpack = require('webpack');module.exports = { entry: "./index.js", // 入口文件 output: { filename: 'bundle.js' // 出口文件名 }, plugins: [ // 自动刷新浏览器用到的插件 new webpack.DefinePlugin({ 'process.env.NODE.ENV':"development" }) ], module: { loaders: [ { test: /\.less$/, loader: 'style!css!less'} ] }}; 3）执行编译
// --inline：表示实时编译webpack-dev-server --inline
8、如果想把命令写的更简单，可以在package.json的script属性中配置
1）如何生成package.json文件
// init 命令让你一步步选择、填写安装工程文件的描述npm init// 或者一步到位npm init --yes
2）配置script属性
{ "name": "webpack", "version": "1.0.0", "description": "", "main": "index.js", "dependencies": { "css-loader": "^0.25.0", "less": "^2.7.1", "less-loader": "^2.2.3", "style-loader": "^0.13.1", "webpack": "^1.13.2" }, "devDependencies": { "webpack-dev-server": "^1.15.1" }, "scripts": { "dev": "webpack-dev-server --inline" }, "keywords": [], "author": "", "license": "ISC"} 此时，执行变成
npm run dev
是不是更简单了，而且在script里面可以方便做多种环境下的配置命令。
以上就是这几种构建工具的基本使用方法，希望大家工作过程中，尽量使用，去体会它在提高效率的同时带给我们编程的快乐感觉！