grunt-resman
v0.1.1
Published
A HTML resource manager.
Maintainers
ryn101Readme
grunt-resman
A HTML resource manager.
Getting Started
This plugin requires Grunt ~0.4.4
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-resman --save-devOnce the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-resman');Resman Task
Overview
Run this task with the 'grunt resman' command.
Resman is a tool to help manage shared resource references (Javascript, CSS) across multiple pages.
For example:
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- build:css css/shared.css -->
<link rel="stylesheet" href="./css/main.css" />
<link rel="stylesheet" href="./css/module-one.css" />
<link rel="stylesheet" href="./css/module-two.css" />
<!-- endbuild -->
</head>
<body>
<!-- build:js scripts/shared.js -->
<script type="text/javascript" src="./js/module-one.js"></script>
<script type="text/javascript" src="./js/app.js"></script>
<script type="text/javascript" src="./js/module-two.js"></script>
<script type="text/javascript" src="./js/util.js"></script>
<!-- endbuild -->
</body>
</html>If these blocks are required across multiple pages, it becomes difficult to maintain for large projects.
Options
resourceFileSrc
Type: String
The location of the resource file.
endIdentifier
Type: String
The closing tag identifier for all resource blocks that don't have their own endIdentifier declared. It doesn't need to adhere to any naming standards.
Usage Examples
Output
Refer to the Resource Block section
Single File
If no dest is specified, then all source files will be updated/overwritten.
grunt.initConfig({
resman: {
single: {
options: {
resourceFileSrc: './resman-resource.json'
},
src: './pages/index.html'
}
},
});Multiple Files
This will create a copy of the source files and place them in the 'tmp' directory.
grunt.initConfig({
resman: {
options: {
resourceFileSrc: './resman-resource.json'
},
multiple: {
files: [{
dest: './tmp/',
src: ['./pages/*.html'],
expand: true
}]
}
},
});Resource File
Resman requires a resource file, in JSON format.
This is used to map HTML comment blocks within a page to the appropriate resources.
For example:
{
"resourceBlocks": [
{
"type": "js",
"beginIdentifier": "build:js scripts/shared.js",
"endIdentifier": "endbuild",
"resources": [
"./js/app.js",
"./js/util.js",
"./js/module-one.js",
"./js/module-two.js"
]
},
{
"type": "css",
"beginIdentifier": "build:css css/shared.css",
"endIdentifier": "endbuild",
"resources": [
"./css/module-two.css",
"./css/main.css",
"./css/module-one.css"
]
}
]
}Resource Block
The resource file must contain a list of 'block' objects. These make up the 'resourceBlocks' array and map to each comment block within each html page:
For example:
HTML
<!-- build:js scripts/shared.js -->
<!-- endbuild -->** RESOURCE FILE **
{
"type": "js",
"beginIdentifier": "build:js scripts/shared.js",
"endIdentifier": "endbuild",
"resources": [
"./js/app.js",
"./js/util.js",
"./js/module-one.js",
"./js/module-two.js"
]
}In the above example, the resources declared within the the JSON block will be injected into the comment block.
Output:
** HTML**
<!-- build:js scripts/shared.js -->
<script type="text/javascript" src="./js/app.js"></script>
<script type="text/javascript" src="./js/util.js"></script>
<script type="text/javascript" src="./js/module-one.js"></script>
<script type="text/javascript" src="./js/module-two.js"></script>
<!-- endbuild -->Resource Block Required Values
type
Type: String
Default value: js
Values: js, css
The type of comment block. This is used to determine what type of resource to generate.
beginIdentifier
Type: String
The opening tag identifier for the resource block. It doesn't need to adhere to any naming standards.
endIdentifier
Type: String
The closing tag identifier for the resource block. This will override the option level value. It doesn't need to adhere to any naming standards.
resources
Type: Array
A list of all resource URIs that will be included in the resource block.
Contributing
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.
Release History
- v0.1.0 - Released to NPM
- v0.1.1 - Fixed a critical bug which prevented the task from functioning correctly.