本文整理几个前端工具的用法：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
完。
网友评论