标签: bundling-and-minification

我试图通过在我的应用程序中使用我的应用程序进行一些优化.BundlesCollectionASP.Net 4.0

我的样式包包含6个css文件.这些文件包含在母版页中.如果我从母版页中删除CSS文件,而是放下以下内容:

<%= Styles.Render("~/bundles/css/default") %>

我收到以下错误:

The Controls collection cannot be modified because the control contains code 
    blocks (i.e. <% ... %>).

我在MVC4中使用捆绑,或者说我正在使用捆绑但不得不将其关闭.这意味着脚本和样式链接仅在单独的行上呈现,并且没有版本字符串,以确保浏览器在有更新时下载最新文件.

我试过在捆绑代码中添加一个版本字符串但是我得到一个错误,说路径无效.

有没有办法将版本控制应用到已关闭捆绑的捆绑脚本文件？

对于初学者,我要求你们所有人都忍受我,因为我对ASP和C#总体上并不熟悉,而且我可能没有像我希望的那样塑造大多数概念.

我在BundleConfig.cs上遇到了一些问题.显然,它试图引用的每个模块都不起作用,或者找不到它？

这是我得到的BundleConfig:

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

namespace WebApplication
{
    public class BundleConfig
    {
        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

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

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

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

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

            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        "~/Content/themes/base/jquery.ui.selectable.css", …

我正在使用支持 Webpack 的 CSS 模块（通过 css-loader）构建一个小型 Web 应用程序，但不使用React。我的目标是通过使用 css-loader 上的选项，在 HTML 中获得简短、模糊的 CSS 类名（因为我目前使用冗长的 BEM 类名）的好处localIdentName: '[hash:base64:8]'。由于我没有使用 React，所以我正在使用原始 HTML，该 HTML 不是通过JSX 文件或document.write.

我之前在 React 中使用过很多次 css-loader ，它最终是有效的，因为你可以在 React 文件中导入样式类名，并使用人类可读的名称来引用它们，无论类名发生什么变化通过Webpack。

但是，我很困惑在使用原始 HTML 时如何处理这个问题；我不能只导入样式，因为它不是 JS 文件。如果我的 HTML 中有一个名为引用的类photo__caption--large，并且 webpack 将类名转换为d87sj，则 CSS 文件会显示为d87sj，但 HTML 仍会显示为photo__caption--large。

是否有某种 HTML 文件加载器能够将文件中的类名编辑为其 Webpackified 等效项？或者我真的应该只使用 React 和 CSS 模块吗？

I want to configure rollup to take a bunch of files on input & produce a bunch of files in dist that share some common code between them.

Here's the rollup config I use:

import path from 'path';
import pathsTransformer from 'ts-transform-paths';
import alias from '@rollup/plugin-alias';
import commonjs from '@rollup/plugin-commonjs';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import typescript from 'rollup-plugin-typescript2';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';

const plugins = [
  peerDepsExternal(),
  alias({
    entries: [
      { find: '@', replacement: path.join(__dirname, '/src') },
      { …

我正在使用BundleConfig将我的css和javascript文件捆绑在mvc 4.0项目中.刚开始使用它,但不知怎的,我的捆绑的css文件从服务器获得404状态.想知道是什么问题.

这是我的设置;

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/CSSJSBundles/3rdpartycss").Include(
                    "~/Scripts/jquery.jnotify.css"

)); }

    BundleTable.EnableOptimizations = true;
}

我在我的根目录中创建了该文件夹:'CSSJSBundles'.我需要吗？或者只是虚拟文件夹mvc使用？我还需要在Global.aspx中设置任何设置吗？

我也删除了该文件夹,该捆绑的css文件仍有404错误.

我已经使用Bundle Transformer设置了SASS捆绑:Sass和SCSS,它在调试和发布模式下在本地运行良好,它通过Azure Build Server构建,并且在我的Azure网站上没有任何构建问题.问题是,SASS似乎没有编译成CSS.查看实时站点上的源代码,显示CSS:

<link href="/Content/test?v=" rel="stylesheet">

没有你期望的哈希,并在本地看到.查看样式表,其中没有任何内容.

我必须编写的代码:

var commonStylesBundle = new CustomStyleBundle("~/Content/css");
commonStylesBundle.Include("~/Content/site.scss");
commonStylesBundle.Orderer = nullOrderer;
commonStylesBundle.Transforms.Add(new CssMinify());
bundles.Add(commonStylesBundle);

正如我在标题中提到的那样 - chrome并未接受媒体查询.例如:

@media only screen and (min-width: 481px) and (max-width: 784px)
@media (min-width: 481px) and (max-width: 784px)

如果我只留下一个宽度属性,它可以工作:

@media only screen and (min-width: 481px)

所有其他浏览器都可以选择.你有没有人也来过这个问题,可以帮助我走上正轨吗？

编辑

我使用的是最新版本的chrome(版本32.0.1700.76 m)

我在我的mvc项目中创建了2个包,如下所示:

 public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/Scripts/BaseScripts").Include(
            "~/Content/js/jquery-{version}.js",
            "~/Content/js/jquery-ui-{version}.js",
            "~/Scripts/jquery.unobtrusive-ajax.min.js",
            "~/Content/js/bootstrap.js",
             "~/Content/js/bootstrap-datepicker.js",
              "~/Scripts/jquery.validate.min.js",
              "~/Scripts/jquery.validate.unobtrusive.js",
              "~/Scripts/customvalidation.js"

            )
        );

        bundles.Add(new ScriptBundle("~/Scripts/CustomScripts").Include(
                        "~/Content/js/customscripts/commonscript.js",
          "~/Content/js/customscripts/registration.js"
        ));

        bundles.Add(new StyleBundle("~/Styles/Css").Include(
            "~/Content/css/bootstrap.min.css",
            "~/Content/css/ymobiz.css",
            "~/Content/css/Style.css",
            "~/Content/css/datepicker3.css",
            "~/Content/font-awesome-4.1.0/css/font-awesome.min.css",
            "~/Content/css/css.css"
            ));


        //To enable bundling and minification
        BundleTable.EnableOptimizations = true;
    }

现在我还需要为这些文件启用缓存.有什么方法可以控制这些bundle文件的缓存持续时间

我的布局页面中有我的CSS和JS.

当我进行更改时,我需要在CSS和JS中添加一个参数字符串,并使用这些更改上传它们.

例如:

<environment names="Production">
    <link href="~/dist/mycss.bundle.css" rel="stylesheet"/>
</environment>

至:

<environment names="Production">
    <link href="~/dist/mycss.bundle.css?param=withchanges" rel="stylesheet"/>
</environment>

最好的方法是什么？有新的ASP.NET 5的方法吗？