隨著前端項(xiàng)目的飛速發(fā)展，項(xiàng)目越來越大、文件越來越多，前端工程化的工具也越來越多。下面介紹目前最流行的四種構(gòu)建工具——grunt、gulp、browserify、webpack

所有的構(gòu)建工具都是基于NodeJs和Npm，所以使用下面任何工具都需要安裝Node

一、grunt

1、需要兩個(gè)文件：

Gruntfile.js —— grunt執(zhí)行任務(wù)文件：描述項(xiàng)目會執(zhí)行的任務(wù)。

package.json —— 工程描述文件：描述項(xiàng)目基本信息，和項(xiàng)目中使用到的npm包信息，方便其他人了解項(xiàng)目信息、跑起來該項(xiàng)目。

2、安裝grunt-cli命令環(huán)境和項(xiàng)目里面用到的grunt包

npm install grunt-cli -g

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

npm install grunt --save-dev　　// --save-dev：表示該npm包在dev開發(fā)環(huán)境時(shí)需要用到，加這個(gè)會在package.json中自動增加相關(guān)包描述。

3、安裝grunt任務(wù)相關(guān)的npm包

npm install xxx --save-dev

4、Gruntfile.js任務(wù)寫法

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

　　 // 注冊多任務(wù)
　　 grunt.registerTask('abc', ['less:a', 'uglify']);

}

?總結(jié)：最早開始自動化構(gòu)建前端項(xiàng)目的工具之一，極大提高前端開發(fā)過程中的開發(fā)效率、更加方便工程化的部署到線上以及優(yōu)化了線上前端代碼。

二、gulp

1、需要兩個(gè)文件：

gulpfile.js —— gulp執(zhí)行任務(wù)文件：描述項(xiàng)目會執(zhí)行的任務(wù)。

package.json —— 工程描述文件：描述項(xiàng)目基本信息，和項(xiàng)目中使用到的npm包信息，方便其他人了解項(xiàng)目信息、跑起來該項(xiàng)目。

2、安裝gulp-cli命令環(huán)境和項(xiàng)目里面用到的gulp包

npm install gulp-cli -g

mac下面安裝全局包都需要sudo一下：sudo npm install gulp-cli -g

npm install gulp --save-dev　　// --save-dev：表示該npm包在dev開發(fā)環(huán)境時(shí)需要用到，加這個(gè)會在package.json中自動增加相關(guān)包描述。

3、安裝gulp任務(wù)相關(guān)的npm包

npm install xxx --save-dev

4、gulpfile.js任務(wù)寫法

// 引用需要的包
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')); }); // 注冊多任務(wù)，默認(rèn)任務(wù)用 default gulp.task('abc', ['less:a', 'uglify:a']);

?優(yōu)點(diǎn)：1、執(zhí)行任務(wù)比grunt快（原因：讀取二進(jìn)制流通過pipe執(zhí)行）2、寫法上更優(yōu)雅、簡潔、清晰?

三、browserify

使用目的：

1、用作模塊化（跟requireJs、seaJs類似作用）

2、構(gòu)建化構(gòu)建打包工作

3、可以使用node中的一些內(nèi)置模塊如querystring、path、util等，提高工作效率

使用方法：?

1、安裝browserify-cli命令環(huán)境和項(xiàng)目中用到的browserify包

npm install -g browserify-cli?

npm install browserify --save-dev

2、項(xiàng)目中自己編寫的模塊，通過 modules.exports 或 ?export 拋出去，如：

// sum.js module.exports = function (sum1, sum2){return sum1+sum2; }

引用時(shí)通過 require('./sum') 來使用，如：

// index.js var 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內(nèi)置模塊或者通過npm下載的包，直接 require('querystring') 即可。但如果是自己編寫的模塊，需要加 ./ ?，require('./sum')

3、編譯

// 通過browserify命令，將index.js編譯成bundle.js browserify index.js -o bundle.js

4、如果需要 項(xiàng)目自動編譯，需要安裝 全局watchify這個(gè)包

npm install -g watchify

執(zhí)行時(shí)，就不用browserify命令，用watchify命令

watchify index.js -o bundle.js

四、webpack

webpack是近來最火的工程化構(gòu)建工具，為什么這么火？是因?yàn)樵趙ebpack中 ?“一切皆模塊” ！

最大的優(yōu)點(diǎn)也就在這：js、css、less、sass、json、coffer、image、...... 各種類型文件都可以通過loader來處理打包。

1、安裝webpack-cli命令環(huán)境和項(xiàng)目用刀到的webpack包

npm install -g webpack-cli npm install webpack --save-dev

2、跟browserify第二步一樣，module.export拋出自定義模塊，require來模塊化引用

3、編譯打包

// 跟browserify區(qū)別是 沒有 -o webpack index.js bundle.js // -w：監(jiān)視 -p：壓縮代碼 webpack -w -p index.js bundle.js

4、打包less、sass、image等

　　1）安裝使用的loader的安裝包

// 同時(shí)安裝多個(gè)包，可以用 空格 分開 npm install less-loader css-loader style-loader --save-dev

　　2）引用less包等

// index.js require('style-loader!css-loader!less-loader!./less/index.less'); // 或者省去loader簡寫成： require('style!css!less!./less/index.less');

如果每個(gè)文件的loader都這么寫的話，太麻煩，可以在webpack的配置文件作配置

5、配置文件名：webpack.config.js

// webpack.config.js module.exports = {module: {loaders: [// less結(jié)尾的文件，使用style、css、less三種loader處理// 用!連接loader{ test: /\.less$/, loader: 'style!css!less'}]} };

此時(shí)的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、如果我們要修改完文件后，自動編譯、同時(shí)刷新瀏覽器怎么做？

　　1）安裝webpack-dev-server 全局包 和webpack-dev-server 項(xiàng)目包

npm install webpack-dev-server -g npm install webpack-dev-server --save-dev

　　2）此時(shí)需要使用webpack中另外一個(gè)強(qiáng)大的功能——插件，plugins，在配置文件中配置

// 引用webpack var 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）執(zhí)行編譯

// --inline：表示實(shí)時(shí)編譯 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" }

　　此時(shí)，執(zhí)行變成?

npm run dev

　　是不是更簡單了，而且在script里面可以方便做多種環(huán)境下的配置命令。

　　

以上就是這幾種構(gòu)建工具的基本使用方法，希望大家工作過程中，盡量使用，去體會它在提高效率的同時(shí)帶給我們編程的快樂感覺！

?

轉(zhuǎn)載于:https://www.cnblogs.com/souyidai/p/util_1.html

總結(jié)

以上是生活随笔為你收集整理的前端构建工具的用法—grunt、gulp、browserify、webpack的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。