标签: bundling-and-minification

在我们的MVC3 Web应用程序中,我们对整个JS中的日志记录方法(只包装console.log)进行了大量调用,并且在构建测试和生产版本时我想从JavaScript中删除它们.

目前我们正在使用捆绑和缩小nuget包来捆绑和缩小我们的JS到一个大的缩小文件,但我想让它删除对日志记录方法的调用.

我们确实有一个机制可以用空函数替换日志记录方法,因此它们不会在生产中做任何工作,但仍会调用它们并传入各种参数.除此之外,还有"大"字符串传递,可以删除,减少文件大小.

在我看来,理想的解决方案是以某种方式解析JavaScript并检测/删除对这些方法的调用.优选地在某种JavaScript引擎中而不仅仅是正则表达式.

无论哪种方式,我只是希望在生产中提供的最终JavaScript中删除对我的日志记录方法的调用.有谁知道我如何完成这个额外的缩小？

我有一个ASP.NET Web表单应用程序,使用Microsoft.AspNet.Web.Optimization包中的新Bundling和Minification功能在.NET 4.5上运行.

到目前为止,这是一个非常简单的设置,只需一个捆绑.

BundleConfig.cs

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle("~/bundles/send").Include(
        "~/scripts/GrowingInput.js", 
        "~/scripts/textboxlist/TextboxList.js",
        "~/scripts/textboxlist/TextboxList.Livesearch.js",
        "~/scripts/combobox/ui.combobox.js",
        "~/scripts/jquery-ui-timepicker.js",
        "~/scripts/msp.send.js"));
}

Global.asax中

protected void Application_Start(object sender, EventArgs e)
{
    BundleConfig.RegisterBundles(BundleTable.Bundles);
}

Send.aspx

<%: Scripts.Render("/bundles/send") %>

这始终在Web浏览器中呈现为<script src="/bundles/send"></script>忽略在web.config中将debug设置为true还是false.

我已经尝试添加BundleTable.EnableOptimizations = false;到BundleConfig.cs以强制捆绑,但这没有任何区别.

希望得到以下工作,就像在MVC网站中一样(Microsoft文档似乎建议Web表单应该是相同的).

1. 使用调试标志打开/关闭捆绑
2. 附加缓存清除？v = xxx查询字符串以进行版本控制.

我正在 .net mvc 4 中编写一个应用程序。我开始使用 .net 捆绑，但在缩小时遇到了一些问题。由于变量的名称被缩短为一个字母，因此变量名称相同（来自不同的脚本）会产生一些冲突，从而产生各种烦人的错误和错误。这是一个已知的问题，还是我错过了什么？有没有办法允许在不更改变量名称的情况下缩小脚本（空格和 stuf）？谢谢！

我正在开发一个 ASP.Net 5 项目，他们似乎已经转向使用 GULP 捆绑并缩小 CSS 和 JavaScrpt 文件。我想测试一下以确保它有效，但它似乎不起作用。在我构建包后，找不到site.min.js和文件。site.min.css运行网络应用程序不会提取文件并处理它们。我可能错过了一些愚蠢的小东西，但我已经浏览了一些教程，但看不到它。

gulpfile.js：

/// <binding Clean='clean' />
"use strict";

var gulp = require("gulp"),
    rimraf = require("rimraf"),
    concat = require("gulp-concat"),
    cssmin = require("gulp-cssmin"),
    uglify = require("gulp-uglify");

var paths = {
    webroot: "./wwwroot/"
};

paths.js = paths.webroot + "js/**/*.js";
paths.minJs = paths.webroot + "js/**/*.min.js";
paths.css = paths.webroot + "css/**/*.css";
paths.minCss = paths.webroot + "css/**/*.min.css";
paths.concatJsDest = paths.webroot + "js/site.min.js";
paths.concatCssDest = paths.webroot + "css/site.min.css";

gulp.task("clean:js", function (cb) {
    rimraf(paths.concatJsDest, cb); …

我正在使用Angular2和TypeScript在Visual Studio 2015中开发Web应用程序.我正在使用Gulp生成分布式缩小文件.使用Angular2,我看到,没有必要使用Visual Studio或Gulp来转换TypeScript,因为SystemJs在导入模块时会这样做.js

现在的问题是:

SystemJs如何处理缩小,丑化等问题？

System.import('app/main').then(null, console.error.bind(console));

我如何缩小或丑化这个？

我使用jquery创建了一些基本脚本,当放在我的一个MVC视图中的标记下面时,它工作正常.我想将这些脚本移动到Scripts文件夹中的单独文件中,因此我创建了一个名为"CustomJquery.js"的文件并将其放在Scripts文件夹中.我在'BundleConfig.cs'中为它创建了一个包,但是当我使用@ Scripts.Render("〜/ bundles/CustomJquery")从我的视图调用时,我的脚本不再起作用了.我甚至尝试将它们放在'_Layout.cshtml'中,但仍然没有运气.请参阅下面的代码.任何帮助将不胜感激.谢谢

Scripts文件夹中的CustomJquery.js

$("#Button").click(function () {
alert("hello");
});

Index.cshtml

<input id="Button" type="submit" value="Test" />

@Scripts.Render("~/bundles/CustomJquery")

BundleConfig.cs

 bundles.Add(new ScriptBundle("~/bundles/CustomJquery").Include(
                "~/Scripts/CustomJquery.js"));

更新

是的,我可以在Google Chrome工具的"来源"标签中看到我的"CustomJquery.js".

根据'Elements'选项卡,我也可以在标记中看到脚本src

<script src="/Scripts/CustomJquery.js"></script>
</section>
</div>

请帮忙

BundleConfig.cs

bundles.Add(new StyleBundle("~/Content/styles").Include(
   "~/Content/css/test.css"
   )
);

_布局.cshtml

@Scripts.Render("~/Content/styles")

测试.css

body{
font-size: 75%;
color: #232323;
text-align: left;
margin: 0px;
padding: 0px;}

这就是 Chrome 显示为正在加载的内容，给我一个关于意外令牌 { 的语法错误：

body{font-size:75%;color:#232323;text-align:left;margin:0;padding:0}

我的单页应用上有以下错误:

http://screencast.com/t/sEYhyowXTqxR

因此页面看起来很丑陋.

我的bundleconfig.cs我没有修改它:

 public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.IgnoreList.Clear();
            AddDefaultIgnorePatterns(bundles.IgnoreList);

            bundles.Add(
                new ScriptBundle("~/scripts/modernizr")
                    .Include("~/scripts/modernizr-{version}.js"));

            bundles.Add(
              new ScriptBundle("~/scripts/vendor")
                .Include("~/scripts/jquery-{version}.min.js")
                .Include("~/scripts/bootstrap.min.js")
              );

            bundles.Add(
             new StyleBundle("~/Content/css")
                .Include("~/Content/ie10mobile.css") // Must be first. IE10 mobile viewport fix
                .Include("~/Content/bootstrap.min.css")
                .Include("~/Content/bootstrap-responsive.min.css")
                .Include("~/Content/font-awesome.min.css")
                .Include("~/Content/styles.css")
             );
        }

和我的VS :(一切看起来都很好)

http://screencast.com/t/TQFAPCEsV

更新:

这发生在我在web.config上将调试模式更改为false时,当调试模式为true时,网页呈现正常并且网络选项卡上没有显示错误

我有一个gulp任务,它可以缩小CSS文件并将它们连接到一个文件:

gulp.task('minify-css', function() {
'use strict';
var pathsToMinifyAndConcat = [
    'css/index.css'
];

var pathsToConcatOnly = [
    'lib/css/font-awesome-4.3.0/font-awesome.min.css'
];

var minifyFiles = require('gulp-cssnano');
var concatAllFilesToOneFile = require('gulp-concat');
return gulp.src(
        []
            .concat(pathsToMinifyAndConcat)
            .concat(pathsToConcatOnly)
    )
    .pipe(minifyFiles())
    .pipe(concatAllFilesToOneFile('application.min.css'))
    .pipe(gulp.dest('dist'));
});

但是,如果某些文件已经缩小(font-awesome.min.css例如),则不应再次缩小 - 它应该只是连接,并且应该从缩小过程中省略.有没有办法在没有hacky解决方案的情况下做到这一点(我不想使用我无法完全理解的解决方案 - 而且我很擅长吞咽)保留文件顺序？我找到了一个插件来在管道中的任何一点添加src文件:gulp-add-src,但它似乎暂时无效.

我环顾四周并试图理解这一点，但我不明白。

为什么当我向 Production 发布更新了 javascript 文件的新版本时，用户的浏览器没有获得最新版本。

当然，如果 javascript 文件由于被更改而具有新日期，那么浏览器的版本应该是旧的，因此它应该请求更新的版本。

相反，用户必须按 CTRL Shift R 进行强制刷新。

我错过了什么？我需要在 IIS 中更改设置吗？

我们使用 Google Chrome 作为浏览器。Javascript 和 CSS 文件被缩小和捆绑。

我在Visual Studio中使用了一个Minifier插件，除了这一段AngularJS代码外，该插件大部分都可以工作

这是未缩小的代码：

var svgBuildInterface = angular.module("svgBuildInterface", []);

svgBuildInterface.directive('ngRightClick', function ($parse) {
    return function (scope, element, attrs) {
        var fn = $parse(attrs.ngRightClick);
        element.bind('contextmenu', function (event) {
            scope.$apply(function () {
                event.preventDefault();
                fn(scope, { $event: event });
            });
        });
    };
});

这是打印精美的缩小的代码，但失败了：

svgBuildInterface = angular.module("svgBuildInterface", []);
svgBuildInterface.directive("ngRightClick", function(n) {
    return function(t, i, r) {
        var u = n(r.ngRightClick);
        i.bind("contextmenu", function(n) {
            t.$apply(function() {
                n.preventDefault();
                u(t, {
                    $event: n
                })
            })
        })
    }
});

我无法在缩小的代码中添加断点以了解正在发生的事情，但是angularJS会引发异常：

Error: [$injector:unpr] http://errors.angularjs.org/1.5.7/
$injector/unpr?p0=nProvider%20%3C-%20n%20%3C-%20ngRightClickDirective

我在互联网上的不同文章中看过很多，也听说过很多名称空间是古老而邪恶的东西。我听说过很多人应该使用带有模块加载器而不是命名空间的模块，但我只是不明白使用它们的客观好处是什么。我读过关于命名空间的不同论点，但它们对我来说似乎并不那么令人信服。我将列出一些论点，你们请尝试用一些真实世界的例子来解释我为什么这些论点是有效的：

• 命名空间至少创建 1 个全局变量。但这有什么问题呢？我不在乎是否有一个名为 angular 的全局变量。它会造成什么危害？

• 使用模块，消费者决定导入变量的名称。命名导入的能力真正给了我什么？有 2 个名为 angular 的变量的可能性有多大？在那些罕见的变量名重复的情况下，我们不能这样做（我没有测试过这个，但理论上应该可以）：

  var someOtherName = angular;
  
  var angular = function() {
  };
  

  Run Code Online (Sandbox Code Playgroud)

• 带有模块加载器的模块使打包更容易，因为它们将脚本按正确的顺序排列。但是，当您通过在每个文件的顶部添加导入来明确告诉他们顺序时，他们为什么不这样做呢？类似地，当您使用 tsconfig.json 中的“outFile”选项将三重斜杠引用放在文件顶部时，Typescript 会以正确的顺序构建您的 JavaScript。这和进口有什么区别？

• 模块加载器提高了性能。这个真的让我很困惑。假设我使用 Typescript 或 .NET 框架的捆绑工具生成一个巨大的 JavaScript 文件，性能会不会相同，因为在任何一种情况下我们都会有 1 个文件？SystemJS 根据需要动态加载这些脚本。这个更有意义，但如果我最终有一个 25kb 的 JavaScript 文件，如果它按需加载每个 kb，我真的会有多少性能提升？毕竟，它只有 25kb。

• 即使假设模块和模块加载器比捆绑成一个文件并在 html 中引用它更好，如果我使用模块加载器来构建库，这是否意味着使用我的库的任何人也需要安装加载器依赖项？

先感谢您。

当我在没有调试的情况下更改为运行时,我的绑定不包含html中的正确路径.它正在删除文件名.

using System.Web;
using System.Web.Optimization;

namespace Search
{
    public class BundleConfig
    {
        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.UseCdn = true;

            var jqueryuiCdnPath = "http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js";
            var knockoutCdnPath = "http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js";
            var modernizerCdnPath = "";

            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js",
                        "~/Scripts/jquery.printPage.js"
                        ));

            bundles.Add(new ScriptBundle("~/bundles/jqueryui", jqueryuiCdnPath).Include(
                        "~/Scripts/jquery-ui-{version}.custom.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));

            bundles.Add(new ScriptBundle("~/bundles/knockout", knockoutCdnPath).Include(
                "~/Scripts/knockout-2.1.0.debug.js"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the …