Grunt Watch:每次 SASS 错误后需要保存两次
Grunt Watch: Need to Save Twice After Every SASS Error
在编辑我的SASS文件时使用grunt-watch
时,如果出现SASS错误,我必须在更正错误后保存两次才能解决。这是事件的顺序:
- 我包含了我的 SASS 文件中不存在的 mixin 并保存
grunt-watch
抛出 SASS 错误
- 我修正错误并保存
grunt-watch
抛出同样的错误
- 我又存了
grunt-watch
编译正确
这是我的 Gruntfile.js
:
module.exports = function(grunt) {
// Configuration
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'assets/img',
src: ['assets/img/**/*.{png,jpg,gif}'],
dest: 'assets/img'
}]
}
},
sass: {
dist: {
options: {
loadPath: require('node-neat').includePaths,
style: 'compact',
lineNumbers: true,
cacheLocation: 'assets/sass/.sass-cache'
},
files: [{
expand: true,
cwd: 'assets/sass',
src: ['*.scss'],
dest: 'assets/css',
ext: '.css'
}]
}
},
watch: {
options: {
livereload: true
},
css: {
files: ['assets/sass/**/*.scss'],
tasks: ['newer:sass'],
options: {
spawn: false
}
},
images: {
files: ['assets/img/**/*.{png,jpg,gif}'],
tasks: ['imagemin'],
options: {
spawn: false
}
},
js: {
files: ['assets/js/**/*.js'],
options: {
spawn: false
}
},
html: {
files: ['*.html'],
options: {
spawn: false
}
},
php: {
files:['**/*.php'],
options: {
spawn: false
}
}
}
});
// List plugins we're using
grunt.loadNpmTasks('grunt-contrib-watch'); // Watch - http://goo.gl/yxNE0
grunt.loadNpmTasks('grunt-contrib-imagemin'); // Image Minify - http://goo.gl/mkIRPE
grunt.loadNpmTasks('grunt-contrib-sass'); // SASS - http://goo.gl/pCHySn
grunt.loadNpmTasks('grunt-newer'); // Newer - https://goo.gl/3vBTnf
// Plugins to run when we run the 'grunt' command
grunt.registerTask('default', [
'imagemin',
'sass'
]);
};
事实证明,对于这个特定实例,Watch 中神秘的 spawn
选项实际上需要设置为 true
。和大多数人一样,我真的不知道 spawn
是如何工作的,但它解决了这个问题。
watch: {
css: {
files: ['assets/sass/**/*.scss'],
tasks: ['newer:sass'],
options: {
spawn: true
}
}
}
您不必明确将选项设置为 true
,它是默认设置的,因此您根本可以不添加它。我只是在这里举个例子。
在编辑我的SASS文件时使用grunt-watch
时,如果出现SASS错误,我必须在更正错误后保存两次才能解决。这是事件的顺序:
- 我包含了我的 SASS 文件中不存在的 mixin 并保存
grunt-watch
抛出 SASS 错误- 我修正错误并保存
grunt-watch
抛出同样的错误- 我又存了
grunt-watch
编译正确
这是我的 Gruntfile.js
:
module.exports = function(grunt) {
// Configuration
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'assets/img',
src: ['assets/img/**/*.{png,jpg,gif}'],
dest: 'assets/img'
}]
}
},
sass: {
dist: {
options: {
loadPath: require('node-neat').includePaths,
style: 'compact',
lineNumbers: true,
cacheLocation: 'assets/sass/.sass-cache'
},
files: [{
expand: true,
cwd: 'assets/sass',
src: ['*.scss'],
dest: 'assets/css',
ext: '.css'
}]
}
},
watch: {
options: {
livereload: true
},
css: {
files: ['assets/sass/**/*.scss'],
tasks: ['newer:sass'],
options: {
spawn: false
}
},
images: {
files: ['assets/img/**/*.{png,jpg,gif}'],
tasks: ['imagemin'],
options: {
spawn: false
}
},
js: {
files: ['assets/js/**/*.js'],
options: {
spawn: false
}
},
html: {
files: ['*.html'],
options: {
spawn: false
}
},
php: {
files:['**/*.php'],
options: {
spawn: false
}
}
}
});
// List plugins we're using
grunt.loadNpmTasks('grunt-contrib-watch'); // Watch - http://goo.gl/yxNE0
grunt.loadNpmTasks('grunt-contrib-imagemin'); // Image Minify - http://goo.gl/mkIRPE
grunt.loadNpmTasks('grunt-contrib-sass'); // SASS - http://goo.gl/pCHySn
grunt.loadNpmTasks('grunt-newer'); // Newer - https://goo.gl/3vBTnf
// Plugins to run when we run the 'grunt' command
grunt.registerTask('default', [
'imagemin',
'sass'
]);
};
事实证明,对于这个特定实例,Watch 中神秘的 spawn
选项实际上需要设置为 true
。和大多数人一样,我真的不知道 spawn
是如何工作的,但它解决了这个问题。
watch: {
css: {
files: ['assets/sass/**/*.scss'],
tasks: ['newer:sass'],
options: {
spawn: true
}
}
}
您不必明确将选项设置为 true
,它是默认设置的,因此您根本可以不添加它。我只是在这里举个例子。