在 asp.net MVC web 應用程序中捆綁和縮小 ES6 javascript 文件

Question

我們知道System.Web.optimization不支持 ES6 javascript 文件的打包和壓縮，那么如何支持呢？

Answer 1

1. 將BuildBundlerMinifier NuGet 包安裝到您的項目中。
2. 將具有以下 devDependencies 的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 -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"));

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 Core 中捆綁和縮小靜態資產