watch 和 sass 的不同 grunt 任务

Question

我有一个 grunt 项目，我正在使用 sass 和 jade。我想在开发时为 sass 分配一项任务，以便在其中扩展样式以进行故障排除，并在 'finish' 项目时分配一项任务，然后压缩样式。我是 grunt 的新手，不知道该怎么做。

我的 grunt 文件

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        jade: {
            compile: {
                options: {
                    pretty: true,
                    nospawn: false
                },

                files: {
                    'index.html' : 'src/index.jade'
                }
            }
        },

        sass: {
            dist: {
                options: {
                    style: 'expanded',
                    nospawn: false
                },

                files: {
                    'build/css/app.css' : 'src/sass/app.sass'
                }
            }
        },

        watch: {
            jade: {
                files: 'src/**/*.jade',
                tasks: ['jade']
            },

            css: {
                files: 'src/sass/**/*.sass',
                tasks: ['sass']
            },

            options: {
                livereload: true,
                nospawn: false
            }
        },

        connect: {
            server: {
                options: {
                    port: 9000,
                    base: '.',
                    hostname: '0.0.0.0',
                    protocol: 'http',
                    livereload: true,
                    open: true
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-jade');
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-connect');

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

Answer 1

要压缩 css 而不是展开，您首先需要进行另一个 sass 任务（因此在 sass:{}) 内，例如将其称为 finish: 并且更改压缩设置。

它应该看起来像这样：

finish: {
   options: {
            style: 'compressed',
            nospawn: false
           },

   files: {
            'build/css/app.css' : 'src/sass/app.sass'
           }
}

然后 grunt.registerTask('default', ['connect', 'watch']); 你可以添加另一个任务，即完成它应该是这样的： grunt.registerTask('finish', ['sass:finish']);

要运行，您需要在命令行中输入grunt finish。

watch 和 sass 的不同 grunt 任务

Different grunt tasks for watch and sass

javascript

css

sass

gruntjs

pug