如何配置 Grunt serve/livereload 来组合小胡子模板

Question

我正在使用 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 文件在我保存文件时没有更新。

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
      }
    }
  }

如何配置 Grunt serve/livereload 来组合小胡子模板

How to configure Grunt serve/livereload to combine mustache templates

node.js

gruntjs

mustache

livereload