Question

我已经跳进了一个非营利性的开源项目，想要帮助一点，但我不熟悉Grunt。我做了一些研究，无法弄清楚配置为什么不起作用。

这是我尝试使用的插件。它允许应用几个后处理器，但我现在只需要Autoprefixer： https://github.com/nDmitry/grunt-postcss

配置：

Gruntfile.js http://pastebin.com/4Ud0sa1W
grunt/concurrent.js http://pastebin.com/Satr1wSK
grunt/sass.js http://pastebin.com/rc6evWas
grunt/watch.js http://pastebin.com/eGBpFSLs

任务执行没有问题：

laptop:website lextoc$ grunt sass:postcss
Running "sass:postcss" (sass) task

Done.

但是css文件没有获得所需的供应商前缀，我使用display: flex检查它是否有效。

原始项目（我分叉）可以在这里找到： https://github.com/faforever/website

Answer 1

以下似乎成功运作......

恢复原始文件

首先，我建议您将所有代码示例（即您提供 pastebin 的代码）还原为可以在github repo中找到的原始代码版本分叉*。即以下文件：

*恢复原始版本只会让您更轻松地执行以下步骤。

postcss

创建名为 postcss.js 的新文件，并将其保存到项目中名为 grunt 的文件夹中目录。 （由于该项目的许多其他任务作为单独的.js文件存在，我们也将对此新文件执行相同的操作）。

postcss.js 的内容应如下所示：

module.exports = {
    prefix: {
        options: {
            processors: [
                require('autoprefixer')({ browsers: ['last 8 versions', 'ie 9'] })
            ]
        },
         src: './public/styles/css/*.css'
    }
};

Gruntfile.js

接下来，更新Gruntfile.js中名为 prod 的现有注册任务，如下所示：

// ...
grunt.registerTask('prod', [
    'sass:dist',
    'postcss:prefix',
    'concat:js',
    'uglify:dist'
]);
// ...

注意在TaskList数组中添加了'postcss:prefix'。此外，添加grunt.loadNpmTasks('grunt-postcss');需要不，因为任务是通过阅读require('load-grunt-tasks')(grunt);的行加载的。

更新 watch.js

watch.js 文件中名为sass的任务，位于 grunt 中文件夹，应更新如下：

// ...
sass: {
    files: ['public/styles/**/*.scss'],
    tasks: ['sass:dev', 'postcss:prefix']
},
// ...

注意添加'postcss:prefix'数组添加tasks。这将确保在.scss文件转换为.css后应用前缀。

附加说明：

您可能还需要在包中添加autoprefixer：

$ npm install autoprefixer --save-dev

现在，您运行$ grunt serve （...并保存对.scss文件的所有修改）或$ grunt prod结果{{ 1}}文件将包含所需的供应商前缀。
正在运行.css不再适用。

Answer 2

有同样的问题。你试试这个：

postcss: {
    options: {
      processors: [
        require('autoprefixer')({browsers: ['last 8 versions', 'ie 9']})
      ]
    },
    src: 'public/styles/css/*.css'
  }

Grunt grunt-postcss Autoprefixer无法正常工作

2 个答案:

恢复原始文件

postcss

Gruntfile.js

更新 watch.js

附加说明：