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

您可以将文件选项与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选项上看到咕噜的文档文件。

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

#4

如果您想将您的文件连接成一个 css 文件（我使用 postcss 的首选方式），那么创建一个main.css文件并使用 precss 的@import或postcss-import将所有其他 css 文件拉入.css文件main.css。像这样：

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

主文件：

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

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

供参考

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

使用postcss-cssnext和autoprefixer一起使用也是多余的，因为已经postcss-cssnext包含autoprefixer了。