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（）。

下次运行grunt compass:dist时，您将在生成的css文件中添加网址。

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

2 个答案: