css - 使用 grunt-postcss - 我们如何在没有其他插件的情况下运行 autoprefixer？

Question

我有一个 Gruntfile.js 设置了 Post CSS，目前正在运行 autoprefixer、mqpacker 和 cssnano。

我有一个默认的 grunt 构建，可以用来构建部署所需的一切。它包括对 postcss 的调用，如下所示:

grunt.registerTask('default', ['sass', 'postcss', 'concat', 'uglify', 'browserSync', 'watch']);

问题是我还希望默认的 grunt 构建过程用于日常开发工作——一个省略(关闭)媒体查询编译和 Post CSS 缩小的过程。

但是，我想保留自动前缀。当 autoprefixer 作为一个单独的程序运行时，这不是 grunt 的问题，我们只是创建一个新的 grunt.registerTask

现在 autoprefixer 现在在 Post CSS 中运行，我们如何让这些不同的构建过程工作，而不是在 CSS 中注释掉各个插件(笨拙)并在每次我们想要进行不同的构建时重新启动 grunt？

我的 Grunt 文件:

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({

    // Sass to CSS
    sass: {

      app: {

        files: [{
          expand: true,
          cwd: 'scss',
          src: ['**/*.scss'],
          dest: 'css/src',
          ext: '.css'
        }]

      },

      options: {
        sourceMap: true,
        outputStyle: 'expanded',
        imagePath: "../"
      }

    },


    // Post CSS (autoprefixer, mqpacker, cssnano)
    postcss: {

        // Configuration
        options: {

            map: true,

            // Load plugins  
            processors: [

                // Runs Post CSS Autoprefixer
                require('autoprefixer')({browsers: ['last 2 versions']}),

                // require('postcss-import')(),

                require('css-mqpacker')(),

                require('cssnano')({
                  autoprefixer: false, 
                  safe: true,
                  sourcemap: false
                })
            ]

        },

        // Operate on compiled Sass, write global.css
        dist: {
            src: 'css/src/global-sass.css',
            dest: 'css/global.min.css'

        }

    },

    // JS Concatenation Plugin
    concat: {

        dist: {
            src: [
                'js/libs/*.js',  // All JS in the libs folder
                'js/src/*.js'   // All JS in the src folder
            ],

            dest: 'js/scripts.js'
        }
    },


    // JS Minification
    uglify: {

        build: {

            src: 'js/scripts.js',

            dest: 'js/scripts.min.js'
        }
    },

    // Image Minification -- run on demand w/ `grunt imagemin`
        imagemin: {
            dynamic: {
                files: [{
                    expand: true,
                    cwd: 'img/src/',
                    src: ['**/*.{png,jpg,gif}'],
                    dest: 'img/'
                }]
            }
        },


    // BrowserSync
    browserSync: {

      dev: {

          bsFiles: {

              src : [
                  'css/*.css',
                  '**/*.{html}'
              ]

          },

          options: {
              watchTask: true,
              server: './'
          }
      }
    },


    // Watch
    watch: {

      sass: {
        files: ['scss/{,*/}*.{scss,sass}'],
        tasks: ['sass', 'postcss']
      },

      js: {
        files: ['js/src/*.js'],
        tasks: ['concat', 'uglify']
      },

      options: {
        livereload: false,
        spawn: false
      }

    },

  });

  // Loads Grunt Tasks
  grunt.loadNpmTasks('grunt-sass');
  grunt.loadNpmTasks('grunt-postcss');
  grunt.loadNpmTasks('grunt-browser-sync');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-imagemin');


  // Default Task
  grunt.registerTask('default', ['sass', 'postcss', 'concat', 'uglify', 'browserSync', 'watch']);

};

Answer 1

我会把它们分成子任务，这样我就可以在不同的注册任务中分别调用它们:

// Post CSS (autoprefixer, mqpacker, cssnano)
postcss: {

  prefix: {
    options: {
      map: true,
      // Load plugins  
      processors: [
        require('autoprefixer')({browsers: ['last 2 versions']})
      ]
    }
    dist: {
      src: 'css/src/global-sass.css',
      dest: 'css/global.min.css'
    }
  },

  pack: {
    options: {
      map: true,
      // Load plugins  
      processors: [
        require('css-mqpacker')()
      ]
    }
    dist: {
      src: 'css/src/global-sass.css',
      dest: 'css/global.min.css'
    }
  },

  nano: {
    options: {
      map: true,
      // Load plugins  
      processors: [
        require('cssnano')({
          autoprefixer: false, 
          safe: true,
          sourcemap: false
        })
      ]
    }
    dist: {
      src: 'css/src/global-sass.css',
      dest: 'css/global.min.css'
    }
  }
}

然后

grunt.registerTask('default', ['sass', 'postcss:prefix', 'postcss:pack', 'postcss:nano', 'concat', 'uglify', 'browserSync', 'watch']);

或任何适合您元素的方式。 希望对你有帮助