在asp.net MVC web应用程序中捆绑和缩小ES6 javascript文件

Question

我们知道系统。Web.optimization不支持ES6 javascript文件绑定和缩小，那么如何支持呢？

Answer 1

1. 将BuildBundlerMinifier2022NuGet包安装到您的项目中
2. 将package.json文件和以下devDependencies添加到项目的根目录中：

{
"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吞咽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"));

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

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

6. 将下面的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
}
]

7. 在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"));
   //use Bundle instead of ScriptBundle
   bundles.Add(new Bundle("~/Content/js/site").Include(
   "~/Content/js/site.js"));
   //disable it for development environment
   if (Environment.Development)
   {
   BundleTable.EnableOptimizations = false;
   }
   else
   {
   BundleTable.EnableOptimizations = true;
   }
   }
   }
   

8. 最后进入您的视野：

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

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

捆绑和最小化

在ASP中捆绑和缩小静态资产。NET核心