幾個前端構(gòu)建工具的用法整理

本文整理幾個前端工具的用法：Rollup肿嘲、Gulp 和 Browserify。

1. Rollup 的使用

特性

下一代 JavaScript 打包工具
Tree Shaking

安裝

全局安裝

npm install rollup -g
yarn global add rollup

在項目中安裝

npm install rollup -D
yarn add rollup -D

指定打包的規(guī)范

Rollup 支持以下模塊化規(guī)范：

AMD
CommonJS
ES6 Modules
IIFE
UMD

通過 -f 指令可以指定打包的規(guī)范，-f 指令是 --output.format 的縮寫帘皿。

rollup main.js -f amd|cjs|es|iife|umd

配置文件

在命令行指定參數(shù)太麻煩，因此可以寫在一個配置文件中。通過 -c 或者 --config 指令可以指定配置文件圃庭，默認(rèn)使用 rollup.config.js 作為配置文件。
Rollup 在打包時會自行處理配置文件，因此在 rollup.config.js 中可以使用 export default 導(dǎo)出配置項剧腻。
使用 rollup -c 可以進行打包拘央。

其他特性

Rollup 還有其他的一些特性，譬如插件機制书在，以及更詳細(xì)的 API 使用灰伟，這方面的內(nèi)容可以到 Rollup 的官網(wǎng)或者中文文檔去查看。

常用用途

Rollup 打包后的代碼更為純粹儒旬，沒有太多多余的東西栏账，因此我常將 Rollup 用于 Node 代碼中，其 Tree Shaking 特性可以幫助我們?nèi)コ芏嗳哂啻a栈源，一般和 Gulp 和 Babel 結(jié)合使用挡爵。

2. Gulp 的使用

特性

基于 Task（任務(wù)）工作
插件豐富、配置方便

安裝

全局安裝

npm install gulp -g
yarn global add gulp

在項目中安裝

npm install gulp -D
yarn add gulp -D

注：使用 Gulp 時需要同時在全局和項目中安裝凉翻。

配置文件

默認(rèn)情況下了讨，Gulp 使用 gulpfile.js 作為配置文件，因此需要新建一個制轰。

gulp.task

Gulp 是基于 Task 的前计，我們需要在 gulpfile.js 中指定不同的 Task，以完成不同的工作垃杖。
Gulp 要求至少提供一個默認(rèn)的 Task（default）男杈。
下面是一個配置了默認(rèn) Task 的文件：

const gulp = require("gulp");
gulp.task("default",() => {
    gulp.src("src/**/*.js")
        .pipe(gulp.dest("build"))
})

指定排除文件

如果不想 Gulp 編譯某些文件，可以進行排除：

const gulp = require("gulp");
gulp.task("default",() => {
    gulp.src(["src/**/*.js","!src/lib/*.js"])
        .pipe(gulp.dest("build"))
})

指定依賴任務(wù)

在使用 gulp.task 時调俘，還可以指定依賴的任務(wù)伶棒，這些任務(wù)將會在當(dāng)前任務(wù)開始之前執(zhí)行。

const gulp = require("gulp");
gulp.task("default",["test1","test2"],() => {
    gulp.src("src/**/*.js")
        .pipe(gulp.dest("build"))
})

gulp.task("test1",()=>{
    console.log("test1")
})

gulp.task("test2",()=>{
    console.log("test2")
})

注：task1 和 task2 屬于異步任務(wù)彩库，因此無法保證 task1 一定會在 task2 之前執(zhí)行肤无。要想某個任務(wù)在另一個任務(wù)之前執(zhí)行，可以將另一個任務(wù)寫在依賴任務(wù)中：

const gulp = require("gulp");
gulp.task("default",["test2"],() => {
    console.log("end")
})

gulp.task("test1",()=>{
    console.log("test1")
})

gulp.task("test2",["test1"],()=>{
    console.log("test2")
})

gulp.watch

使用 gulp.watch 可以監(jiān)聽文件的變化骇钦，當(dāng)文件發(fā)生變化時宛渐，就可以自動執(zhí)行任務(wù)。

const gulp = require("gulp");
const del = require("del");
// 清除構(gòu)建目錄
gulp.task("clean",() => {
    del(["build/**/*"]);
})

// 編譯
gulp.task("compile",["clean"],()=>{
    gulp.src(["src/**/*.js","!src/lib/*.js"])
    .pipe(gulp.dest("build"))
})

// 監(jiān)控文件變化
gulp.task("autoWatch",()=>{
    return gulp.watch(["src/**/*.js","!src/lib/*.js"],["compile"])
})

gulp.task("default",["autoWatch"])

上例中眯搭，我們對文件內(nèi)容進行了監(jiān)聽窥翩，當(dāng)文件內(nèi)容發(fā)生變化時，就會再次執(zhí)行編譯鳞仙。

3. Browserify 的使用

特性

可以將 Node 上的模塊移植到瀏覽器上使用寇蚊，或者說，可以將 CommonJS 規(guī)范的模塊轉(zhuǎn)換成瀏覽器認(rèn)識的模塊棍好。

安裝

全局安裝

npm install browserify -g
yarn global add browserify

在項目中安裝

npm install browserify -D
yarn add browserify -D

使用

使用 Browserify 進行轉(zhuǎn)換

browserify src/main.js -o build/bundle.js

瀏覽器模塊化

browserify -r ./src/main.js:main -r ./src/test.js:custom-test > build/bundle.js

通過 文件名:模塊名 指定導(dǎo)出的模塊名仗岸。
然后可以在瀏覽器端通過 require 方法導(dǎo)入模塊：

<script>
    const main = require("main")
    const test = require("custom-test")
    main()
    test()
</script>

通過 -r 參數(shù)允耿，我們讓瀏覽器具備了使用 require 方法導(dǎo)入模塊的能力。

附：參考資料
Gulp 文檔
附：Github 源碼地址
https://github.com/charleylla/charley-learn-pack-tools

完扒怖。