【问题标题】:Exclude non-minified files from publish in `project.json` with ASP.NET Core使用 ASP.NET Core 在 `project.json` 中从发布中排除非缩小文件
【发布时间】:2016-07-14 09:44:06
【问题描述】:

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

官方文档帮助不大:project.json reference

搜索 globbing patterns,并找到一些带有 gulp 示例的文章,我想出了这个 wwwroot/js/**/*!(*.min.js),但它似乎不起作用。

我的语法错了吗?或者,只是project.jsondotnet 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": []
},

【问题讨论】:

  • 你不应该把它们放在第一位,而是使用 gulp 清除 wwwroot 文件夹并复制正确的文件,然后进行实际部署。 VS 中的默认模板已经提供了最小和非最小任务。使用构建服务器,您可以调用首先清除文件夹的特定任务,然后运行将脚本复制并缩小到 wwwroot 文件夹的最小脚本,然后运行发布/部署脚本
  • @Tseng 为了在开发时使用 js 文件,他们仍然必须位于 wwwroot 以下,对吗?否则,如果他们住在其他地方,您将不得不在每次编辑后运行一项任务。即 Bower 组件的默认位置是 wwwroot/lib,因此可以直接从那里使用它们。我认为缩小后的文件应该复制到 wwwroot 下的不同子文件夹中,然后 wwwroot 下的所有其他开发文件夹都可以从发布中排除。
  • 这也是困扰我的问题。默认结构暗示将开发和生产文件都保存在wwwroot 下。答案可能是更好的网站结构。将/lib 和所有开发文件移到wwwroot 之外,并让一些gulp watch 任务完成脏活。不过,我不介意通过排除配置的“解决方案”。懒得更改当前项目。
  • @JoeAudette:不。当您在 Visual Studio 中使用 bower 或 npm 时,它们会将其依赖项拉入项目根目录中的 bower_modulesnode_modules 方向。通常的工作流程是设置一个 gulp 或 grunt 任务(取决于您使用/喜欢的)并将所需的文件(最小化或非最小化,默认情况下存在不同的任务)复制到 ie wwwroot/lib/** .然后,您可以将特定任务绑定到某些事件,例如“构建前”和“构建后”。最重要的是,您还可以启用监视模式,该模式将在更改时自动缩小/复制您自己的文件
  • 在一个新的 ASP.NET Core MVC 模板上查看gulpfile.js(不是 webapi 模板,它没有 js 文件,也没有 gulp 配置)。它专门用于在 VS 中拥有与在构建服务器上相同的工作流程。并且您可以添加仅由构建服务器在发布/部署时执行的任务(不对应于 VS 相关事件之一)。最后但同样重要的是,您也可以将脚本放入 project.json 以在发布前/发布后触发某些 gulp 任务

标签: asp.net-core publish


【解决方案1】:

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

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

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

这会在项目的根目录中创建 gulpfile.jspackage.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:jsmin:css)和一个通用的 minifier 任务 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 文件夹中的引导文件夹中查找所有*.js*.css 文件并将它们复制到配置为wwwroot/lib/path.libs

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 文件夹)并且当那里的任何文件更改时运行app 任务,所以我们的代码被缩小并复制到wwwroot,并且在我们调试时可用。

【讨论】:

  • 虽然,所有这些信息都不是我想要的,但我非常感谢您在回答中付出的努力。谢谢。
【解决方案2】:

一个简单的替代方案是:

  1. 将未压缩的源重命名为 *.debug.js 和 *.debug.css

  2. 它们现在更容易排除:

"publishOptions": { "include": [ "wwwroot" ], "exclude": [ "wwwroot/**/*.debug.*" ] }

恕我直言,未缩小的来源应该突出并看起来异常。它比压缩代码更值得一个文件名。

这也使构建输出文件与 .Net 构建配置的其余部分保持一致。它清楚地表明您的调试版本很可能包含额外的日志记录和调试实用程序,并且它不适用于生产。

【讨论】:

    猜你喜欢
    • 2020-09-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多