JavaScript文件/库的典型工作流程是使用gulp或grunt任务将必要的文件复制到“wwwroot”文件夹中,这可能发生在某些事件(预构建、后构建、项目打开、清理)上。
在最新的工具中,默认MVC不再包括gulpfile.js,因为最常见的用法是压缩和捆绑js文件,即使没有使用外部库,所以gulp可能对新用户来说有点困难。
但是它可以很容易地重新引入,当您在解决方案资源管理器中右键单击“bundleconfig.json”文件并选择“Bundler & Minifier”>“Convert to Gulp”时。
这将在项目根目录中创建一个gulpfile.js和package.json(nodejs依赖项),并将npm文件夹添加到“Dependencies”部分的解决方案资源管理器中。当您在Windows资源管理器中查看时,您会看到项目根文件夹中的一个node_modules文件夹。那里是npm将下载所有软件包及其依赖项。
生成的gulpfile.js看起来像这样,并且有一些预定义任务。我不会使用此文件作为示例,因为它非常基于bundleconfig.json及其结构,而是使用曾经随旧模板一起提供的gulpfile.json。
"use strict";
var gulp = require("gulp"),
rimraf = require("rimraf"),
concat = require("gulp-concat"),
cssmin = require("gulp-cssmin"),
uglify = require("gulp-uglify");
var webroot = "./wwwroot/";
var paths = {
app: webroot + "app/",
libs: webroot + "lib/",
js: webroot + "js/**/*.js",
minJs: webroot + "js/**/*.min.js",
css: webroot + "css/**/*.css",
minCss: webroot + "css/**/*.min.css",
concatJsDest: webroot + "js/app.min.js",
concatCssDest: webroot + "css/app.min.css"
};
gulp.task("clean:js", function (cb) {
rimraf(paths.concatJsDest, cb);
});
gulp.task("clean:libs", function (cb) {
rimraf(paths.libs, cb);
});
gulp.task("clean:css", function (cb) {
rimraf(paths.concatCssDest, cb);
});
gulp.task("clean", ["clean:js", "clean:css", "clean:libs"]);
gulp.task("min:js", function () {
return gulp.src([paths.js, "!" + paths.minJs], { base: "." })
.pipe(concat(paths.concatJsDest))
.pipe(uglify())
.pipe(gulp.dest("."));
});
gulp.task("min:css", function () {
return gulp.src([paths.css, "!" + paths.minCss])
.pipe(concat(paths.concatCssDest))
.pipe(cssmin())
.pipe(gulp.dest("."));
});
gulp.task("min", ["min:js", "min:css"]);
gulp.task("libs", function (cb) {
gulp.src([
'bootstrap/**/*.js',
'bootstrap/**/*.css',
'jquery/**/*.js`, // we can also limit this to `jquery/dist/**/*.js to only include distribution files
'jquery*.css'
], {
cwd: "node_modules/**"
})
.pipe(gulp.dest(paths.libs));
});
gulp.task("app", function (cb) {
gulp.src([
'app
看起来比实际复杂。有几个压缩的任务(min:js
, min:css
)和一个通用的压缩任务min
,只是按顺序运行所有其他任务。
一个清理任务,可以删除wwwroot
中的输出文件。在从模板转换时,它只会删除默认的wwwroot/js/site.min.js
文件。
由于默认模板中没有使用javascript库,除了已经在wwwroot/lib
文件夹中提供的内容外,包不会以这种方式处理。
因此,您可能首先想要从npm获取bootstrap和jquery,而不是模板提供的静态版本。因此,我们将依赖项添加到package.json
中。
{
"name": "app",
"version": "0.0.0",
"private": true,
"dependencies": {
"bootstrap": "3.3.6",
"jquery": "2.2.0"
},
"devDependencies": {
"gulp": "3.8.11",
"gulp-concat": "2.5.2",
"gulp-cssmin": "0.1.7",
"gulp-uglify": "1.2.0",
"rimraf": "2.2.8"
}
}
例如上面的gulpfile.js
中的libs
任务将复制包中所有必需的文件到wwwroot
。我说的是必需的,因为在包中通常会有未捆绑的用于调试等目的的文件,我们通常不希望它们出现在wwwroot
中(它们可能会变得非常大)。
gulp.task("libs", function (cb) {
gulp.src([
'bootstrap/**/*.js',
'bootstrap/**/*.css'
], {
cwd: "node_modules/**"
})
.pipe(gulp.dest(paths.libs));
});
它将在
node_modules
文件夹中查找
bootstrap
文件夹中的所有
*.js
和
*.css
文件,并将它们复制到配置为
wwwroot/lib/
的
path.libs
中。
app
任务对我们自己的代码执行相同的操作。
clean
清除文件夹(例如,在从调试切换到发布版本之前或发布之前)。
最后,您可以将任务绑定到特定的VS事件。您需要打开“任务运行器资源管理器”视图(视图>其他窗口>任务运行器资源管理器)。在那里,您可以选择一个任务,右键单击它,然后选择“绑定”,并选择一个绑定(在生成之前、在生成之后、清理、项目打开)。它们非常容易理解,“清理”表示当您执行“生成>清理解决方案”时。
现在是发布部分。您可以在发布应用程序时(通过dotnet或Visual Studio)运行某些命令。
在
project.json
中,有一个脚本部分供此使用。
"scripts": {
"prepublish": [ "npm install", "bower install", "gulp clean", "gulp min", "gulp libs" ],
"postpublish": [ "dotnet publish-iis --publish-folder %publish:OutputPath% --framework %publish:FullTargetFramework%" ]
}
每个“prepublish”条目都是一个将要执行的命令。在这个例子中,发布之前,首先要执行“npm install”以恢复所有“npm”依赖项。然后执行“bower install”来安装由bower管理的依赖项(如果您不使用bower并通过npm进行所有操作,请删除它)。
接下来的三个命令是有趣的部分,它们将执行gulp任务。我们可以通过添加“publish”任务来简化此过程。
gulp.task("publish", ['clean', 'libs', 'min']);
"scripts": {
"prepublish": [ "npm install", "bower install", "gulp publish" ],
"postpublish": [ "dotnet publish-iis --publish-folder %publish:OutputPath% --framework %publish:FullTargetFramework%" ]
}
这将复制所有发布所需的文件到wwwroot文件夹中,发布文件,然后调用“postpublish”脚本。
这是gulp的一个简要介绍。它有一个学习曲线,但一旦你掌握了它,它会提高整体工作流程。
这里没有涉及的是添加一个watch
任务,它可以查看某个文件夹(我通常使用项目根目录中的app
文件夹),当那里有任何文件更改时,运行app
任务,这样我们的代码就被压缩并复制到 wwwroot
中,在我们调试时可用。
bower_modules
和node_modules
目录中。通常的工作流程是设置一个gulp或grunt任务(取决于你使用/喜欢哪个),并将所需的文件(默认情况下存在不同的任务,可以是最小化或非最小化的)复制到i.e. wwwroot/lib/**。然后,您可以将特定任务绑定到某些事件,如“构建前”和“构建后”。除此之外,您还可以启用监视模式,以便在更改时自动缩小/复制您自己的文件。 - Tseng