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:構成にあります。postcsssrc: '*.css'タスクに、見つかったすべての .css ファイルを処理するように要求し、次にdest: style.css、処理されたすべての .css ファイルを .css という 1 つのファイルに出力するように要求します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 ファイルをビルド フォルダーにコピーし、タスクを使用してpostcssそれらを適切に処理します。で両方のステップを実行するために呼び出すことができるエイリアスタスクを作成しました。grunt.registerTask('css', ['copy:postcss', 'postcss']);grunt css

#4

ファイルを 1 つの css ファイルに連結main.cssする場合 (postcss を使用する私の好みの方法)、ファイルを作成し、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代わりにパッケージを使用する必要があります。cssnextcssnext

また、postcss-cssnextと を一緒に使用することは、すでに含まれているautoprefixerため冗長です。postcss-cssnextautoprefixer

于 2016-04-06T05:39:42.170 に答える