I'm developing a small HTML/JS/SASS project without an backend/server and I'm trying to get Livereloading to work.
In my grunt.initConfig I have:
options: {
livereload: true,
},
But in Chrome I can't activate the Liverload plugin on a local html file.
file:///C:/Users/alucardu/Documents/Visual%20Studio%202015/Projects/JS-demo/JS-demo/index.html
Is this possible to do or do I need to run a server?
Apparently Grunt has something for this called connect > https://github.com/gruntjs/grunt-contrib-connect
When I installed it I added this to my gruntFile:
connect: {
server: {
options: {
open: true,
keepalive: true,
hostname: 'localhost',
port: 8080,
base: ''
}
}
},
And now I can run a local static server :)
Related
I am using "webpack": "^5.58.2" and "webpack-dev-server": "^4.3.1" on a WordPress theme development project. every thing is going good except one issue, I am using proxy to watch url (example.test) on server url (localhost:8080) here is my dev server config
devServer: {
devMiddleware: {
writeToDisk: true,
},
historyApiFallback: true,
open: true,
compress: true,
hot: true,
port: 8080,
watchFiles: ['../**/*.php'],
proxy: {
'/': {
target: 'http://example.test',
changeOrigin: true,
},
},
},
I have some absolute link on site like http://example.test/sample-page, I want it like //localhost:8080/sample-page on serve/watch mode.
it works fine on "browser-sync-webpack-plugin" plugin.
Is it possible to achieve on webpack-dev-server? if possible how can I do that?
When I try using Grunt to create a server for me it quickly shuts down and doesn't give me a change to go to my browser and test it.
This is my entire Grunt file:
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.initConfig({
connect: {
serve: {
options: {
port: 8081,
base: '/',
hostname: '*',
debug: true
}
}
}
});
grunt.registerTask('default', ['connect']);
}
When I run it, it works without errors:
C:\Users\Imray\my-sandbox>grunt
Running "connect:keepalive" (connect) task
Started connect web server on http://0.0.0.0:8000
Running "connect:serve" (connect) task
Started connect web server on http://0.0.0.0:8081
You have the keepalive settings dedicated for this :
grunt.initConfig({
connect: {
serve: {
options: {
keepalive: true,
port: 8081,
base: '/',
hostname: '*',
debug: true
}
}
}
});
I know there are some quite similar questions, but I can't get it to work.
I'm using grunt, including connect, less and watch. Everything works, except for the livecompiling of the .css with less and watch. Like this, I always have to restart grunt etc.
This is my code:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
connect: {
server: {
options: {
port: 8000,
hostname: 'localhost',
base: 'public',
keepalive: true
}
}
},
less: {
development: {
options: {
compress: true,
yuicompress: true,
optimization: 2
},
files: {
"public/style/style.css": "public/style/main.less"
}
}
},
watch: {
files: ['**/*'],
tasks: ['less', 'connect'],
styles: {
files: ['public/style/main.less'], //which files to watch
tasks: ['less'],
options: {
livereload: true
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['less','connect','watch']);
};
Please let me know if more information is needed.
You have to add the livereload snippet in your html file to get it works:
<script>
document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"><\/script>')
</script>
35729 is the port of your livereload server.
To further information see the documentation. Also you should read how to enable livereload in your html.
In addition to Mario's answer, I tried around a little.
I found the solution like this:
I ran watch alone, without less or connect and I noticed that it left something in the console, which I did not see in the console when I had it running in combination with connect and less. Next thing I noticed was the "Waiting forever..." in connect's entry in the console. Like this, nothing happenend, because it waited forever. The consequence of this was that watch could not be executed. That also explains why I never watch's entry in the console.
So the solution was this:
I had to delete "keepalive:true" from connect in the Gruntfile.
Just started using Yeoman Angular generator, but when I run grunt server command, it always opens IE. Tried changes in GruntFile.js
autoprefixer: {
options: {
browsers: ['last 1 version', 'Chrome']
}
But it gives error
Any clues how to get it working?
Simply in your Gruntfile.js you can add an app parameter:
open: {
server: {
url: 'http://localhost:XXXXXXXX',
app: 'Google Chrome'
}
},
This will work.
For reference check this link https://github.com/GabLeRoux/grunt-open/commit/6f2c7069767e58160ec96aaaa8fa20ed210ba183
If you are still having problems, the following should work:
livereload: {
options: {
open: {
appName: "google-chrome"
},
I have done some searching but have not been able to find a solution to my issue - I would like to have my page livereload after the main.css file is updated by converting bootstrap.less, all done through grunt tasks and grunt serve.
Code I have tried so far:
In Gruntfile.js
grunt.initConfig({
less: {
development: {
options: {
paths: ["bower_components/bootstrap/less"]
},
files: {
"app/styles/main.css": "bower_components/bootstrap/less/bootstrap.less"
}
},
watch: {
styles: {
files: ['app/styles/{,*/}*.css'],
options:{
livereload: true,
}
},
less: {
files:['bower_components/bootstrap/less/{,*/}*.less'],
tasks: ['less']
},
When running grunt serve and then editing any .less file the bootstrap.less successfully compiles into main.css. The issue I'm having is I have to kill my grunt serve instance and start up another one for any of the css changes to take effect (however, changes to the HTML appear as expected with no need to refresh the page/kill server)
Some notes:
Even after compiling the bootstrap.less file and opening the main.css file and "editing" it manually the livereload does not work even though my console shows "app\styles\main.css" changed and then shows "Live reloading app\styles\main.css..." (it says it completed in 0.000s which does not seem correct)
I do have the "livereload" extension installed for both Chrome and Firefox and neither appear to help the situation
My bootstrap.less file is composed of all #imports (when researching it seemed like this may cause an issue)
I'm working with:
"grunt": "~0.4.1",
"grunt-contrib-watch": "~0.6.1",
"load-grunt-tasks": "~0.4.0",
"grunt-contrib-less": "^0.11.0"
For reference here are my grunt server settings:
connect: {
options: {
port: 9000,
open: true,
livereload: 35729,
// Change this to '0.0.0.0' to access the server from outside
hostname: 'localhost'
},
livereload: {
options: {
middleware: function(connect) {
return [
connect.static('.tmp'),
connect().use('/bower_components', connect.static('./bower_components')),
connect.static(config.app)
];
}
}
},
test: {
options: {
open: false,
port: 9001,
middleware: function(connect) {
return [
connect.static('.tmp'),
connect.static('test'),
connect().use('/bower_components', connect.static('./bower_components')),
connect.static(config.app)
];
}
}
},
dist: {
options: {
base: '<%= config.dist %>',
livereload: false
}
}
},
Also, this is my first post/question - feel free to let me know if I should be doing anything differently.
Thanks!