使用ASP.NET Core从`project.json`中排除发布的非缩小文件

Question

我试图找到适当的publishOptions内部配置project.json(ASP.NET Core 1.0 /完整框架),以便不发布非缩小文件.

官方文档没有多大帮助:project.json参考.

搜索globbing模式,并找到一些带有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": []
},

Answer 1

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

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

但是当您右键单击bundleconfig.json解决方案资源管理器中的文件并选择"Bundler&Minifier">"Convert to 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']);

它看起来比实际更复杂.有几个minizier任务(min:js,min: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"
  }
}

例如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与*.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%" ]
}

每个条目"预发布"是要执行的一个命令.在此示例中,在发布开始之前,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并在以后可用我们调试它.