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
}
}
}
},
});