node.js - 如何配置 Gruntserve/livereload 来组合 Mustache 模板

Question

我正在使用Yeoman开发静态网站的模板。 gruntserve 与 auto reload 很好地配合使用插件。

对于重复元素，我开始使用 {{mustache}}部分，它的效果就像爆炸一样。现在我希望自动重新加载来组装我的页面，这样我就可以在编辑其中一个 Mustache 文件(主文件或部分文件)时查看结果页面。

我发现了一个咕噜声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 选项直接添加到您的 Mustache 目标选项中。

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