Question

我希望你能帮助我。为什么这个gruntfile不能用于livereload？我跟着很多关于它的指南，但似乎都没有奏效。在控制台内部没有出现任何错误，“服务器”正常启动，但是当您修改文件时，不会发生自动刷新

'use strict';


module.exports = function(grunt) {

    // Load grunt tasks automatically
    require('load-grunt-tasks')(grunt);

    // Time how long tasks take. Can help when optimizing build times
    require('time-grunt')(grunt);

    // Configurable paths for the application
    var appConfig = {
        app: require('./bower.json').contability.config.src || 'src',
        bowerdir: grunt.file.readJSON('.bowerrc').directory || 'bower_components',
        module: require('./bower.json').name
    };
    grunt
          .initConfig({
            php: {
                  dist: {
                      files:'src/*.{html,css,less,php,js}'
                      ,
                      options: {
                          hostname: '127.0.0.1',
                          port: 9000,
                          base: 'src', // Project root
                          keepalive: true,
                          open: true
                      }
                  }
              },
              browserSync: {
                  dist: {
                      bsFiles: {
                          src: 'src/*.{html,css,less,php,js}'
                      },
                      options: {
                          proxy: '<%= php.dist.options.hostname %>:<%= php.dist.options.port %>',
                          watchTask: true,
                          notify: true,
                          open: true,
                          logLevel: 'silent',
                          ghostMode: {
                              clicks: true,
                              scroll: true,
                              links: true,
                              forms: true
                          }
                      }
                  }
              },
              contability: appConfig,


              // Watches files for chan2ges and runs tasks based on the changed files
              watch: {
                  bower: {
                      files: ['bower.json'],
                      tasks: ['wiredep']
                  },
                  js: {
                      files: ['<%= contability.app %>/**/*.js'],
                      tasks: ['newer:jshint:all'],
                      options: {
                          livereload: '<%= connect.options.livereload %>'
                      }
                  },
                  styles: {
                      files: ['<%= contability.app %>/**/*.css'],
                      tasks: ['newer:copy:styles', 'autoprefixer'],
                      options: {
                          livereload: '<%= connect.options.livereload %>'
                      }
                  },
                  less: {
                      files: ['<%= contability.app %>/**/*.less'], // which files to watch
                      tasks: ['less:dist'],
                      options: {
                          nospawn: true,
                          livereload: '<%= connect.options.livereload %>'
                      }
                  },
                  gruntfile: {
                      files: ['Gruntfile.js']
                  },
                  livereload: {
                      options: {
                          livereload: true
                      },
                      files: [
                          '<%= contability.app %>/**/*.{html,css,less,php,js}',
                          '!<%= contability.app %>/**/*.tpl.html',
                          '<%= contability.app %>/images/**/*.{png,jpg,jpeg,gif,webp,svg}'
                      ]
                  },
                  tpl: {
                      files: ['<%= contability.app %>/**/*.tpl.html'],
                      tasks: ['html2js:dev'],
                      options: {
                          livereload: '<%= connect.options.livereload %>'
                      }
                  }
              },
              html2js: {
                  options: {
                      module: '<%= contability.module %>-tpls',
                      quoteChar: '\'',
                      useStrict: true
                  },
                  dist: {
                      src: ['<%= contability.app %>/**/*.tpl.html'],
                      dest: '<%= contability.tmp %>/tpl/templates.js'
                  },
                  dev: {
                      src: ['<%= contability.app %>/**/*.tpl.html'],
                      dest: '<%= contability.app %>/tpl/templates.js'
                  }
              },
              wiredep: {
                  task: {
                      // Point to the files that should be updated when
                      // you run `grunt wiredep`
                      src: [
                          '<%= contability.app %>/index.html', // .html support...
                      ],
                      options: {
                          exclude: ['bower_components/bootstrap/dist/js']
                      }
                  }
              },
              connect: {

                options: {
                    port: 9000,
                    hostname: 'localhost',
                    //keepalive: true
                    livereload: 35729
                },
                proxies: [{
                    context: '/remote/rpc',
                    host: 'localhost',
                    port: 9080,
                    https: false,
                    changeOrigin: false,
                    rewrite: {
                        '^/remote/rpc': '/<%= contability.src %>/'
                            /*},
                        headers: {
                            'x-custom-added-header': 'value'*/
                    }
                }],
                dist: {
                    options: {
                        open: true,
                        base: '<%= contability.dist %>'
                    }
                },
                // nde new block for tests
                testserver: {
                    options: {
                        port: 9999
                    }
                }
            },
    });

    grunt.loadNpmTasks('grunt-browser-sync');
    grunt.loadNpmTasks('grunt-php');
    grunt.loadNpmTasks('grunt-contrib-watch');

    grunt.registerTask('serve', [

          'html2js:dev',
          'php:dist',         // Start PHP Server
          'browserSync:dist', // Using the PHP instance as a proxy
          'wiredep',
          'watch'

      ]);
}

Answer 1

就我而言，我使用以下内容：

grunt.initConfig({
    ...
    watch: {
        options: {
            livereload: true,
            livereloadOnError: false,
        },
        configFiles: {
            files: [ 'Gruntfile.js' ],
            options: {
                reload: true
            }
        },            
        livereload: {
            // Browser live reloading
            // https://github.com/gruntjs/grunt-contrib-watch#live-reloading
            options: {
              livereload: true
            },
            files: [
                'path_to/*.php'
            ]
        }
    },
    ...
});

我必须在 index.php 中的 html 标签之间添加以下内容：

<head>
    <script src="//localhost:35729/livereload.js"></script>
</head>

php和grunt实时重新加载

1 个答案: