使用 ASP.NET MVC 网页应用程序如何捆绑和压缩 ES6 JavaScript 文件。

Question

我们知道 System.Web.optimization 不支持 ES6 JavaScript 文件的打包和压缩，那么如何支持呢？

- Simple Code

Answer 1

1. 在你的项目中安装BuildBundlerMinifier2022 NuGet包。
2. 在你的项目根目录下添加一个package.json文件，并加入以下依赖项：

{
  "name": "YourProjectName",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "devDependencies": {
    "del": "^3.0.0",
    "gulp": "^4.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-cssmin": "^0.2.0",
    "gulp-htmlmin": "^3.0.0",
    "gulp-terser": "^1.4.0",
    "gulp-uglify": "^3.0.0",
    "merge-stream": "^1.0.1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

3. 在项目根目录内运行以下npm命令：

npm i

npm i -g gulp-cli

4. 将以下的gulpfile.js文件添加到项目根目录下：

'use strict';

var gulp = require('gulp'),
    concat = require('gulp-concat'),
    cssmin = require('gulp-cssmin'),
    htmlmin = require('gulp-htmlmin'),
    uglify = require('gulp-uglify'),
    merge = require('merge-stream'),
    del = require('del'),
    bundleconfig = require('./bundleconfig.json');
const terser = require('gulp-terser');

const regex = {
    css: /\.css$/,
    html: /\.(html|htm)$/,
    js: /\.js$/
};

gulp.task('min:js', async function () {
    merge(getBundles(regex.js).map(bundle => {
        return gulp.src(bundle.inputFiles, { base: '.' })
            .pipe(concat(bundle.outputFileName))
            //.pipe(uglify())
            .pipe(terser())
            .pipe(gulp.dest('.'));
    }))
});

gulp.task('min:css', async function () {
    merge(getBundles(regex.css).map(bundle => {
        return gulp.src(bundle.inputFiles, { base: '.' })
            .pipe(concat(bundle.outputFileName))
            .pipe(cssmin())
            .pipe(gulp.dest('.'));
    }))
});

gulp.task('min:html', async function () {
    merge(getBundles(regex.html).map(bundle => {
        return gulp.src(bundle.inputFiles, { base: '.' })
            .pipe(concat(bundle.outputFileName))
            .pipe(htmlmin({ collapseWhitespace: true, minifyCSS: true, minifyJS: true }))
            .pipe(gulp.dest('.'));
    }))
});

gulp.task('min', gulp.series(['min:js', 'min:css', 'min:html']));

gulp.task('clean', () => {
    return del(bundleconfig.map(bundle => bundle.outputFileName));
});

gulp.task('watch', () => {
    getBundles(regex.js).forEach(
        bundle => gulp.watch(bundle.inputFiles, gulp.series(["min:js"])));

    getBundles(regex.css).forEach(
        bundle => gulp.watch(bundle.inputFiles, gulp.series(["min:css"])));

    getBundles(regex.html).forEach(
        bundle => gulp.watch(bundle.inputFiles, gulp.series(['min:html'])));
});

const getBundles = (regexPattern) => {
    return bundleconfig.filter(bundle => {
        return regexPattern.test(bundle.outputFileName);
    });
};

gulp.task('default', gulp.series("min"));

在您的项目的.csproj文件中添加以下构建任务：

<Target Name="MyPreCompileTarget" BeforeTargets="Build">   
  <Exec Command="gulp min" />
 </Target>

将以下的 bundleconfig.json 文件添加到项目根目录下（在此处可以添加需要被压缩的js、css文件）：

[
  {
    "outputFileName": "Content/css/site.min.css",
    "inputFiles": [
      "Content/css/site.css"
    ]
  },
  {
    "outputFileName": "Content/js/site.min.js",
    "inputFiles": [
      "Content/js/site.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    "sourceMap": false
  }
]

在您的BundleConfig.cs文件中，您可以执行以下操作：

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
  {


     bundles.Add(new Bundle("~/Content/css/site").Include(
              "~/Content/css/site.css"));


     bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                 "~/Content/lib/jquery/jquery-{version}.js"));

     //使用Bundle而不是ScriptBundle
     bundles.Add(new Bundle("~/Content/js/site").Include(
                 "~/Content/js/site.js"));

     //在开发环境中禁用它
     if (Environment.Development)
     {
         BundleTable.EnableOptimizations = false;
     }
     else
     {
         BundleTable.EnableOptimizations = true;
     }
 }
}

最后，在您的视图中：

@Styles.Render("~/Content/css/site")
@Scripts.Render("~/Content/js/site")

我的答案基于以下 MSDN 资源：

捆绑和缩小

在 ASP.NET Core 中捆绑和缩小静态资源

- Simple Code

---

不确定我做错了什么，框架确实会自动选择生成的*.min.js文件，但仍然尝试再次进行缩小，并且我在服务文件中看到以下消息（在开发工具中）：“缩小失败。返回未缩小的内容。” - mBardos

更新：为避免此问题，请对具有.min.js对的文件使用Bundle而不是ScriptBundle。 - mBardos

此外，似乎 BuildBundlerMinifier 在 gulp 之前尝试进行缩小，并且在某些 ES6 功能（如＃，也称为私有）上出现故障。我不得不从项目的 NuGet 包中卸载它。 - mBardos