How to make Grunt livereload work with Symfony (files using *.html.twig extension) ?
livereload is working with sass however I have to refresh the page manually when I change a *.twig file.
I am using the livereload Chrome extension.
This is my Gruntfile
module.exports = function(grunt) {
// Time how long tasks take. Can help when optimizing build times
require('time-grunt')(grunt);
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
sass: {
files: 'src/ProjectBundle/Resources/public/scss/{,*/}*.{scss,sass}',
tasks: ['sass:dev']
},
css: {
files: [
'src/ProjectBundle/Resources/public/*.sass',
'src/ProjectBundle/Resources/public/*.scss'
]
},
js: {
files: [
'src/ProjectBundle/Resources/public/*.js',
'Gruntfile.js'
]
},
options: {
livereload: true
}
},
sass: {
dev: {
options: {
style: 'expanded',
compass: false
},
files: {
'src/ProjectBundle/Resources/public/css/main.css':'src/ProjectBundle/Resources/public/scss/main.scss'
}
}
},
gruntfile: {
files: ['Gruntfile.js']
},
browserSync: {
files: {
src : [
'**/*.twig',
'**/*.html',
'**/*.scss',
'**/*.css',
'**/img/*',
'**/*.js'
],
},
options: {
watchTask: true
}
}
});
// Load the Grunt plugins.
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-browser-sync');
// Register the default tasks.
grunt.registerTask('default', [
'browserSync',
'watch',
'sass:dev'
]);
};
just add a new section to the watcher part
some tips:
just be careful with **/*.js cause it will also "watch" the node_modules folder which slows it down.
use jit-grunt - makes things speedier aswell
my complete grunt file
};
seems to work ok for me