javascript - Grunt Compass 开发和生产

Question

我对 GruntJS + SASS Compass 有疑问。我已经设置了 dev 和 prod 配置。对于 dev，css 具有 outputStyle: 'expanded'，对于 prod，css 具有 outputStyle: 'compressed'。当我在做 prod 时 - 它就像一个魅力。在控制台中我看到了

Running "compass:dist" (compass) task
overwrite css/screen.css (0.392s)
Compilation took 0.4s

按应有的方式压缩 css。

但是当我在做dev时，它在控制台中没有任何显示

Running "compass:dev" (compass) task

Running "autoprefixer:dist" (autoprefixer) task

并且 css 仍然被压缩。

这是我的 Gruntfile.js 配置:

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

    compass: {
        dev: {
            options: {
                sassDir: 'sass',
                cssDir: 'css',
                imagesDir: 'images',
                fontsDir: 'fonts',
                relativeAssets: true,
                boring: true,
                outputStyle: 'expanded',
                environment: 'development',
                raw: 'preferred_syntax = :sass\n'
            }
        },
        dist: {
            options: {
                sassDir: 'sass',
                cssDir: 'css',
                imagesDir: 'images',
                fontsDir: 'fonts',
                relativeAssets: true,
                boring: true,
                force: true,
                bundleExec: true,
                outputStyle: 'compressed',
                environment: 'production',
                raw: 'preferred_syntax = :sass\n'
            }
        }
    },

    autoprefixer: {
        dist:{
            files:{
                'css/screen.css':'css/screen.css'
            }
        }
    },

    concat: {
        dist: {
            src: [
                'js/vendors/filename.js',
                'js/companyname/filename.js'
            ],
            dest: 'js/companyname/main.js'
        }
    },

    jshint: {
        all: ['Gruntfile.js'],
        beforeconcat: [
            'js/src/companyname/app.js',
            'js/src/companyname/bar.js'
        ]
    },

    uglify: {
        options: {
            mangle: false
        },
        prod: {
            files: [{
                expand: true,
                cwd: 'js',
                src: [
                    'vendors/**/*.js',
                    'companyname/**/*.js'
                ],
                dest: 'js'
            }]
        }
    },

    copy: {
        main: {
            expand: true,
            cwd: 'js/src',
            src: [
                'companyname/**/*.js',
                'vendors/**/*.js'
            ],
            dest: 'js/'
        }
    },

    imagemin: {
        jpg: {
            options: {
                optimizationLevel: 8
            },
            files: [
                {
                    expand: true,
                    cwd: 'images-src/',
                    src: ['**/*.jpg'],
                    dest: 'images/',
                    ext: '.jpg'
                }
            ]
        },
        png: {
            options: {
                optimizationLevel: 8
            },
            files: [
                {
                    expand: true,
                    cwd: 'images-src/',
                    src: ['**/*.png'],
                    dest: 'images/',
                    ext: '.png'
                }
            ]
        }
    },

    clean: {
        images: {
            src: ['images']
        }
    },

    watch: {
        compass: {
            files: [
                'sass/{,*/}*.sass',
                'images-src/{,*/}*.{png,jpg,gif}'
            ],
            tasks: [
                'compass:dev',
                'autoprefixer',
                'clean:images',
                'imagemin'
            ]
        }
    }
});

grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-watch');

grunt.registerTask('default', [
    'compass:dev',
    'autoprefixer',
    'copy',
    'concat',
    'jshint',
    'uglify'
]);

grunt.registerTask('prod', [
    'compass:dist',
    'autoprefixer',
    'copy',
    'concat',
    'jshint',
    'uglify',
    'clean:images',
    'imagemin'
]);
};

我做错了什么？

Answer 1

您可以制作两个不同的 compass 开发者。

compass: {
   dev: {
     ...
     force: true
     ...
   },
   devWatch: {
   ... ur original ... 
   }
}

watch(compass: {tasks: ['compass:devWatch', ...]})

grunt.registerTask('watch', [
   'compass:dev',
   'watch'
]);

grunt.registerTask('dev', [
   'compass:dev'
]);