我有一个依赖于 jQuery、React 和 SocketIO 的“中等”Typescript 应用程序(例如,不是微不足道的,但也不是企业级的,有数千行)——以及其他较小的库。
我当前的 gulpfile 是这样的:
var gulp = require("gulp"),
$ = require("gulp-load-plugins")(),
_ = require("lodash"),
tsify = require("tsify"),
browserify = require("browserify"),
source = require("vinyl-source-stream"),
debowerify = require("debowerify"),
watchify = require("watchify"),
lr = require("tiny-lr"),
buffer = require("vinyl-buffer");
var lrServer = lr();
var config = {
scripts: {
base: __dirname + "/Resources/Scripts",
main: "Application.ts",
output: "App.js"
},
styles: {
base: __dirname + "/Resources/Styles",
sheets: ["Application.less", "Preload.less"],
autoprefixer: ["last 2 version", "safari 5", "ie 8", "ie 9", "opera 12.1", "ios 6", "android 4"]
},
publicPath: __dirname + "/wwwroot"
};
function printError(err) {
$.util.log($.util.colors.red.bold(err.type + " " + err.name + ":"), $.util.colors.white(err.message));
this.emit("end");
}
function buildScripts(watch, debug) {
var bundler = browserify({
basedir: config.scripts.base,
debug: false,
entries: [config.scripts.base + "/" + config.scripts.main],
cache: {},
packageCache: {}
})
.plugin(tsify, {
module: "commonjs",
target: "es5",
jsx: "react"
})
.transform(debowerify);
function build() {
return bundler.bundle()
.on("error", printError)
.pipe(source(config.scripts.output))
.pipe($.if(!debug, buffer()))
.pipe($.if(!debug, $.uglify()))
.pipe(gulp.dest(config.publicPath + "/" + "scripts"));
}
if (!watch)
return build();
bundler
.plugin(watchify)
.on("update", function () {
$.util.log($.util.colors.grey("Building scripts..."));
build();
})
.on("time", function (timeMs) {
$.util.log(
$.util.colors.grey("Finished"),
$.util.colors.cyan("'dev.scripts.watch' after"),
$.util.colors.magenta(timeMs.toLocaleString() + " ms"));
});
return build();
}
gulp.task("prod.scripts", function() {
return buildScripts(false, false);
});
gulp.task("dev.scripts", function () {
return buildScripts(false, true);
});
gulp.task("dev.scripts.watch", function () {
return buildScripts(true, true);
});
gulp.task("prod.styles", function () {
return gulp
.src(_.map(config.styles.sheets, function (sheet) { return config.styles.base + "/" + sheet; }))
.pipe($.less())
.on("error", printError)
.pipe($.autoprefixer(config.styles.autoprefixer))
.pipe($.uglifycss())
.pipe(gulp.dest(config.publicPath + "/styles/"));
});
gulp.task("dev.styles", function () {
return gulp
.src(_.map(config.styles.sheets, function (sheet) { return config.styles.base + "/" + sheet; }))
.pipe($.sourcemaps.init())
.pipe($.less())
.on("error", printError)
.pipe($.autoprefixer(config.styles.autoprefixer))
.pipe($.sourcemaps.write())
.pipe(gulp.dest(config.publicPath + "/styles/"));
});
gulp.task("dev.styles.watch", ["dev.styles"], function () {
return gulp.watch(config.styles.base + "/**/*.{css,less}", ["dev.styles"]);
});
gulp.task("dev.watch", ["dev.scripts.watch", "dev.styles.watch"], function () {
lrServer.listen(35729);
gulp.watch(config.publicPath + "/styles/**").on("change", function(file) {
lrServer.changed({ body: { files: [file.path] } });
});
});
gulp.task("dev", ["dev.styles", "dev.scripts"]);
gulp.task("prod", ["prod.styles", "prod.scripts"]);
一切都按预期工作,但是,使用 watch 任务时的构建时间需要很多秒。奇怪的是,我的任务报告脚本的重新编译发生在 500 毫秒以下(“时间”事件上的事件处理程序),但如果我在脑海中数数,它直到三到四秒后才完成.
请注意,在我粘贴现有的 TypeScript 代码之前,我正在快速加载/捆绑 jQuery、React、Moment 和其他我正在使用的库。因此,我认为使用单独的供应商捆绑包不会加快任何速度。此外,不写出源图似乎也不会影响性能。
在我切换到 browserify 之前,我使用 gulp-typescript 进行编译并使用 requirejs 进行模块加载。这些构建花了不到一秒钟的时间。然而,requirejs 因其他原因引起了问题——无论哪种方式,我都想从 AMD 转移到 CommonJS。
目前这不是一个大问题,但随着项目的发展,它肯定会导致我的开发流程出现问题。对于一个只有这么大的项目,处理更大的项目需要多长时间?
此外,它还会导致 Visual Studio 出现问题。这是一个 ASP.NET 5 应用程序,Visual Studio 显然坚持每次更改时都重新加载/重新解析捆绑的 JavaScript 文件,导致每次更改后 IDE 延迟 1-2 秒:在重新编译本身需要 3-4 秒。该脚本正在呈现到我的 wwwroot 文件夹,并且似乎无法使用 ASP.NET 5 工具“排除”脚本子文件夹。
我知道我在某处遗漏了一些东西。一个可能的问题是 tsify 没有使用 typescript 的“项目”功能来实现重新加载,导致 TypeScript 编译器为每次更改重新处理每个文件。
无论如何,我不可能是唯一一个在玩具项目之外使用这些工具的人,所以我在这里问是否有人有更好的解决方案;因为除了这个问题,一切都运作良好。
编辑 - - - - - - - - - - - - - - - -
好吧,我得吃我自己的话了。由于我将我的第三方库捆绑到他们自己的包中,构建时间缩短到大约一秒钟。这是我更新的 gulpfile(注意新的 dev.scripts.vendor 任务和 buildScripts 函数中的 .external 调用)
var gulp = require("gulp"),
$ = require("gulp-load-plugins")(),
_ = require("lodash"),
tsify = require("tsify"),
browserify = require("browserify"),
source = require("vinyl-source-stream"),
debowerify = require("debowerify"),
watchify = require("watchify"),
lr = require("tiny-lr"),
buffer = require("vinyl-buffer");
var lrServer = lr();
var config = {
scripts: {
base: __dirname + "/Resources/Scripts",
main: "Application.ts",
output: "App.js",
vendor: ["react", "jquery", "moment", "socket.io-client", "lodash", "react-dom"]
},
styles: {
base: __dirname + "/Resources/Styles",
sheets: ["Application.less", "Preload.less"],
autoprefixer: ["last 2 version", "safari 5", "ie 8", "ie 9", "opera 12.1", "ios 6", "android 4"]
},
publicPath: __dirname + "/wwwroot"
};
function printError(err) {
$.util.log($.util.colors.red.bold(err.type + " " + err.name + ":"), $.util.colors.white(err.message));
this.emit("end");
}
function buildScripts(watch, debug) {
var bundler = browserify({
basedir: config.scripts.base,
debug: false,
entries: [config.scripts.base + "/" + config.scripts.main],
cache: {},
packageCache: {}
})
.plugin(tsify, {
module: "commonjs",
target: "es5",
jsx: "react"
});
if (debug)
bundler.external(config.scripts.vendor);
function build() {
return bundler.bundle()
.on("error", printError)
.pipe(source(config.scripts.output))
.pipe($.if(!debug, buffer()))
.pipe($.if(!debug, $.uglify()))
.pipe(gulp.dest(config.publicPath + "/" + "scripts"));
}
if (!watch)
return build();
bundler
.plugin(watchify)
.on("update", function () {
$.util.log($.util.colors.grey("Building scripts..."));
build();
})
.on("time", function (timeMs) {
$.util.log(
$.util.colors.grey("Finished"),
$.util.colors.cyan("'dev.scripts.watch' after"),
$.util.colors.magenta(timeMs.toLocaleString() + " ms"));
});
return build();
}
gulp.task("prod.scripts", function() {
return buildScripts(false, false);
});
gulp.task("dev.scripts", ["dev.scripts.vendor"], function () {
return buildScripts(false, true);
});
gulp.task("dev.scripts.vendor", function() {
return browserify({
debug: true,
cache: {},
packageCache: {},
require: config.scripts.vendor
})
.bundle()
.on("error", printError)
.pipe(source("Vendor.js"))
.pipe(gulp.dest(config.publicPath + "/" + "scripts"));
});
gulp.task("dev.scripts.watch", ["dev.scripts.vendor"], function () {
return buildScripts(true, true);
});
gulp.task("prod.styles", function () {
return gulp
.src(_.map(config.styles.sheets, function (sheet) { return config.styles.base + "/" + sheet; }))
.pipe($.less())
.on("error", printError)
.pipe($.autoprefixer(config.styles.autoprefixer))
.pipe($.uglifycss())
.pipe(gulp.dest(config.publicPath + "/styles/"));
});
gulp.task("dev.styles", function () {
return gulp
.src(_.map(config.styles.sheets, function (sheet) { return config.styles.base + "/" + sheet; }))
.pipe($.sourcemaps.init())
.pipe($.less())
.on("error", printError)
.pipe($.autoprefixer(config.styles.autoprefixer))
.pipe($.sourcemaps.write())
.pipe(gulp.dest(config.publicPath + "/styles/"));
});
gulp.task("dev.styles.watch", ["dev.styles"], function () {
return gulp.watch(config.styles.base + "/**/*.{css,less}", ["dev.styles"]);
});
gulp.task("dev.watch", ["dev.scripts.watch", "dev.styles.watch"], function () {
lrServer.listen(35729);
gulp.watch(config.publicPath + "/styles/**").on("change", function(file) {
lrServer.changed({ body: { files: [file.path] } });
});
});
gulp.task("dev", ["dev.styles", "dev.scripts"]);
gulp.task("prod", ["prod.styles", "prod.scripts"]);
但是,我仍然遇到一个奇怪的问题。禁用源映射(现在似乎对速度有影响),我的 on("time", () => {}) 回调报告每次文件更改需要 60-80 毫秒,但它仍然挂起大约一秒钟. 一秒钟是我愿意等待的一切,所以我再次担心随着项目的发展,这种等待也会增加。
当事件报告的事情要小得多时,看看这额外的一秒钟时间花在了什么上会很有趣。也许我会开始深入研究源代码,因为似乎没有人立即给出答案。
另一个问题这只是一个旁注,但 debowerify 不再适用于此。使用 debowerify+bower 时,它将继续在最终输出中呈现所需的模块,即使该模块已列在“外部”列表中。因此,目前使用此设置,我只能使用 npm 模块,除非我可以为我的应用程序包添加更多编译时间。
另外,我了解到 debowerify 将覆盖 npm 模块,并且它基于 bower_components 的目录列表,而不是您的 bower 配置文件。我在 npm 中安装了 jQuery,并且只在 bower 中安装了引导程序;但是由于 bootstrap 将 jQuery 作为依赖项下拉,因此 bower jQuery 模块优先于 NPM jQuery 加载。只是给人们提个醒。