javascript - Grunt grunt-postcss Autoprefixer 不工作

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 文件没有获得所需的 vendor 前缀，我正在使用 display: flex 来检查它是否有效。

原始项目(我 fork 了它)可以在这里找到: https://github.com/faforever/website

Answer 1

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

还原为原始文件

1. 首先，我建议您将所有代码示例(即您为其提供了pastebin 的代码示例)还原为可以在您的 github 存储库中找到的原始代码版本 fork *。即以下文件:

   1. Gruntfile.js
   2. grunt/concurrent.js
   3. grunt/sass.js
   4. grunt/watch.js

* 恢复到原始版本只会更容易执行以下步骤。

---

postcss 的任务设置

1. 创建一个名为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

1. 接下来，更新 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

1. watch.js 文件中名为 sass 的任务，可在 grunt 文件夹，应更新如下:

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

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

---

补充说明:

1. 您可能还需要添加 autoprefixer也添加到您的包裹中:

$ npm install autoprefixer --save-dev

1. 现在，当您运行 $ grunt serve (...并将任何编辑保存到 .scss 文件) 或$ grunt prod 生成的 .css 文件将包含所需的 vendor 前缀。

2. 运行 $ grunt sass:postcss 不再适用。