Grunt不更新主scss文件
我有一个使用GruntJS的项目,包括grunt-contrib-sass,grunt-contrib-watch和grunt-newer。
我的主app.scss文件使用@import指令导入一些.scss文件
@import“common / vars.scss”;
如果我在主app.scss中进行更改,一切正常。 问题是,当我正在导入的文件(如vars.scss)进行更改时,app.scss不会更新。
这是我的任务:
watch: {
css: {
files: ['scss/**/*.scss'],
tasks: ['newer:sass'],
options: {
spawn: false,
}
}
}
这本身就是一项繁重的任务:
sass: {
dist: {
options: {
style: 'compressed',
noCache: true
},
/* looks for every .scss file in the scss folder (checks nested folders too),
* compile it and create another file wit the same name in the style folder */
files: [{
expand: true,
cwd: 'scss',
src: ['**/*.scss'],
dest: 'style',
rename: function (dest, src) {
var folder = src.substring(0, src.lastIndexOf('/'));
var filename = src.substring(src.lastIndexOf('/'), src.length);
filename = filename.substring(0, filename.lastIndexOf('.'));
return dest + '/' + folder + filename + '.css';
}
}]
}
}
任何想法如何改变Gruntfile.js以涵盖这种情况呢? :) 谢谢。
注意:这是在grunt-newer
GitHub页面的一个问题上对此评论的最小修改副本。
我想出了这个简单的委托任务,它为你想对src
属性中指定以外的更改作出反应的任务执行任务:
grunt.initConfig( {
delegate: {
some_other_TASK: {
src: [ 'some/src/path/**/*.ext' ],
dest: 'some/dest/path/'
}
}
} );
grunt.registerTask( 'delegate', function() {
grunt.task.run( this.args.join( ':' ) );
} );
grunt-contrib-sass
完整示例如下所示:
module.exports = function( grunt ) {
require( 'load-grunt-tasks' )( grunt );
grunt.initConfig( {
delegate: {
sass: {
src: [ 'scss/**/*.scss' ],
dest: 'style'
}
},
sass: {
dist: {
options: {
style: 'compressed',
noCache: true
},
files: [{
expand: true,
cwd: 'scss',
src: ['*.scss'],
dest: 'style',
ext: '.css'
}]
}
}
} );
grunt.registerTask( 'delegate', function() {
grunt.task.run( this.args.join( ':' ) );
} );
};
你只需要调用newer:delegate:sass
(通过CLI或其他一些任务)。 grunt-newer
检查中,根据给定的文件delegate
对象(其中i有文件名匹配模式**/
包括在内)。 如果找到新文件(也是子文件夹中的.scss
文件),则会调用相应的sass
任务(具有给定的目标)。
不过,我不确定,如果制作一个单独的grunt插件将在这里使用。
编辑:我最近发布了上面的代码(清理)为单独的npm包grunt-delegate
。
我认为你的监视tasks
变量是倒退的,你可以通过打开终端来检查,进入通常运行grunt watch
的目录,但尝试运行newer:sass
如果不行的话,试试sass:newer
如果后面的工作改变那行在您的手表设置中。
此外,如果您只有一项sass任务,则可以将其更改为:
watch: {
css: {
files: ['scss/**/*.scss'],
tasks: ['sass']
options: {
spawn: false
}
}
}
正如一个侧面说明,似乎你的sass有不必要的复杂的重命名功能,如果你只是scss/**/*.scss
变成style/**/*.css
scss/**/*.scss
,你应该能够使用这个(取自grunt-contrib-sass自述文件):
grunt.initConfig({
sass: {
dist: {
files: [{
expand: true,
cwd: 'scss',
src: ['**/*.scss'],
dest: 'styles',
ext: '.css'
}]
}
}
});
如果您有使用多个点的文件,例如: file.src.scss
请将extDot: 'last'
添加到文件数组中
上一篇: Grunt doesn't update main scss file
下一篇: watch infinite loop