为livereload配置Gruntfile.js

Question

我正在使用Laravel作为我的后端框架,我希望在发生某些文件修改时进行实时重新加载.我仍然没有成功配置Gruntfile.js使其工作.

我想,我应该需要2个插件,grunt-contrib-watch和grunt-contrib-connect,我已经配置了Grutnfile.js如下.

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        watch: {
            options: {
                livereload: true
            },
            page: {
                files: ['*.php', '*.html'],
                tasks: ['connect']
            }
        },

        connect: {
            options: {
                port: 8000,
                protocol: 'http',
                hostname: '*',
                livereload: true
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-connect');

    grunt.registerTask('do-server', ['watch']);
    grunt.registerTask('do-connect', ['connect']);
};

请帮助我把事情搞定,当事情变得正确时,我只需要像咕噜咕噜地运行那样连接然后grunt将为我启动浏览器或者我必须手动打开浏览器和浏览器到指定的端口???

谢谢.

Answer 1

connect是一个静态文件服务器.它不解析和提供PHP文件; 只提供静态文件.您可以添加中间件来转换这些文件,因为它为它们提供服务,但如果使用PHP则不太可能.

可能你会使用nginx或apache作为你的服务器.PHP> = 5.4也有内置的Web服务器.所以另一种选择是grunt-php而不是connect.

grunt-contrib-connect和grunt-php都没有进行任何实时重新加载.实时重新加载都是从grunt-contrib-watch处理的.配置livereload: true将35729在后台等待的端口上启动服务器.

接下来,将脚本标记:添加<script src="//localhost:35729/livereload.js"></script>到PHP页面.然后访问该页面,通过http://localhost:5000您的站点所在的域/端口.这将为实时重新加载服务器创建一个Web套接字.更改文件后,监视任务将通知实时重新加载服务器,然后通过Web套接字通知您的浏览器.

如果您不想将脚本标记添加到页面,则可以安装浏览器扩展.有关详细信息,请参阅grunt-contrib-watch任务文档:https://github.com/gruntjs/grunt-contrib-watch#enabling-live-reload-in-your-html