Question

我使用Yeoman模板开发静态网站。 grunt serve很适合使用auto reload插件。

对于重复元素，我开始使用{{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选项直接添加到胡须目标选项中。

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来组合小胡子模板

1 个答案: