Basically at the moment I have 2 issues that I can't seem to find answers to. When I save my main styles.scss
, sass compiles ok, though when I save either _globals.scss
or any other scss file, grunt watch seems to detect the change, but it doesn't compile! What would I need to do to rectify this?
My 2nd issue is when I have got a scss file in a directory within the scss folder for example: pages/_gallery.scss
(which is being imported in the main styles.scss
), grunt watch doesn't see it, I understand this is because of probably because of my cwd
path, though how do I make this more generic?
Here is my Gruntfile.js:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
scripts: {
files: ['public/resources/site/js/*.js'],
tasks: ['newer:jshint', 'newer:uglify:dist'],
options: {
spawn: false,
livereload: true,
},
},
sass: {
files: ['public/resources/site/scss/*.scss'],
tasks: ['newer:sass:app'],
options: {
livereload: true
}
},
php:{
files: ['public/index.php'],
options: {
livereload: true
}
}
},
sass: {
app: {
files: [{
expand: true,
cwd: 'public/resources/site/scss/',
src: ['*.scss'],
dest: 'public/resources/site/css/',
ext: '.css'
}]
},
options: {
sourceMap: true,
outputStyle: 'compressed'
}
},
uglify: {
dist: {
options: {
sourceMap: true,
mangle: true
},
files: [{
expand: true,
cwd: 'public/resources/site/js/',
src: ['*.js'],
dest: 'public/resources/site/js/',
ext: '.min.js'
}]
}
},
jshint: {
options: {
force: true
},
files: [
'public/resources/site/js/*.js',
'!public/resources/site/js/*.min.js'
]
},
notify: {
watch: {
options: {
title: 'Tasks Complete',
message: 'Files Processed & Compiled',
}
}
}
});
// Load tasks
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-newer');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-notify');
// Default task(s).
grunt.registerTask('default', []);
grunt.task.run('notify_hooks');
};
To make subdirectories work you need a globbing pattern ;
'public/resources/site/scss/**/*.scss'
I think that your watch task is flawed due to newer
. Watch detects a change to _globals
, but the sass task knows only to compile the main styles.scss
. However, newer
sees that this file has not changed, so it does not run the step.
Try removing newer
from the watch task list.
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.