在 grunt 构建时将本地链接更改为生产链接？

Question

我们能否在 grunt 构建期间更改 grunt 中的链接，这些链接主要是生产链接的本地链接？

例如

.a-container {
    background: url(../images/hello.jpg) no-repeat top center;
    background-size: 100%;
}

构建后应该是这样的

.a-container {
    background: url(http://hello.com/blah/blah/hello.jpg) no-repeat top center;
    background-size: 100%;
}

我们有可以在 grunt 文件中配置的 URL。

Answer 1

如果您没有被原始 CSS 卡住，我建议您在项目顶部抛出 grunt-contrib-compass。您将能够设置开发/生产环境并在需要时运行它们。你会特别想看看option for images。我的结构如下：

compass: {
  dev: {
    sassDir: 'build/sass',
    cssDir: 'stylesheets',
    imagesDir: 'build/assets/images/'
  },
  production: {
    sassDir: 'build/sass',
    cssDir: 'stylesheets',
    imagesDir: 'http://example.com/images'
  },
}

您不必一定要利用 sass/comapss 的其他部分（尽管在切换目录和文件结构时会有一些前期工作）。

如果此方法不适合您，您可能需要查看 Yeomans usemin task。不幸的是，我对那个不太熟悉，因此无法提供太多帮助。

Answer 2

要完成我开始的问题，这里是如何实现的。

        compass: {
              dist: {
               options: {
                 config: 'app/config.rb',
                 sassDir: 'app/styles',
                 cssDir: 'dist/styles',
                 imagesDir: 'app/images/',
                 javascriptsDir: 'app/scripts',
                 fontsDir: 'app/styles/fonts',
                 importPath: 'app/components',
                 outputStyle: 'compressed',
            },
        },
     }

您应该有一个 config.rb 文件，因为 Compass 不会将某些选项公开为命令行参数。

config.rb

http_images_path = "http://cdn.example.com/images/" 

在你的 sass/scss 文件中不要忘记使用 image_url('hello.jpg') 而不是只有 url('hello.jpg') ， url() 会被 Compass 忽略。

下次运行 grunt compass:dist 时，您会将 url 烘焙到生成的 css 文件中。