Gruntjs 如何将autoprefixer与PostCs和Grunt一起用于多个文件？_Gruntjs_Postcss

Gruntjs 如何将autoprefixer与PostCs和Grunt一起用于多个文件？

gruntjs

Gruntjs 如何将autoprefixer与PostCs和Grunt一起用于多个文件？,gruntjs,postcss,Gruntjs,Postcss,标题说明了一切。我的POSTSS任务如下： postcss: { options: { processors: [ require('autoprefixer')({browsers: ['last 2 versions']}), require('cssnext')(), require('precss')() ] },

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

    postcss: {

      options: {

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

    },

目前，我有另一个css文件，名为StyleHuman，我还想加上前缀。但是，该任务仅将style.css文件作为缩小版本的前缀。

问题问题在于src:和dest:config。使用src:'*.css'时，您要求postsss任务处理它找到的所有.css文件，然后使用dest:style.css时，您要求将所有处理过的.css文件输出到一个名为style.css的文件中。grunt postcss仅将其处理的最后一个文件写入style.css

解决你的问题有几种解决办法

1. 首先，如果未指定dest选项，grunt PostCs将就地处理和更新所有src文件，覆盖原始文件：

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

如果你想保留你的src文件，那就不太好了

2. 您可以将该选项与expand一起使用

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

3. 用于将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'
          }
        ]
      }
    }
  });
};

有关展开和展平选项的说明，请参阅上的grunt文档

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

4. 如果您想将您的文件连接到一个css文件中，这是我使用postcss的首选方式，那么请创建一个main.css文件，然后使用precss或将所有其他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

供参考您应该使用postsss cssnext包而不是cssnext，因为cssnext包已经几个月没有更新了

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

问题出在哪里问题在于src:和dest:config。使用src:'*.css'时，您要求postsss任务处理它找到的所有.css文件，然后使用dest:style.css时，您要求将所有处理过的.css文件输出到一个名为style.css的文件中。grunt postcss仅将其处理的最后一个文件写入style.css