0

标题说明了一切。我的 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 文件（缩小版本）之前添加。

4

1 回答 1

6

问题

问题在于您的src:和dest:配置。src: '*.css'您要求 postcss 任务处理它找到的所有 .css 文件，然后要求dest: style.css将所有已处理的 .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选项的说明，请参阅文件上的 grunt文档。

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

主.css：

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

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

供参考

您应该使用该postcss-cssnext软件包，而不是cssnext因为该cssnext软件包已数月未更新。

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

于 2016-04-06T05:39:42.170 回答