让 livereload 与 Sails.js 一起工作 [英] Get livereload to work with Sails.js

查看:65
本文介绍了让 livereload 与 Sails.js 一起工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我是 Sails 和 grunt 的新手,所以我可能会错过明显的内容.我尝试在文件更改时自动刷新浏览器中的sails 应用.

I am new to both Sails and grunt so I might be missing the obvious. I am trying to automatically refresh my sails app in the browser whenever files change.

我使用 sails lift 启动应用程序,它在默认端口 1337 上运行.

I start the app with sails lift and it runs on the default port 1337.

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

I tried adding options: {livereload:true} to my grunt-contrib-watch configuration but as far as I understand I need to somehow inject the livereload JavaScript into my page?

我尝试使用 grunt-contrib-connectlivereload 选项来注入 JavaScript,但它似乎只是启动另一个服务器.当我导航到启动的服务器 (localhost:8000) 时,我只看到文件夹结构.但是会注入 livereload JavaScript.

I tried to use grunt-contrib-connect with the livereload option to inject the JavaScript but it seems to just start another server. When I navigate to the started server (localhost:8000) I just see the folder structure. The livereload JavaScript is injected however.

如果可能,我想避免使用 livereload Chrome 插件.

I want to avoid the livereload Chrome Plugin if possible.

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

What's the best way to inject the livereload JavaScript into my Sails app? Or should I just use another tool like Browsersync?

谢谢!:)

推荐答案

  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:
  1. Add livereload script to your layout, somewhere at the end before </body> tag, by default to views/layout.ejs:

<script src="http://localhost:35729/livereload.js"></script>

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

Except of localhost you can use IP or DNS name of server

如果在 apiassets 文件夹中更改文件,这将刷新页面.

This will refresh page if a file is changed in api or assets folder.

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

By default Ggrunt-contrib-watch uses 35729 port. You can point other port like livereload: 8000

好吧,我真的不知道这是否完全正确,但看起来您可以覆盖 config/env/development.js 中的布局设置.添加如下内容:

Well, I do not really know if this is totally correct, but looks like you can override layout settings in config/env/development.js. Add something like:

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

然后您可以创建单独的布局文件 views/dev.ejs,您可以在其中添加 livereload 脚本和其他开发参数.你也可以用同样的方式添加 livereload 键.

Then you can create separate layout file views/dev.ejs where you can add livereload script and other development params. Also you can add livereload key in the same way.

这篇关于让 livereload 与 Sails.js 一起工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆