Search code examples
javascriptcssgruntjscompass-sasscompass

Grunt compass dev and prod


I have an issue with GruntJS + SASS Compass. I've setup dev and prod configs. For dev css has outputStyle: 'expanded', for prod has outputStyle: 'compressed'. When I'm doing prod - it works like a charm. In console I see

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

css compressed like it should be.

But when I'm doing devit shows in console nothing

Running "compass:dev" (compass) task

Running "autoprefixer:dist" (autoprefixer) task

And css still compressed.

There is my Gruntfile.js config:

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'
]);
};

What I'm doing wrong?


Solution

  • You could make two different compass dev's.

    compass: {
       dev: {
         ...
         force: true
         ...
       },
       devWatch: {
       ... ur original ... 
       }
    }
    
    watch(compass: {tasks: ['compass:devWatch', ...]})
    
    grunt.registerTask('watch', [
       'compass:dev',
       'watch'
    ]);
    
    grunt.registerTask('dev', [
       'compass:dev'
    ]);