0

I'm using Laravel as my back-end framework, I would like to have live reloading when some file's modification occurs. I still don't successfully configure the Gruntfile.js to make it works.

I think, I should need 2 plugins, grunt-contrib-watch and grunt-contrib-connect, and I have configured Grutnfile.js as follow.

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

Please help me to get things right, when things get right, I only have to run as grunt do-connect then grunt will launch the browser for me or I have to open browser and browser to the specified ports manually???

Thanks.

Artisan
  • 4,042
  • 13
  • 37
  • 61

1 Answers1

5

connect is a static file server. It doesn't parse and serve PHP files; just serves static files. You can add middleware to transform those files as it serves them but not likely what you need if using PHP.

Likely you would be using nginx or apache as your server. PHP >= 5.4 also has a built-in web server. So another option is grunt-php instead of connect.

Neither grunt-contrib-connect nor grunt-php does any live reloading. Live reload is all handled from grunt-contrib-watch. Configuring livereload: true will start a server on port 35729 that waits in the background.

Next, add a script tag: <script src="//localhost:35729/livereload.js"></script> to your PHP page. Then visit the page, either through http://localhost:5000 or wherever the domain/port your site resides. This will create a web socket to the live reload server. Upon changing a file, the watch task will notify the live reload server which will then notify your browser through the web socket.

If you dont want to add the script tag to your page, you can install a browser extension. See the grunt-contrib-watch tasks docs for more info: https://github.com/gruntjs/grunt-contrib-watch#enabling-live-reload-in-your-html

Kyle Robinson Young
  • 13,732
  • 1
  • 47
  • 38
  • My understanding now is that i just have to (1) add the script tag you suggest to my project index page, (2) config the grunt-contrib-watch with livereload option enabled, (3) start browsing my project with normal local address e.g. http://localhost/project/index.php ??? – Artisan Jan 20 '14 at 14:28
  • Yep. But if you run into issues, use `grunt watch --verbose` to view more info about the files your watch and when they trigger. – Kyle Robinson Young Jan 20 '14 at 15:53
  • I'm using MAMP to serve PHP apps, and grunt-contrib-watch to use livereload with grunt-contrib-connect. No need to include your [L]AMP stack inside grunt. – Quinn Comendant Sep 06 '14 at 17:28