Grunt livereload и * html.twig файлы

Question

Как сделать работу Grunt с использованием Symfony (файлы с расширением * .html.twig)?

livereload работает с sass, однако мне нужно обновить страницу вручную, когда я изменяю файл * .twig.

Я использую расширение Chrome для Chrome.

Это мой 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' 
    ]); 

}; 

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, которая замедляет ее.

использование JIT-Грунт - делает вещи быстрее как хорошо

мой полный хрюкать файл

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

};

, похоже, работает нормально