让 livereload 与 Sails.js 一起工作 [英] Get livereload to work with 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-connect
和 livereload
选项来注入 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?
谢谢!:)
推荐答案
- 将 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');
};
- 将 livereload 脚本添加到您的布局中,在
</body>
标记之前的某个位置,默认为 views/layout.ejs:
- 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
如果在 api 或 assets 文件夹中更改文件,这将刷新页面.
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屋!