gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 19:03:55 28 4
gpt4 key购买 nike

我们知道 System.Web.optimization 不支持 ES6 javascript 文件打包和缩小,那么如何支持呢?

最佳答案

  • 安装 BuildBundlerMinifier NuGet 包到您的项目。
  • 添加 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"
    }

  • 在项目根目录中运行以下 npm 命令:

  • npm i

    npm i -g gulp-cli


  • 添加以下内容 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"));

    //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;
    }
    }
    }
  • 最后在您的 View 中:
    @Styles.Render("~/Content/css/site")
    @Scripts.Render("~/Content/js/site")

  • 我的回答基于以下 MSDN 资源:
    Bundling and Minification
    Bundle and minify static assets in ASP.NET Core

    关于c# - 在 asp.net MVC web 应用程序中捆绑和缩小 ES6 javascript 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64156737/

    28 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com