PostCSS 未编译但执行成功

Question

我是个新手……

请通读下面我的 grunt 文件。一切都成功执行，但是 PostCSS 函数并没有完成它的工作。如果我删除其中的扩展和压缩调用并仅使用选项和 dist 则它可以工作，但是当我尝试加倍调用时它不起作用。我需要做什么？

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

您不需要每个目标内的dist 属性。 dist 是默认目标的名称。删除它，任务应该可以工作：

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

这里实际上有一个线程：https://github.com/nDmitry/grunt-postcss/issues/67