让 livereload 与 Sails.js 一起工作
Get livereload to work with Sails.js
我对 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？
谢谢！ :)
- 将 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:
<script src="http://localhost:35729/livereload.js"></script>
除 localhost 外，您可以使用服务器的 IP 或 DNS 名称
如果 api 或 assets 文件夹中的文件发生更改，这将刷新页面。
Ggrunt-contrib-watch 默认使用 35729 端口。您可以指向其他端口，例如 livereload: 8000
- Similar question, but not so detailed answer
- Ggrunt-contrib-watch docs
编辑：
好吧，我真的不知道这是否完全正确，但看起来您可以覆盖 config/env/development.js 中的布局设置。添加如下内容：
module.exports = {
views: {
layout: 'dev'
}
}
然后您可以创建单独的布局文件 views/dev.ejs，您可以在其中添加 livereload 脚本和其他开发参数。您也可以用同样的方式添加 livereload 键。
在尝试使用 sails/grunt 花费一些时间后，我为模型和控制器安装了 livereload 浏览器插件 (http://livereload.com/extensions/) for .html, js and css and the package (https://www.npmjs.com/package/sails-hook-autoreload)。
很有魅力。
我对 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？
谢谢！ :)
- 将 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:
<script src="http://localhost:35729/livereload.js"></script>
除 localhost 外，您可以使用服务器的 IP 或 DNS 名称
如果 api 或 assets 文件夹中的文件发生更改，这将刷新页面。
Ggrunt-contrib-watch 默认使用 35729 端口。您可以指向其他端口，例如 livereload: 8000
- Similar question, but not so detailed answer
- Ggrunt-contrib-watch docs
编辑：
好吧，我真的不知道这是否完全正确，但看起来您可以覆盖 config/env/development.js 中的布局设置。添加如下内容：
module.exports = {
views: {
layout: 'dev'
}
}
然后您可以创建单独的布局文件 views/dev.ejs，您可以在其中添加 livereload 脚本和其他开发参数。您也可以用同样的方式添加 livereload 键。
在尝试使用 sails/grunt 花费一些时间后，我为模型和控制器安装了 livereload 浏览器插件 (http://livereload.com/extensions/) for .html, js and css and the package (https://www.npmjs.com/package/sails-hook-autoreload)。
很有魅力。