grunt-builder

Build app with index.html main development file

grunt-builder

Grunt plugin allowing to build js and css app files with index.html main development file. It uses Uglify.js for minification.

Example with index.html development file :

<!DOCTYPE html>
<html manifest="manifest.appcache">
  <head>
    <link href="font.css" rel="stylesheet" data-bundle="app.css">
    <link href="app.css" rel="stylesheet" data-bundle="app.css">
  </head>
  <body>
    <script type="text/javascript" src="backbone.min.js" data-bundle="vendors.js"></script> 
    <script type="text/javascript" src="underscore.min.js" data-bundle="vendors.js"></script> 
    <script type="text/javascript" src="models.js" data-bundle="app.min.js" data-minify="true"></script> 
    <script type="text/javascript" src="router.js" data-bundle="app.min.js" data-minify="true"></script> 
    <script type="text/javascript" src="views.js" data-bundle="app.min.js" data-minify="true"></script> 
  </body>
</html>

Files generated : app.css vendors.js app.min.js

You can also specified to create a manifest.appcache file with js and css files generated.

This plugin requires Grunt ~0.4.1

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-builder --save-dev

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

grunt.loadNpmTasks('grunt-builder');

In your project's Gruntfile, add a section named builder to the data object passed into grunt.initConfig().

grunt.initConfig({
  builder: {
    app: {
      src: //indicate base file (index.html), 
      options: {
        //builder options 
      }
    }
  },
});

Type: String Default value: ''

Specific directory app .

Type: Boolean Default value: false

Need to be true for generate the Manisfest cache file.

Type: Object Default value: {}

Options for manifest cache file (optionalFiles excludeFiles)

grunt.initConfig({
  builder: {
    app: {
      src: 'index.html'
    }
  },
});

With all Custom Options used

grunt.initConfig({
  builder: {
    app: {
      src: 'index.html',
      options: {
        directory: 'backbone/',//forder app if it different 
        appcache: true,//need it for generate the manifest cache file 
        appcacheOptions: {
          optionalFiles: ['vendor/fonts.min.css'],//add specifics no build files in manifest.appcache                  
          excludeFiles: ['vendors.js']//exclude specifics build files in manifest.appcache 
        }
      }
    }
  },
});