使用 ASP.NET Core 在“project.json”中排除未缩小的文件

我正在尝试寻找合适的配置publishOptions inside project.json（ASP.NET Core 1.0/完整框架），以便不发布非缩小文件。

官方文档没有多大帮助：项目.json参考 https://learn.microsoft.com/en-us/dotnet/articles/core/tools/project-json#publishoptions.

搜索通配模式，并找到一些文章gulp例子，我想出了这个wwwroot/js/**/*!(*.min.js)，但似乎不起作用。

我的语法错误吗？或者，只是这样project.json and 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": []
},

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

在最新的工具中，默认的 MVC 不再包含 gulpfile.js，因为最常见的用法是缩小和捆绑 js 文件，即使没有使用外部库，因此 gulp 对于新用户来说可能有点难以承受。

但当您右键单击bundleconfig.json在解决方案资源管理器中创建文件并选择“Bundler & Minifier”>“Convert to Gulp”。

这创建了一个gulpfile.js and 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']);

它看起来比实际情况更复杂。有几个更小的任务（min:js, min:css）和一项通用缩小器任务min它只是按顺序运行所有其他的。

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

由于默认模板中没有使用任何 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"
  }
}

The 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 and *.cssbootstrap 文件夹中的文件node_modules文件夹并将它们复制到path.libs配置为wwwroot/lib/.

The app任务对我们自己的代码执行相同的操作。clean清除文件夹 和 （即在从调试切换到发布版本之前或发布之前）。

最后，您可以将任务绑定到某些 VS 事件。您需要打开“任务运行程序资源管理器”视图（视图 > 其他窗口 > 任务运行程序资源管理器）。您可以在其中选择一个任务并右键单击它，然后选择“绑定”并选择其中一个绑定（构建前、构建后、清理、项目打开）。它们非常自我解释，“清洁”意味着当您执行“构建>清洁解决方案”时。

现在到发布部分。当您发布应用程序时（通过 dotnet 或 Visual Studio），您可以运行某些命令。

In the 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 文件夹中，发布文件，然后调用“发布后”脚本。

这是 gulp 中的粗略介绍。它有一个学习曲线，但一旦你让它发挥作用，它就会改善整个工作流程。

这里没有介绍的是添加一个watch可能会查看某个文件夹的任务（我通常使用app项目根目录中的文件夹），当任何文件发生更改时，运行app任务，因此我们的代码被缩小并复制到wwwroot当我们调试它时可用。