Question

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

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

我正在使用livereload 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-grunt - 使事情变得更快

我完整的咕噜文件

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

};

对我来说似乎没问题

Grunt livereload和* html.twig文件

1 个答案: