Grunt livereload and *html.twig files

Question

如何使Grunt livereload与Symfony一起工作（使用*.html.twig扩展名的文件）？

livereload 正在使用 sass，但是当我更改 *.twig 文件时，我必须手动刷新页面。

我正在使用livereload Chrome扩展程序。

这是我的咕噜咕噜文件

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'
  ]);
};

Answer 1

只需向观察器部分添加一个新部分

watch: {
        js: {
            files: ['app/**/*.js'],
            tasks: ['concat:js_quick'],
            options: {
                spawn: false,
                livereload: true
            }
        },
        css: {
            files: ['app/**/*.less','app/style.css'],
            tasks: ['watcher_css'],
            options: {
                spawn: false,
                livereload: true
            }
        },
        twig: { 
            files: ['app/**/*.twig'],
            options: {
                spawn: false,
                livereload: true
            }
        }
    }

一些提示：

只是小心**/*.js因为它也会"监视"node_modules文件夹，这会减慢它的速度。

使用抖动咕噜声 - 让事情更快

我完整的咕噜咕噜文件

var jsfile = [ ... ] // list of js files to concat

module.exports = function (grunt) {
require('time-grunt')(grunt);
require('jit-grunt')(grunt);
grunt.initConfig({
    concat: {
        js: {
            options: {
                separator: ';',
                stripBanners: true,
                sourceMap :true,
                sourceMapName : 'app/javascript.js.map'
            },
            src: jsfile,
            dest: 'app/javascript.js',
            nonull: true
        },
        js_quick: {
            options: {
                separator: ';',
                stripBanners: true
            },
            src: jsfile,
            dest: 'app/javascript.js',
            nonull: true
        }
    },
    clean: {
        map: ["app/javascript.js.map"],
    },
    uglify: {
        js: {
            files: {
                'app/javascript.js': ['app/javascript.js']
            }
        }
    },
    less: {
        style: {
            files: {
                "app/style.css": "app/_less/style.less",
            }
        }
    },
    cssmin: {
        options: {
            report: "min",
            keepSpecialComments: 0,
            shorthandCompacting: true
        },
        style: {
            files: {
                'app/style.css': 'app/style.css',
            }
        }
    },
    watch: {
        js: {
            files: ['app/**/*.js'],
            tasks: ['concat:js_quick'],
            options: {
                spawn: false,
                livereload: true
            }
        },
        css: {
            files: ['app/**/*.less','app/style.css'],
            tasks: ['watcher_css'],
            options: {
                spawn: false,
                livereload: true
            }
        },
        twig: {
            files: ['app/**/*.twig'],
            options: {
                spawn: false,
                livereload: true
            }
        }
    }
});



grunt.registerTask('jsmin', ['uglify:js']);
grunt.registerTask('js', ['concat:js_quick','clean:map']);
grunt.registerTask('jsmap', ['concat:js']);
grunt.registerTask('watcher_css', ['newer:less:style']);
grunt.registerTask('css', ['less:style']);
grunt.registerTask('build', ['concat:js','less:style', 'uglify:js','cssmin:style','clean:map']);
grunt.registerTask('default', ['watch']);

};

似乎对我工作正常