I have a simple Gruntfile configured to run sass, then autoprefix (postcss), and finally cssmin. It's supposed to run the tasks in that order after detecting a change in a scss file and the consequent changes (after running sass) in the resulting css file. However, it is only running the sass task. Here is my gruntfile:
module.exports = function(grunt) {
grunt.initConfig({
watch: {
sass: {
files: 'dev/scss/**/*.scss',
tasks: ['sass']
},
autoprefix: {
files: 'dist/css/main.css',
tasks: ['postcss']
},
cssmin: {
files: 'dist/css/main-prefixed.css',
tasks: ['cssmin']
},
js_concat: {
files: 'dev/scripts/**/*.js',
tasks: ['concat']
},
js_uglify: {
files: 'dist/scripts/built.js',
tasks: ['uglify']
}
},
sass: {
dev: {
files: {
'dist/css/main.css' : 'dev/scss/main.scss'
}
}
},
cssmin: {
build: {
src: 'dist/css/main-prefixed.css',
dest: 'dist/css/main.min.css'
}
},
postcss: {
options: {
map: true,
processors: [
require('autoprefixer')({browsers: ['last 2 versions']})
]
},
dist: {
src: 'dist/css/main.css',
dest: 'dist/css/main-prefixed.css'
}
},
concat: {
options: {
separator: '\n\n\n'
},
dist: {
src: ['dev/scripts/*.js'],
dest: 'dist/scripts/built.js'
}
},
uglify: {
build: {
files: {
'dist/scripts/built.min.js': ['dist/scripts/built.js']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-postcss');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['watch']);
};
And this is the file structure:
Gruntfile.js
dev/
|__ scss/
|__ (all scss partials and main.scss file)
dist/
|__ css/
|__ main.css
|__ main-prefixed.css
|__ main.min.css
When I run the tasks manually it works without problem.
What might be the issue here?
No sure why you're getting these results, but you can try to solve it by configuring your watch task a bit different. If you detect a change in your scss files, just run the chain of commands one after the other (instead of relying on watch to see the resulted change of each task and act):
watch: {
sass: {
files: 'dev/scss/**/*.scss',
tasks: ['sass', 'postcss', 'cssmin'] // This will run the 3 tasks one after the other.
},
js_concat: {
files: 'dev/scripts/**/*.js',
tasks: ['concat']
},
js_uglify: {
files: 'dist/scripts/built.js',
tasks: ['uglify']
}
},
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.