Using grunt-postcss - how do we run autoprefixer without the other plugins?

Question

I have a Gruntfile.js set up with Post CSS running autoprefixer, mqpacker, and cssnano at the moment.

I have a default grunt build that will work to build everything for deployment. It includes the call to postcss, like so:

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

The issue is I also want the default grunt build process to be for everyday dev work - one that omits (turns off) the media query compilation and minification from Post CSS.

However, I want to leave autoprefixer on. This wasn't a problem with grunt when autoprefixer ran as a separate program, we just make a new grunt.registerTask

Now that autoprefixer now runs inside of Post CSS, how do we make these different build processes work, without commenting out the individual plugins in CSS (clumsy) and restarting grunt every time we want to do a different build?

My Gruntfile:

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

I would split them into subtasks so that I could call them separately in different registered tasks:

// 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'
    }
  }
}

and then

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

or whichever way suits your project. Hope it helps