我可以通过执行以下操作轻松设置我的 Grunt 文件以实时重新加载 HTML 和 SCSS 更改:
watch: {
options: {
livereload: true,
},
css: {
files: ['scss/*.scss'],
tasks: ['compass']
},
html: {
files: ['index.html'],
tasks: ['build']
}
}
但是,我有一个用于开发环境的构建任务:dev
和一个用于生产环境的构建任务:build
。因此,在 HTML 更改时调用build
将构建用于生产的站点,如果我只想要开发版本,这不是我想要的。
理想情况下,我会做类似的事情:
watch: {
options: {
livereload: true,
},
dev: {
html: {
files: ['<%%= yeoman.app %>/*.html',
'<%%= yeoman.app %>/**/*.html'],
tasks: ['dev']
},
css: {
files: ['<%%= yeoman.app %>/assets/scss/*.scss'],
tasks: ['compass']
}
},
dist: {
html: {
files: ['<%%= yeoman.app %>/*.html',
'<%%= yeoman.app %>/**/*.html'],
tasks: ['build']
},
css: {
files: ['<%%= yeoman.app %>/assets/scss/*.scss'],
tasks: ['compass'],
}
}
}
从而能够调用watch:dev
or watch:dist
,但是此代码不起作用。
我能想到的唯一解决方法是:
…
dev: {
files: ['<%%= yeoman.app %>/*.html',
'<%%= yeoman.app %>/**/*.html',
'<%%= yeoman.app %>/assets/scss/*.scss'],
tasks: ['dev']
},
dist: {
files: ['<%%= yeoman.app %>/*.html',
'<%%= yeoman.app %>/**/*.html',
'<%%= yeoman.app %>/assets/scss/*.scss'],
tasks: ['build']
}
…
再次调用watch:dev
or watch:dist
,但这样做的缺点是我不想在只更改少量 SCSS 时重建整个站点。
有什么方法可以实现我所追求的吗?