Grunt cssmin / CleanCSS 源映射变基

2024-02-17

我使用 cssmin 和以下“内容”文件夹结构:

src
|--dir1
|   |--style1.css
|   |--images
|      |--image1.png
|--dir2
   |--style2.css
   |--images
      |--image2.png
dist
|--styles.min.css
|--styles.min.css.map

其中 styles.min.css 和 styles.min.css.map 是连接/缩小“src”文件夹中所有样式表的结果。

我首先遇到的问题是 styles.min.css 在错误的位置包含图像的 URL(即“images/image1.png”而不是“../src/dir1/images/image1.png”),但幸运的是,这个 grunt 配置已修复那:

cssmin: {
        options: {
            rebase: true,
            sourceMap: true
        },
        all: {
            options: {
                keepSpecialComments: 0
            },
            files: {
                'content/dist/styles.min.css': ["content/src/dir1/style1.css", "content/src/dir2/style2.css"]
            }
        }
    }

新问题:生成的源映射(“styles.min.css.map”)包含这样的源:[“content/src/dir1/style1.css”,“content/src/dir2/style2.css”]而不是[“.. /src/dir1/style1.css", "../src/dir2/style2.css"]。这意味着地图指向不正确的位置,例如:

“内容/dist/content/src/dir1/style1.css”和“内容/dist/content/src/dir2/style2.css”

我可以做什么来解决这个问题?

作为参考,我也尝试过 csswring,但是尽管源映射工作正常,我发现一般图像/导入 url 变基无法正常工作,所以回到 cssmin。

非常感谢!


想出了我自己的解决方案。我编写了一个任务,它读取源映射 JSON,获取源数组,对它们进行变基,然后再次写入文件。这个解决方案似乎对我来说效果很好,希望这也可以帮助处于类似情况的其他人。只需运行你的 cssmin 任务,然后运行这个:

grunt.registerTask("rebase-css-sourcemap-sources", "Rebases the CSS source map urls", function() {

            var filePath = "./content/dist/styles.min.css.map";
            if (grunt.file.exists(filePath)) {
                var sourceMap = grunt.file.readJSON(filePath);

                var sources = sourceMap.sources;
                if (sources) {
                    for (var i = 0; i < sources.length; i++) {
                        sources[i] = sources[i].replace("content/src", "../src");
                    }
                    grunt.file.write(filePath, JSON.stringify(sourceMap));
                    grunt.log.ok("Rebased CSS source map source urls.");
                }
            } else {
                grunt.log.error("Source map file does not exist: " + filePath);
            }
        });

虽然这个解决方案对我有用,但如果有人知道解决这个问题的替代方法,最好只使用 cssmin,那就更好了。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Grunt cssmin / CleanCSS 源映射变基 的相关文章

  • Grunt 未定义

    刚开始使用 grunt 当我跑步时grunt我收到这个错误 Loading Gruntfile js tasks ERROR gt gt ReferenceError grunt is not defined 这是我的 Gruntfile
  • Bower、Grunt 和 zsh:未找到命令:

    我已经安装了 Grunt Bower 我正在使用 ZSH 当我打字时bower help or grunt anything I get zsh command not found bower or zsh command not foun
  • Ruby on Rails 中通过 sprocket 进行源映射

    我想在我正在开发的 Rails 3 2 应用程序上添加源映射支持 据我所知 Sprockets 不支持生成源地图 从其 github 页面来看 该功能似乎计划在 4 0 中使用 我正在使用 Sprockets 2 2 我认为猴子修补是唯一的
  • Yeoman 生成器中的“{.tmp,app}”是什么?

    我正在开始使用 Yeoman 工作流程 但我似乎无法完全理解 index html 文件中 usemin 任务的 备用搜索路径 例如 使用 yo angular 命令生成了 2 个块
  • 如何使用 grunt-sass 编译多个 scss 文件

    我正在尝试将多个 scss 文件编译为单个 CSS 文件 这实际上有效 但只获取第一个文件 sass Task dist files css test css sass scss 我们没有安装 ruby 所以 grunt contrib s
  • 如何使用 JavaScript 源地图(.map 文件)?

    最近我看到文件带有 js map一些 JavaScript 库附带的扩展 例如Angular http code angularjs org 这在我脑海中提出了几个问题 它是做什么用的 为什么 Angular 的人要关心交付一个 js ma
  • 当项目中有多个文件时,如何使用 Grunt 配置 LESS 的 sourceMap?

    我有多个 less 文件 我希望将它们处理为匹配的 css 每个文件的 sourceMaps 都与源位于同一文件夹中 这有多难 我用 less 直接执行此操作没有问题 但无法弄清楚如何在 grunt contrib less 中执行此操作
  • 文件正在被分配一个 //# sourceMappingURL 但已经有一个

    我只是注意到 Firefox 控制台为我的项目中的每个 js coffee 文件 甚至是包 输出以下错误 file is being assigned a sourceMappingURL but already has one Chrom
  • grunt-wiredep 对具有不同依赖关系的多个文件

    目前的项目结构有点像这样 index html bower json bower components 建议的项目结构将在项目根目录中添加更多静态 html 文件 到目前为止 我一直在管理 Bower json 中的所有前端依赖项 并使用
  • 在 component.json 和 package.json 中定义“package”信息

    我正在创建一个 javascript 库 希望通过 Bower 向我的内部公司提供该库 我正在使用 Grunt 来构建我的库 我的问题是 grunt 的约定是使用package json定义依赖项 库版本 依赖项等 另一方面 鲍尔假设在co
  • 在虚拟机共享目录上运行“grunt”

    将 Vagrant 与 Windows 主机和 Linux 客户机一起使用 grunt尝试运行作业时返回以下错误 据我了解 在主机 来宾共享目录中 此文件路径超出了 Windows 的 255 个字符限制 npm ERR Error EPE
  • 对字体(font-awesome)资源的引用未在 yeoman/Angular grunt 构建中更新

    我知道有关此问题的SO线程 我在下面链接了它们 但不幸的是我无法用它们解决这个问题 所以请允许我这个问题 我使用 Yeoman 启动了一个 AngularJS 项目 因此依赖于使用 Bower js 和 SCSS 的 grunt js 构建
  • 避免使用 Grunt cssmin 任务来删除重复条目

    在我的 Gruntfile 中 我使用 cssmin grunt contrib cssmin 任务 就像是 cssmin css src dist styles css dest dist styles min css 问题是 style
  • 用于开发/生产环境的备用 grunt.js 任务

    我真的很希望能够拥有一个开发 grunt 文件并使用相同的文件作为脚本的生产版本 我已经尝试过建议 但是当尝试调用 dev prod 参数时 我的脚本将会失败 我相信答案是针对旧版本的 grunt 或者可能是我正在使用的插件 module
  • AngularJS with Grunt - 连接到另一台服务器

    我使用 grunt bower 和 yeoman 创建了一个 AngularJS 应用程序 我猜想 Gruntfile js 在 2014 年 1 月之后发生了变化 不确定 这是我的gruntfile js Generated on 201
  • 除 .spec.js 之外的每个 .js 文件的节点 glob 模式

    我正在寻找更好的全局模式以供使用 我想找到所有 js文件但排除 spec js文件 到目前为止我有以下解决方案 我目前拥有的解决方案要求我不断添加文件扩展名以排除它们 否则它们会被拾取 例如 html files 我试图让它只寻找 js文件
  • Node WebKit 和 YouTube:chrome 未定义

    我正在开发一个应用程序Android iOS Mac OS and Windows using PhoneGap and Node WebKit 该应用程序已嵌入youtube videos These youtube视频在我的中运行良好M
  • 等待异步 grunt 任务完成

    我收到了 grunt 设置 其中一个新任务应该执行 grunt task run 已经存在的任务 要执行的任务是异步的 新任务应该等待异步任务完成 执行此操作的首选方法是什么 grunt 已经涵盖了这一点 你应该将你的任务声明为异步任务 并
  • 在生产中使用 css / javascript 源映射对性能有何影响?

    生产环境中应该使用源映射吗 除了调试之外 它们还有什么好处吗 由于额外的服务器往返 它们是否会影响应用程序加载时间 浏览器是否足够智能来加载 map应用程序加载和渲染后的资产 如果浏览器找不到 map asset 404错误 会对性能产生影
  • 在 WebStorm 11 中调试 WebPack

    我正在尝试使用源映射在 WebStorm 中调试与 WebPack 捆绑在一起的 javascript 应用程序 我当前的 webpack config js 如下所示 var path require path module export

随机推荐