如何在多个文件上使用带有 postcss 和 Grunt 的 autoprefixer？

Question

标题说明了一切。我的postcss任务如下：

    postcss: {

      options: {

          processors: [
              require('autoprefixer')({browsers: ['last 2 versions']}),
              require('cssnext')(),
              require('precss')()
            ]
      },
      dist: {
          src: '*.css',
          dest: 'style.css',
      }

    },

目前我有另一个名为 style-human 的 css 文件，我也想为其加上前缀。但是，该任务仅在 style.css 文件（缩小版）前加上前缀。

Answer 1

问题

问题出在您的 src: 和 dest: 配置上。使用 src: '*.css' 您要求 postcss 任务处理它找到的所有 .css 文件，然后使用 dest: style.css 您要求所有已处理的 .css 个文件输出到一个名为 style.css 的文件中。 grunt-postcss 只将它处理的最后一个文件写入 style.css。

解决方案

您的问题有多种解决方案。

#1

First 如果您没有指定 dest 选项 grunt-postcss 将处理和更新所有 src 文件，覆盖原件：

postcss: {
  options: {
    processors: [
      require('autoprefixer')({browsers: ['last 2 versions']}),
      require('cssnext')(),
      require('precss')()
    ]
  },
  dist: {
    src: '*.css'
  }
}

如果您想保留 src 个文件，那就不太好了。

#2

您可以将files选项与expand结合使用。

postcss: {
  options: {
    processors: [
      require('autoprefixer')({browsers: ['last 2 versions']}),
      require('cssnext')(),
      require('precss')()
    ]
  },
  dist: {
    files: [
      {
        src: '*.css',
        dest: 'build/',
        expand: true
      }
    ]
  }
}

这将处理您所有的 .css 文件，并将它们输出到 build/ 文件夹。

#3

使用 grunt-contrib-copy将您的css文件复制到您的输出文件夹，如/build，然后使用[=处理它们20=]。完整示例：

module.exports = function(grunt) {
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-postcss');
  grunt.registerTask('css', ['copy:postcss', 'postcss']);

  grunt.initConfig({
    copy: {
      postcss: {
        files: [
          {
            src: 'css/*.css',
            dest: './build/',
            expand: true,
            flatten: true
          }
        ]
      }
    },
    postcss: {
      options: {
        map: true, // inline sourcemaps

        processors: [
          require('autoprefixer')({browsers: ['last 2 versions']}),
          require('postcss-cssnext')(),
          require('precss')()
        ]
      },
      dist: {
        files: [
          {
            src: 'build/*.css'
          }
        ]
      }
    }
  });
};

有关 expand 和 flatten 选项的解释，请参阅 files 上的 g运行t 文档。

这里我们使用copy任务将srccss文件复制到build文件夹，然后我们使用postcss任务就地处理它们。我用 grunt.registerTask('css', ['copy:postcss', 'postcss']); 创建了一个 alias 任务，你可以用 grunt css.

调用运行两个步骤

#4

如果你想将你的文件连接成一个css文件（我喜欢使用postcss），那么创建一个 main.css 文件，然后使用 precss 的 @import or postcss-import 将所有其他 css 文件拉入 main.css。像这样：

postcss: {
  options: {
    processors: [
      require('autoprefixer')({browsers: ['last 2 versions']}),
      require('cssnext')(),
      require('precss')()
    ]
  },
  dist: {
    src: 'main.css',
    dest: 'build/main.css'
  }
}

main.css:

@import "style.css";
@import "style-human.css";

这里 postcss 负责定位、处理和连接您的 css 文件，而 grunt 任务只需要担心 main.css.

仅供参考

您应该使用 postcss-cssnext 包而不是 cssnext，因为 cssnext 包已经几个月没有更新了。

同时使用 postcss-cssnext 和 autoprefixer 是多余的，因为 postcss-cssnext 已经包含 autoprefixer。

如何在多个文件上使用带有 postcss 和 Grunt 的 autoprefixer？

How to use autoprefixer with postcss and Grunt on more than one file?

gruntjs

postcss

问题

解决方案

#1

#2

#3

#4

仅供参考