PostCSS wird nicht kompiliert, aber wird erfolgreich ausgeführt

Question

Ich bin ein grunt newbie ...

Bitte lesen Sie meine Grunt-Datei unten durch. Alles wird erfolgreich ausgeführt, aber die PostCSS-Funktion erledigt ihre Aufgabe nicht. Wenn ich die erweiterten und komprimierten Aufrufe darin entferne und nur die Optionen und dist verwende, dann funktioniert es, aber wenn ich versuche, die Aufrufe zu verdoppeln, funktioniert es nicht. Was muss ich tun?

module.exports = function(grunt) { 

// Project configuration. 
grunt.initConfig({ 
    pkg: grunt.file.readJSON('package.json'), 
    uglify: { 
     scripts_jquery: { 
      options: { 
       beautify: false, 
       mangle: false 
      }, 
      files: { 
       'js/vendor/jquery-1.12.4.min.js': ['js/vendor/jquery-1.12.4.js'] 
      } 
     }, 
     scripts_functions: { 
      options: { 
       beautify: false, 
       mangle: false 
      }, 
      files: { 
       'js/functions.min.js': ['js/functions.js'] 
      } 
     }, 
     scripts_expanded: { 
      options: { 
       beautify: true, 
       mangle: false, 
       sourceMap: true, 
       sourceMapName: 'js/scripts.js.map' 
      }, 
      files: { 
       'js/scripts.js': ['js/plugins/**/*.js'] 
      } 
     }, 
     scripts_compressed: { 
      options: { 
       beautify: false, 
       mangle: false, 
       sourceMap: true, 
       sourceMapName: 'js/scripts.min.js.map' 
      }, 
      files: { 
       'js/scripts.min.js': ['js/plugins/**/*.js'] 
      } 
     } 
    }, 
    sass: { 
     compile: { 
      options: { 
       indentType: 'tab', 
       indentWidth: 1, 
       linefeed: 'crlf', 
       sourceMap: false 
      }, 
      files: { 
       'css/styles.css': 'css/styles.scss', 
       'css/styles.min.css': 'css/styles.scss' 
      } 
     } 
    }, 
    postcss: { 
     css_expanded: { 
      options: { 
       map: { 
        inline: false, 
        annotation: 'css/' 
       }, 
       processors: [ 
        require('autoprefixer')({ 
         browsers: 'last 2 versions' 
        }) 
       ] 
      }, 
      dist: { 
       src: 'css/styles.css' 
      } 
     }, 
     css_compressed: { 
      options: { 
       map: { 
        inline: false, 
        annotation: 'css/' 
       }, 
       processors: [ 
        require('autoprefixer')({ 
         browsers: 'last 2 versions' 
        }), 
        require('cssnano')() 
       ] 
      }, 
      dist: { 
       src: 'css/styles.min.css' 
      } 
     } 
    }, 
    imagemin: { 
     dynamic: { 
      files: [{ 
       expand: true, 
       cwd: 'img/', 
       src: ['img/**/*.{png,jpg,gif}'], 
       dest: 'img/' 
      }] 
     } 
    }, 
    svgmin: { 
     options: { 
      plugins: [{ 
        removeViewBox: false 
       }, // don't remove the viewbox atribute from the SVG 
       { 
        removeEmptyAttrs: false 
       } // don't remove Empty Attributes from the SVG 
      ] 
     }, 
     dist: { 
      files: [{ 
       expand: true, 
       cwd: 'img/', 
       src: ['img/**/*.svg'], 
       dest: 'img/' 
      }] 
     } 
    }, 
    svgstore: { 
     options: { 
      prefix: 'icon-', 
      cleanup: true, 
      includedemo: true, 
      svg: { 
       viewBox: '0 0 100 100', 
       xmlns: 'http://www.w3.org/2000/svg' 
      } 
     }, 
     dist: { 
      files: { 
       'svg/svg-sprite.svg': ['img/**/*.svg'] 
      }, 
     } 
    }, 
    watch: { 
     scripts: { 
      files: ['js/plugins/**/*.js', 'js/vendor/jquery-1.12.4.js', 'js/functions.js'], 
      tasks: ['uglify'], 
      options: { 
       livereload: true, 
      }, 
     }, 
     css: { 
      files: ['css/**/*.scss'], 
      tasks: ['sass', 'postcss'], 
      options: { 
       livereload: true, 
      }, 
     }, 
     images: { 
      files: ['img/**/*.{png,jpg,gif}'], 
      tasks: ['imagemin'], 
      options: { 
       livereload: true, 
      }, 
     }, 
     svgs: { 
      files: ['img/**/*.svg'], 
      tasks: ['svgmin', 'svgstore'], 
      options: { 
       livereload: true, 
      }, 
     } 
    }, 
}); 

require('load-grunt-tasks')(grunt); 
grunt.loadNpmTasks('grunt-contrib-imagemin'); 
grunt.loadNpmTasks('grunt-contrib-uglify'); 
grunt.loadNpmTasks('grunt-contrib-watch'); 
grunt.loadNpmTasks('grunt-postcss'); 
grunt.loadNpmTasks('grunt-sass'); 
grunt.loadNpmTasks('grunt-svgmin'); 
grunt.loadNpmTasks('grunt-svgstore'); 

// Default task(s). 
grunt.registerTask('default', ['watch']); 

};

Answer 1

Sie benötigen nicht die dist Eigenschaft in jedem Ziel. dist ist ein Name für das Standardziel. Entfernen Sie es und sollte die Aufgabe arbeiten:

postcss: { 
    css_expanded: { 
     options: { 
      map: { 
       inline: false, 
       annotation: 'css/' 
      }, 
      processors: [ 
       require('autoprefixer')({ 
        browsers: 'last 2 versions' 
       }) 
      ] 
     }, 
     src: 'css/styles.css' 

    }, 
    css_compressed: { 
     options: { 
      map: { 
       inline: false, 
       annotation: 'css/' 
      }, 
      processors: [ 
       require('autoprefixer')({ 
        browsers: 'last 2 versions' 
       }), 
       require('cssnano')() 
      ] 
     }, 
     src: 'css/styles.min.css' 
    } 
}, 

Es ist eigentlich ein Thread zu diesem Thema hier: https://github.com/nDmitry/grunt-postcss/issues/67