5

我对 Sails 和 grunt 都很陌生，所以我可能会错过明显的东西。每当文件更改时，我都会尝试在浏览器中自动刷新我的 Sails 应用程序。

我启动应用程序sails lift并在默认端口上运行1337。

我尝试添加options: {livereload:true}到我的grunt-contrib-watch配置中，但据我所知，我需要以某种方式将 livereload JavaScript 注入我的页面？

我尝试使用注入 JavaScriptgrunt-contrib-connect的livereload选项，但它似乎只是启动了另一台服务器。当我导航到启动的服务器 ( localhost:8000) 时，我只看到文件夹结构。然而，livereload JavaScript 被注入了。

如果可能，我想避免 livereload Chrome 插件。

将 livereload JavaScript 注入我的 Sails 应用程序的最佳方法是什么？还是我应该只使用其他工具，例如 Browsersync？

谢谢！:)

4

2 回答 2

6
  1. 将 livereload 选项添加到tasks/config/watch.js
    module.exports = function(grunt) {

     grunt.config.set('watch', {
        api: {

            // API files to watch:
            files: ['api/**/*', '!**/node_modules/**']
        },
        assets: {

            // Assets to watch:
            files: ['assets/**/*', 'tasks/pipeline.js', '!**/node_modules/**'],

            // When assets are changed:
            tasks: ['syncAssets' , 'linkAssets']
        },
        // ADD THIS 
        options: {
          livereload: true,
        },
    });

    grunt.loadNpmTasks('grunt-contrib-watch');
};
  1. 将 livereload 脚本添加到您的布局中，在</body>标记之前的某个位置，默认为views/layout.ejs：
<script src="http://localhost:35729/livereload.js"></script>

除了本地主机，您可以使用服务器的 IP 或 DNS 名称

如果api或assets文件夹中的文件发生更改，这将刷新页面。

默认情况下，Ggrunt-contrib-watch 使用35729端口。您可以指向其他端口，例如livereload: 8000

编辑： 嗯，我真的不知道这是否完全正确，但看起来你可以覆盖config/env/development.js. 添加类似：

module.exports = {
    views: {
        layout: 'dev'
    }
}

然后您可以创建单独的布局文件views/dev.ejs，您可以在其中添加 livereload 脚本和其他开发参数。您也可以livereload以相同的方式添加密钥。

于 2015-06-26T13:39:57.940 回答
1

在尝试使用sails/grunt 尝试执行此操作后，我为.html、js 和css 以及包（https://www.npmjs.com ）安装了livereload 浏览器插件（ http://livereload.com/extensions/ ） /package/sails-hook-autoreload）用于模型和控制器。

奇迹般有效。

于 2015-07-16T19:40:18.037 回答