浏览器化 越来越成为开发脚本的可行解决方案 JS 并提出一个以 Node.js的. 编译脚本 浏览器化 很简单。在开发过程中，使用注意允许您即时编译文件。尽管如此，当您想将编译与其他任务集成时咽（比如编译文件减)，你遇到了一个问题：如何使用观察同时 gulp-watch. 答案在本文！

摘要

使用 Gulp 和 Browserify – 级别 0

Name: Agence Web Tremplin Numérique
Price range: $$$

使用咽 et 浏览器化 很简单。您可以使用 Browserify API 或更简单地使用 gulp-browserify，这将使您可以轻松地编译文件。

常量 一口气 = 要求('一饮而尽');
常量 浏览器= 要求('gulp-browserify');
gulp.task('js', 功能() {
gulp.src('源/*.js'，{ 读: false })
.pipe(浏览器化())
.pipe(gulp.dest('。/建造/'))
}）;

您很快就会遇到的问题是，要处理您的文件并即时重新编译它们，您将不得不解析所有文件。这是非常昂贵的。 浏览器化 将必须加载所有文件以及您使用的所有依赖项。你的项目越大，时间就越快。此外，如果您使用变换 COMME 通天塔 时间会膨胀得更快（通过 Babel 提供的所有插件列表）。还有所有的列表 Browserify 转换.

在我向您展示最终解决方案之前，这是经典解决方案的样子 gulp-watch.

gulp.task(“手表”, 功能 () {
gulp.watch(“./src/*.js”[“js”]）。我们（“改变”, 功能(活动) {
领事。日志（`文件 ${事件.路径} 一直 ${event.type}`);
}）;
}）;

使用此解决方案，每次更改其中一个文件时，都会启动整个编译。

注意

注意可以高效地编译你的文件 浏览器化. 它会将每个文件的编译结果保存在内存中（所有链接到您的文件的文件，例如依赖项......）。

更新文件时，它会更新刚刚修改的文件指纹并生成一个捆无需解析所有依赖项。

使用 Gulp、Browserify 和 Watchify – Level ∞

安装 Node.js 依赖项

您可以使用 Yarn 安装它们（如果您真的是最新的 🙂）！

1	$ yarn add browserify gulp vinyl-buffer vinyl-source-stream watchify –dev

否则，你使用的是旧的 NPM 🙉

1	$ npm install browserify gulp vinyl-buffer vinyl-source-stream watchify --save-dev

吞咽文件.js

“严格使用”;
常量 浏览器= 要求(“浏览器化”),
缓冲区 = 要求(“乙烯基缓冲器”),
一口气 = 要求(“吞”),
路径 = 要求(“小路”),
来源 = 要求(“乙烯源流”),
用户 = 要求(“gulp-util”),
观察= 要求(“观察”),
来源 = {
js: “./src/main.js”
},
目的地= {
js: “。/建造/”
};
让 捆绑器；
功能 捆绑(轮廓) {
if （捆绑=== undefiNED）{
if （简介=== “手表”）{
bundler = watchify(browserify(src.js));
} 其他 {
bundler = browserify(src.js);
}
}
捆（）;
}
功能 捆() {
让 开始= 新 日期().getTime(),
_ = 捆绑器
。捆（）
。我们（“错误”，util.log.bind（实用程序， “浏览器错误”))
.pipe(来源(“main.js”))
.pipe(缓冲区())
.pipe(gulp.dest(dest.js)),
时间= 新 日期().getTime() – 开始；
实用程序日志（“[browserify] 重新捆绑” , 使用.colors.cyan(`${时间} 女士`), util.colors.grey(`(${src.js})`））;
回报 _;
}
gulp.task(“js”, 束. 绑定 (空））;
gulp.task(“手表”, 功能 () {
捆绑（“手表”);
bundler.on(“更新”, 捆绑. 绑定 (空））;
}）;
gulp.task(“默认”[“手表”, “js”]）？