Bundling and minification of ES6 javascript files in an asp.net MVC web application

Question

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

Answer 1

1. Install BuildBundlerMinifier NuGet package to your project.
2. Add a package.json file, with the following devDependencies, to the root of your project:

 { "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. Run the following npm commands inside your project root:

npm i

npm i -g gulp-cli

4. Add the following gulpfile.js file below to the project root:

 '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. Inside your .csproj file of your project add the following build task:

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

6. Add the following bundleconfig.json file below to the project root(here you can add js, css files need to be minified):

 [ { "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. Inside your BundleConfig.cs you can do the following:

    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. Finally inside your view:

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

My answer based on the following MSDN resources:

Bundling and Minification

Bundle and minify static assets in ASP.NET Core