0

你能看看下面的 Gruntfile 看看你能不能确定为什么它没有运行 cssnano 和 autoprefixer？

Grunt 目前正在观看我的项目，每次保存都可以grunt-sass正常编译，但既没有也没有grunt-cssnano做autoprefixer他们的事情，也没有报告错误。

完成，没有错误。2015 年 11 月 25 日星期三 13:12:18 GMT+0000（GMT 标准时间）在 1.906 秒内完成 - 等待中...

文件“sass\styles.scss”已更改。运行“sass:dist”（sass）任务

我认为我在设置方面做错了grunt-contrib-watch（特别是 css 部分），但这只是一个猜测。

我的项目文件夹看起来像这样

  • 距离
    • css
      • 样式.css
  • node_modules（包括所有相关包）
  • 粗鲁的
    • 样式.css
  • Gruntfile.js
  • 包.json

而我的 Gruntfile 如下

module.exports = function (grunt) {

    grunt.initConfig({

        sass: {
            options: {
                sourceMap: false
            },
            dist: {
                files: {
                    'dist/css/styles.css': 'sass/styles.scss'
                }
            }
        },

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

        watch: {
            sass: {
                files: 'sass/*.scss',
                tasks: ['sass']
            },
            css: {
                files: 'dist/css/styles.css',
                tasks: ['cssnano', 'autoprefixer']
            }
        },
    });

    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-sass');
    grunt.loadNpmTasks('grunt-postcss');
    grunt.loadNpmTasks('grunt-cssnano');    

    grunt.registerTask('default', ['watch', 'sass', 'postcss:dist', 'cssnano', 'autoprefixer']);
};
4

2 回答 2

1

像您一样注册任务：

grunt.registerTask('default', ['watch', 'sass', 'postcss:dist', 'cssnano']);

将一一执行任务。所以在你的情况下，只有watch任务会被执行，因为它“永远不会结束”，直到你完成它。所以sass, postcss:dist, cssnano不会达到。

因此，在您的情况下，它将仅执行 watch 任务，它将监视 *.scss 文件以执行 sass 任务并监视 style.css 以执行cssnanoandautoprefixer任务。但是这两个最后的任务没有在你的配置中定义，所以它不会做任何事情。

要解决您的问题，请从您的默认注册任务中删除这些任务，因为它们没有被使用：

grunt.registerTask('default', ['watch']);

并为每个缺失的任务添加一个配置。例如：

cssnano: {
        options: {
            sourcemap: true
        },
        dist: {
            files: {
                'dist/css/styles.min.css': 'dist/css/styles.css'
            }
        }
    },
//and same for autoprefixer
于 2015-11-25T13:43:51.140 回答
0

经过更多的试验和错误，看起来我有一个解决方案。下面的文件现在运行 Sass、cssnano、autoprefix 和 watch。Sass、cssnano 和 autoprefix 数据包（我假设将来添加的任何其他数据包）将grunt.initConfig在文件底部registerTask处理 watch 时执行它们的工作。

需要做更多的工作来弄清楚如何创建其他 registerTasks 但那是另一天的事了。

感谢 Mian 让我走上了正轨。

module.exports = 功能（咕噜声）{

grunt.initConfig({
    sass: {
        options: {
            sourceMap: false
        },
        dist: {
            files: {
                'dist/css/styles.css': 'sass/styles.scss'
            }
        }
    },

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

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

grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-postcss');
grunt.loadNpmTasks('grunt-cssnano');    

grunt.registerTask('default', ['watch']);

};

于 2015-11-25T22:16:47.937 回答