Использование grunt-postcss - как мы запускаем autoprefixer без других плагинов?

Question

У меня есть Gruntfile.js, настроенный с помощью Post CSS, использующего autoprefixer, mqpacker и cssnano на данный момент.

У меня есть сборка по умолчанию grunt, которая будет работать для создания всего для развертывания. Она включает в себя вызов postcss, например, так:

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

Этот вопрос я также хочу, процесс хрюкать сборки по умолчанию, чтобы быть для повседневной Dev работы - один, который опускает (выключает) составление медиа-запросов и Минимизация из Post CSS.

Однако, я хочу оставить autoprefixer включенным. Это не проблема с хрюканьем, когда autoprefixer работал как отдельная программа, мы просто делаем новый grunt.registerTask

Теперь, когда autoprefixer теперь работает внутри Post CSS, как мы делаем эти разные процессы сборки, не комментируя отдельные плагины в CSS (неуклюжие) и перезапуск grunt каждый раз, когда мы хотим сделать другую сборку?

Мои 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

Я бы разделил их на подзадачи, так что я мог бы назвать их по отдельности в различных зарегистрированных задач:

// 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']); 

или в зависимости от того подходит для вашего проекта. Надеюсь, это поможет