我有一个中等规模的Typescript应用程序(不是微不足道的,也不是企业级的,有成千上万行代码),依赖于jQuery、React和SocketIO等许多小型库。
我的当前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"]);
一切都符合预期,但使用观察任务时的构建时间需要很多秒。奇怪的是,我的任务报告说脚本重新编译发生在500ms以下(“time”事件上的事件处理程序),但如果我用头脑计算,它要三到四秒才能完成。
请注意,在我粘贴现有的TypeScript代码之前,我非常快地加载/捆绑了jQuery,React,Moment和其他库。因此,我不认为使用单独的供应商包会加速任何内容。此外,不写出sourcemaps似乎也不会影响性能。
在切换到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的“project”功能来实现重新加载,从而导致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"]);
然而,我仍然遇到了一个奇怪的问题。当禁用sourcemaps(现在似乎会影响速度)时,我的on("time", () => {})回调为每个文件更改报告60-80毫秒,但它仍然会卡顿大约一秒钟。一秒钟是我愿意等待的时间,所以我担心随着项目的增长,这个等待时间也可能增加。
有趣的是,当事件报告较小的内容时,这额外的一秒钟时间被花费在什么地方。也许我会开始深入挖掘源代码,因为似乎没有人能够立即回答这个问题。
另外,还有一个问题,这只是一个旁注,但debowerify不再与此兼容。使用debowerify+bower时,它将继续在最终输出中呈现所需的模块,即使该模块在“external”列表中列出。因此,目前使用这种设置,我只能使用npm模块,除非我可以接受将更多编译时间添加到我的应用程序包中。
另外,我了解到debowerify将覆盖npm模块,并且它基于bower_components的目录列表,而不是您的bower配置文件。我已经在npm中安装了jQuery,只有在bower中安装了bootstrap;但由于bootstrap作为依赖项拉取了jQuery,因此bower jQuery模块被优先加载而不是NPM jQuery。提醒大家注意一下。
var debug = require('gulp-debug');
和.pipe(debug({title: 'your message:'}))
来找出哪些部分很慢怎么样?我很惊讶的是,源映射不会很慢,在我的电脑上它会大大减缓构建过程。我们使用 gulp-typescript,初始编译需要长达10秒的时间,但增量编译只需要1.5秒左右,非常舒适。 - MartyIX