node package manager
We need your input. Help make JavaScript better: Take the 2017 JavaScript Ecosystem survey »



Open files for preview

Getting Started

This plugin requires Grunt ~0.4.0

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-preview --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:


This plugin was designed to work with Grunt 0.4.x. If you're still using grunt v0.3.x it's strongly recommended that you upgrade, but in case you can't please use v0.3.2.

Preview task

Run this task with the grunt preview command.

Task targets, files and options may be specified according to the grunt Configuring tasks guide.

Usage Examples

There are three formats you can use to run this task.


preview: ["path/to/file/one.html"]

This opens the HTML file with the default app for HTML files.

Complex (with custom destination)

Assume we have this file structure for .tmp/

|- foo.html
+- bar/
    +- baz.html

and configure the preview task like:

preview: {
  html: {
    cwd: '.tmp'
    dest: 'http://localhost:9000'
    src: ["{,*/}*.html"]

This will open the following urls:

  • http://localhost:9000/foo.html
  • http://localhost:9000/bar/baz.html