Have ideas to improve npm?Join in the discussion! »

    grunt-resman

    0.1.1 • Public • Published

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

    Once 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.

    Install

    npm i grunt-resman

    DownloadsWeekly Downloads

    1

    Version

    0.1.1

    License

    none

    Last publish

    Collaborators

    • avatar