让Livereload与Sails.js搭配使用

Question

让Livereload与Sails.js搭配使用

sails.jsgrunt-contrib-watchlivereloadbrowser-syncgrunt-contrib-connect

5

我对Sails和grunt都不太熟悉，可能会忽略一些显而易见的问题。我正在尝试在文件更改时自动刷新我的Sails应用程序中的浏览器。我使用`sails lift`启动应用程序，并在默认端口`1337`上运行。

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

我尝试使用`grunt-contrib-connect`和`livereload`选项来注入JavaScript，但它似乎只是启动另一个服务器。当我导航到启动的服务器（`localhost:8000`）时，我只看到文件夹结构。但是已经注入了livereload JavaScript。

如果可能，我想避免使用livereload Chrome插件。应该如何最佳地将livereload JavaScript注入到我的Sails应用程序中？或者我应该使用Browsersync等其他工具吗？

谢谢！ :)

- Philipp Baschke

2个回答

1

在尝试使用 sails/grunt 做这件事情浪费了一些时间之后，我安装了 .html、js 和 css 的 livereload 浏览器插件(http://livereload.com/extensions/)以及模型和控制器的包(https://www.npmjs.com/package/sails-hook-autoreload)。

非常好用。

- Liko

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bulkin · Accepted Answer

在tasks/config/watch.js中添加livereload选项

    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');
};

将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键。