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 dev
it 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?
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'
]);