我正在尝试为publishOptions
内部project.json
找到一个正确的配置(ASP.NET Core 1.0 / Full Framework),以便不会发布非缩小文件。
官方文件没有多大帮助:project.json reference。
搜索通配模式,并找到一些带有gulp
示例的artilcles,我想出了这个wwwroot/js/**/*!(*.min.js)
,但它似乎不起作用。
我的语法错了吗?或者,只是project.json
和dotnet publish
不支持此语法?
"publishOptions": {
"include": [
"wwwroot",
"Views",
"Areas/**/Views",
"appsettings.json",
"web.config"
],
"exclude": [
"wwwroot/lib",
"wwwroot/js/**/*!(*.min.js)",
"wwwroot/css/*.less",
"wwwroot/_references.js"
],
"includeFiles": [],
"excludeFiles": []
},
答案 0 :(得分:6)
JavaScript文件/库管理的典型工作流程是使用gulp或grunt任务将必要的文件复制到wwwroot
文件夹中,这可能发生在某些事件上(预构建,后构建,项目打开,清理)。
在最新的工具中,默认的MVC不再包含gulpfile.js,因为最常见的用法是缩小和捆绑js文件,即使没有使用外部库,因此gulp可能对新用户来说有点压倒性。
但是当您右键单击解决方案资源管理器中的bundleconfig.json
文件并选择“Bundler& Minifier”>时,可以很容易地将其恢复。 “转换为Gulp”。
这会在项目的根目录中创建gulpfile.js
和package.json
(nodejs依赖项),并将npm文件夹添加到Solution Explorer的“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/**.js'
])
.pipe(gulp.dest(paths.app));
});
gulp.task("default", ['clean', 'libs']);
它看起来比实际更复杂。有几个小型任务(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"
}
}
例如,上面libs
的{{1}}任务会将包的所有必需文件复制到gulpfile.js
。我说需要,因为在包中经常有用于调试和填充的非捆绑文件,我们通常不希望在wwwroot
内(它们可以变大)。
wwwroot
它会查找gulp.task("libs", function (cb) {
gulp.src([
'bootstrap/**/*.js',
'bootstrap/**/*.css'
], {
cwd: "node_modules/**"
})
.pipe(gulp.dest(paths.libs));
});
文件夹中bootstrap文件夹中的所有*.js
和*.css
个文件,然后将其复制到node_modules
,path.libs
配置为wwwroot/lib/
。
app
任务对我们自己的代码执行相同操作。 clean
清除文件夹(即在从调试版本发布到发布版本之前或发布之前)。
最后,您可以将任务绑定到某些VS事件。您需要打开“Task Runner Explorer”视图(View> Other Window> Task Runner Explorer)。在那里,您可以选择一个任务并右键单击它,然后“绑定”并选择其中一个绑定(在构建之前,之后构建,清理,打开项目)。他们非常自我解释,“清洁”意味着你做“构建>清洁解决方案”。
现在到出版部分。您可以在发布应用程序时(通过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任务。我们还可以通过添加“发布”任务来简化此操作。
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
文件夹),当任何文件发生更改时,运行{{1任务,所以我们的代码被微调并复制到app
,并在我们调试它时可用。
答案 1 :(得分:1)
一个简单的替代方案是:
将未经授权的源重命名为* .debug.js和* .debug.css
现在更容易排除它们:
"publishOptions": {
"include": [
"wwwroot"
],
"exclude": [
"wwwroot/**/*.debug.*"
]
}
恕我直言的未经证实的消息来源应该突然出现并且看起来异常。它比minified代码更值得文件名疣。
这也使构建输出文件与.Net构建配置的其余部分保持一致。它清楚地表明,您的调试版本可能包含额外的日志记录和调试实用程序,而且不适用于生产。