问题
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.
I start the app with sails lift
and it runs on the default port 1337
.
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?
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.
I want to avoid the livereload Chrome Plugin if possible.
What's the best way to inject the livereload JavaScript into my Sails app? Or should I just use another tool like Browsersync?
Thank you! :)
回答1:
- Add livereload option to 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');
};
- 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>
Except of localhost you can use IP or DNS name of server
This will refresh page if a file is changed in api or assets folder.
By default Ggrunt-contrib-watch uses 35729 port. You can point other port like livereload: 8000
- Similar question, but not so detailed answer
- Ggrunt-contrib-watch docs
EDIT:
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'
}
}
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.
回答2:
After lost some time trying do this with sails/grunt, i install the livereload browser plugin (http://livereload.com/extensions/) for .html, js and css and the package (https://www.npmjs.com/package/sails-hook-autoreload) for the models and controllers.
Works like a charm.
来源:https://stackoverflow.com/questions/31071363/get-livereload-to-work-with-sails-js