如何配置 Grunt serve/livereload 来组合小胡子模板
How to configure Grunt serve/livereload to combine mustache templates
我正在使用 Yeoman template to develop a static web site. grunt serve
nicely works with the auto reload 插件。
对于重复元素,我开始使用 {{mustache}} 部分,效果非常好。现在我希望自动重新加载到 assemble 我的页面,这样我就可以在编辑其中一个小胡子文件(主文件或部分文件)时查看生成的页面。
我找到了一个 grunt task for 它,但我无法将它拼接在一起。我的配置如下所示:
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/'}
]
}
}
});
我一定是遗漏了什么,因为 html 文件在我保存文件时没有更新。
您可以将 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
}
}
}
我正在使用 Yeoman template to develop a static web site. grunt serve
nicely works with the auto reload 插件。
对于重复元素,我开始使用 {{mustache}} 部分,效果非常好。现在我希望自动重新加载到 assemble 我的页面,这样我就可以在编辑其中一个小胡子文件(主文件或部分文件)时查看生成的页面。
我找到了一个 grunt task for 它,但我无法将它拼接在一起。我的配置如下所示:
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/'}
]
}
}
});
我一定是遗漏了什么,因为 html 文件在我保存文件时没有更新。
您可以将 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
}
}
}