几个前端构建工具的用法整理

本文整理几个前端工具的用法：Rollup、Gulp 和 Browserify。

1. Rollup 的使用

特性

下一代 JavaScript 打包工具
Tree Shaking

安装

全局安装

npm install rollup -g
yarn global add rollup

在项目中安装

npm install rollup -D
yarn add rollup -D

指定打包的规范

Rollup 支持以下模块化规范：

AMD
CommonJS
ES6 Modules
IIFE
UMD

通过 -f 指令可以指定打包的规范，-f 指令是 --output.format 的缩写。

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

配置文件

在命令行指定参数太麻烦，因此可以写在一个配置文件中。通过 -c 或者 --config 指令可以指定配置文件，默认使用 rollup.config.js 作为配置文件。
Rollup 在打包时会自行处理配置文件，因此在 rollup.config.js 中可以使用 export default 导出配置项。
使用 rollup -c 可以进行打包。

其他特性

Rollup 还有其他的一些特性，譬如插件机制，以及更详细的 API 使用，这方面的内容可以到 Rollup 的官网或者中文文档去查看。

常用用途

Rollup 打包后的代码更为纯粹，没有太多多余的东西，因此我常将 Rollup 用于 Node 代码中，其 Tree Shaking 特性可以帮助我们去除很多冗余代码，一般和 Gulp 和 Babel 结合使用。

2. Gulp 的使用

特性

基于 Task（任务）工作
插件丰富、配置方便

安装

全局安装

npm install gulp -g
yarn global add gulp

在项目中安装

npm install gulp -D
yarn add gulp -D

注：使用 Gulp 时需要同时在全局和项目中安装。

配置文件

默认情况下，Gulp 使用 gulpfile.js 作为配置文件，因此需要新建一个。

gulp.task

Gulp 是基于 Task 的，我们需要在 gulpfile.js 中指定不同的 Task，以完成不同的工作。
Gulp 要求至少提供一个默认的 Task（default）。
下面是一个配置了默认 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"))
})

指定依赖任务

在使用 gulp.task 时，还可以指定依赖的任务，这些任务将会在当前任务开始之前执行。

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 属于异步任务，因此无法保证 task1 一定会在 task2 之前执行。要想某个任务在另一个任务之前执行，可以将另一个任务写在依赖任务中：

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 可以监听文件的变化，当文件发生变化时，就可以自动执行任务。

const gulp = require("gulp");
const del = require("del");
// 清除构建目录
gulp.task("clean",() => {
    del(["build/**/*"]);
})

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

// 监控文件变化
gulp.task("autoWatch",()=>{
    return gulp.watch(["src/**/*.js","!src/lib/*.js"],["compile"])
})

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

上例中，我们对文件内容进行了监听，当文件内容发生变化时，就会再次执行编译。

3. Browserify 的使用

特性

可以将 Node 上的模块移植到浏览器上使用，或者说，可以将 CommonJS 规范的模块转换成浏览器认识的模块。

安装

全局安装

npm install browserify -g
yarn global add browserify

在项目中安装

npm install browserify -D
yarn add browserify -D

使用

使用 Browserify 进行转换

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

浏览器模块化

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

通过 文件名:模块名 指定导出的模块名。
然后可以在浏览器端通过 require 方法导入模块：

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

通过 -r 参数，我们让浏览器具备了使用 require 方法导入模块的能力。

附：参考资料
Gulp 文档
附：Github 源码地址
https://github.com/charleylla/charley-learn-pack-tools

完。