gpt4 book ai didi

gruntjs - 如何让 grunt-watch 在不同的构建任务下实时重新加载 HTML 更改

转载 作者:行者123 更新时间:2023-12-02 11:09:16 24 4
gpt4 key购买 nike

我可以通过执行以下操作轻松设置 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:devwatch: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:devwatch:dist,但这样做的缺点是,当我只是改变少量的SCSS。

有什么办法可以实现我所追求的目标吗?

最佳答案

尝试动态别名任务:

grunt.registerTask('watchit', function(type) {
grunt.config('watch.html.tasks', type);
grunt.task.run('watch');
});

然后使用 grunt watchit:buildgrunt watchit:dev 调用它以在两者之间切换。

更多信息请点击:http://gruntjs.com/frequently-asked-questions#dynamic-alias-tasks

关于gruntjs - 如何让 grunt-watch 在不同的构建任务下实时重新加载 HTML 更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19382708/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com