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

隨著前端項目的飛速發展，項目越來越大、文件越來越多，前端工程化的工具也越來越多。下面介紹目前最流行的四種構建工具——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'));
});
// 注冊多任務，默認任務用 default
gulp.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.js
module.exports = function (sum1, sum2){return sum1+sum2;
}

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

3、編譯

// 通過browserify命令，將index.js編譯成bundle.js
browserify 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區別是 沒有 -o
webpack 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.js
require('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.js
module.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 -g
npm install webpack-dev-server --save-dev

　　2）此時需要使用webpack中另外一個強大的功能——插件，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）執行編譯

// --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"
}