asp.net-core - 使用ASP.NET Core将未缩小的文件排除在`project.json`中的发布中

Question

我正在尝试为publishOptions(ASP.NET Core 1.0 /完整框架)中的project.json找到适当的配置，以便不会发布未缩小的文件。

官方文档并没有多大帮助:project.json reference。

通过搜索lobt模式，并找到带有gulp示例的关节，我想到了这个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": []
},

Answer 1

JavaScript文件/库管理的典型工作流程是使用gulp或grunt任务将必要的文件复制到wwwroot文件夹中，这可能在某些事件(预构建，后构建，项目打开，清除)上发生。

在最新的工具中，默认的MVC不再包含gulpfile.js，因为最常见的用法是缩小和捆绑js文件，即使没有使用外部库也是如此，因此gulp对于新用户而言可能有点不知所措。

但是，当您在解决方案资源管理器中右键单击bundleconfig.json文件并选择“Bundler＆Minifier”>“转换为Gulp”时，它很容易恢复。

这将在项目的根目录中创建一个gulpfile.js和package.json(nodejs依赖项)，并将npm文件夹添加到解决方案资源管理器的“依赖关系”部分。在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']);

它看起来比实际要复杂。有几个minizier任务( min:js， min:css)和一个一般的压缩任务 min，它按顺序运行所有其他任务。

清除任务，从 wwwroot删除输出文件。从模板转换时，它仅删除默认的 wwwroot/js/site.min.js文件。

由于默认模板中没有使用javascript库，除了 wwwroot/lib文件夹中的内容之外，这些包都无法通过这种方式处理。

因此，您可能想做的第一件事是从npm中获取引导程序和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中的 gulpfile.js任务会将包中所有必需的文件复制到 wwwroot中。我说这是必需的，因为在软件包中通常有未捆绑的文件用于调试和填充，我们通常不希望在 wwwroot内使用它们(它们可能会变得很大)。

gulp.task("libs", function (cb) {
    gulp.src([
        'bootstrap/**/*.js',
        'bootstrap/**/*.css'
    ], {
        cwd: "node_modules/**"
    })
    .pipe(gulp.dest(paths.libs));
});

它将在 *.js文件夹的bootstrap文件夹中查找所有 *.css和 node_modules文件，并将它们复制到配置为 path.libs的 wwwroot/lib/中。
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任务。我们还可以通过添加“发布”任务来简化此过程。

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”脚本。

那是一个粗略的介绍。它具有学习曲线，但是一旦您能够正常工作，它就会改善整个工作流程。

这里没有涉及的是添加一个 watch任务，该任务可能会查找到某个文件夹(我通常在项目根目录中使用 app文件夹)，并且当文件发生更改时，运行 app任务，因此我们的代码将被压缩并复制到 wwwroot并且在我们调试时可用。