如何在多个文件上使用带有 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

首先如果您不指定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，然后使用 grunt-postcss 处理它们。 一个完整的例子：

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 上的grunt 文档。

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

#4

如果您想将文件连接到一个 css 文件中（我喜欢使用 postcss 的方式），然后创建一个 main.css 文件并使用 precss 的 @import 或 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。