Configure reveal.js to launch browser

Configure reveal.js to launch browser

For more than 1,5 years I rely on reveal.js for my presentations and so far the setup works quite fine for me. However there was one thing which I wanted to change: After launching the built-in webserver via Grunt I needed to launch my browser (Chrome) manually. To sharpen my Grunt skills I went out to find a solution. In the end it turned out to be rather simple ;) - I came across the grunt-open package which allows us to "open urls and files from a grunt task". This is how I set things up:


Add the following line to your package.json file as a "devDependency" and run npm install afterwards to install the dependency in your project.

"grunt-open": "~0.2.3"


In your Gruntfile.js add the following configuration for the Grunt task:

open: {
    all: {
        path: 'http://localhost:<%= connect.server.options.port %>',
    }
}


Load the grunt-open task in your Gruntfile.js by adding the following line to the section where the other tasks are loaded:

grunt.loadNpmTasks( 'grunt-open' );


Last not least re-configure the serve Grunt task to include the execution of the open task. Find the line in the Gruntfile.js where the serve task is registered and change it to:

grunt.registerTask( 'serve', [ 'connect', 'open', 'watch' ] );


This will launch the built-in webserver, launch your system-wide configured default browser and watch the source files for changes. Launch the serve task on the command-line by running:

grunt serve


When I tried to launch grunt like this the first time the following error message came up:

Warning: Cannot read property 'orig' of undefined Use --force to continue.


After a bit a research it turned out that there seems to be an issue with grunt-zip task used by reveal.js to pack the presentation. After commenting out the grunt-zip task everything worked perfectly fine. You can replace the grunt-zip task with the grunt-contrib-compress task if you need or want to export your presentation.
There are quite a few things you can configure with grunt-open. Check the documentation on github if you want to tweak things a bit.


Eintrag von Stephan Hochdörfer am 02.01.2015

Tags: reveal.js, Grunt, Chrome

Diese Webseite verwendet Cookies, um die Bedienfreundlichkeit zu erhöhen. Mit der Nutzung unserer Webseite wird das Einverständnis erklärt, dass wir Cookies verwenden. Weitere Informationen.