Grunt Livereload on localhost starts with WAMP / XAMPP / UniServerZ
I am trying to do my workflow in the first step above with Grunt tasks.
In my Gruntfile.js, I created several tasks. So far there is only grunt-contrib-sass and grunt-contrib-watch, so the .css files are automatically recompiled whenever I make changes to my .sass files.
I want to achieve the following:
I want to add a task that will listen to my local server which has been started with UniServerZ / XAMPP / WAMP or any other provider. I want to trigger a reboot every time I edit any file in the server base directory.
I know it's pretty easy to set up a task like this, for example "grunt-express" that starts a local server for you, but I really want to listen to a server running with UniServerZ / XAMPP / WAMP.
I would be grateful if you can see an example configuration for such a scenario, if possible.
source to share
This is how I did it with Wamp 2.2 on Windows 7.
First you need to configure grunt-contrib-watch properly using the "download" function. I also use grunt-sass and not grunt-contrib-sass because grunt-sass uses Libsass . LibSass is a C / C ++ port for the Sass engine, and it's faster.
To install them, use the following commands:
npm install grunt-contrib-watch --save-dev
npm install grunt-sass --save-dev
Here's an example Grunt file:
module.exports = function(grunt) {
grunt.initConfig({
watch: {
sass: {
files: 'folder/to/your/sass/**/*.sass',
tasks: ['sass:dist'],
options: {
livereload: true,
},
},
//Watch your theme files
livereload: {
files: ['pathToTheme/*.php', 'pathToTheme/img/**/*.{png,jpg,jpeg,gif,webp,svg}'],
options: {
livereload: true
},
}
},
sass: {
options: {
includePaths: ['where/to/find/additional/@import/scss/files'],
outputStyle: 'nested',
imagePath: 'how/to/rewrite/image/path',
sourceMap: true
},
dist: {
files: {
'output/file.css': 'input/file.scss'
}
}
},
});
// Default task
grunt.registerTask('default', ['watch']);
// Load NpmTask
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-sass');
};
You can save some load-grunt-tasks time and remove manual task loading:
require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks
Then I use the firefox (or chrome or safari) boot plugin .
Run the grumbling search task, open your site on localhost and click the icon in your browser. Now, if you edit the file you are viewing, the page should update accordingly.
A solution exists to automatically add the first js upload to your wordpress (in the .php function):
if (in_array($_SERVER['REMOTE_ADDR'], array('127.0.0.1', '::1'))) {
wp_register_script('livereload', 'http://localhost:35729/livereload.js?snipver=1', null, false, true);
wp_enqueue_script('livereload');
}
source to share