如何configurationGrunt serve / livereload来组合胡子模板

我正在使用Yeoman模板开发一个静态网站。 grunt serve很好地与自动重载插件。

对于重复的元素，我开始使用{{mustache}}部分，它就像一个爆炸。 现在我想要自动重新装入我的页面，所以我可以在编辑一个胡须文件（主文件或部分文件）时查看结果页面。

我发现了一个咕噜噜的任务 ，但拼接在一起躲避我。 我的configuration如下所示：

 grunt.initConfig({ sass: { dev: { src: ['src/sass/*.sass'], dest: 'dest/css/index.css', }, }, watch: { sass: { // We watch and compile sass files as normal but don't live reload here files: ['src/sass/*.sass'], tasks: ['sass'] }, mustache: { files: '**/*.mustache', tasks: ['mustache_render'], options: { interrupt: true }, }, livereload: { options: { livereload: true }, files: ['dest/**/*'] } }, mustache_render: { options: { {data: 'common-data.json'} }, your_target: { files: [ {expand: true, template: '**/*.mustache', dest: 'dest/'} ] } } }); 

我必须缺less一些东西，因为当我保存文件时，html文件没有更新。

Answer 1

您可以将livereload选项直接添加到胡子目标选项。

 grunt.initConfig({ watch: { mustache: { files: '**/*.mustache', tasks: ['mustache_render'], options: { interrupt: true, livereload: true }, } }, mustache_render: { options: { {data: 'common-data.json'} }, main: { files: [ {expand: true, template: '**/*.mustache', dest: 'dest/'} ] } } }); 

另外，如果您使用grunt-contrib-connect为您的文件提供服务，请不要忘记将livereload选项添加到它：

 connect: { http: { options: { hostname: "*", port: process.env.PORT || 80, livereload: true } } }