问题

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或{ {3}}将所有其他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。

FYI

您应该使用postcss-cssnext包而不是cssnext，因为cssnext包尚未在几个月内更新。

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

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

1 个答案:

问题

解决方案

＃1

＃2

＃3

＃4

FYI