grunt-addassets

Simple plugin to add js and css links to your project in a new file. Not sure this is really ready for the masses

Creates a new file in your project with any extension (.php, .html, .jsp) with a cache busted CSS link tag or JS script tag that you can include with whatever server technology you are using.

Goals

1. Any file extension on new files made
2. Cache busted links
3. Allow custom paths to assets to allow context or baseUrl
4. Allow CSS and JS, eventually allow extending of the list

Getting Started

This plugin requires Grunt ~0.4.2

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

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

grunt.loadNpmTasks('grunt-addassets');

The "addassets" task

Overview

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

grunt.initConfig({
  addassets: {
      css: {
        options: {
          type: 'css',//css or js
        },
        files: {
          'include/cssfiles.html': ['css/*.css'], //file to make : files to include
        },
      }
    },
});

Running the addassets:css task will create a new file cssfiles.html in the include folder. This file will have a link to each css file withing the css folder. The contents of cssfiles.html should look something like

<link rel="stylesheet" href="css/fileone.css?1393896952229205949" />
<link rel="stylesheet" href="css/filetwo.css?1393896952229205949" />

To add javascript files we can add another task to addassets

grunt.initConfig({
  addassets: {
      css: {
        options: {
          type: 'css',//css or js
        },
        files: {
          'include/cssfiles.html': ['css/*.css'], //file to make : files to include
        },
      },
      js: {
        options: {
          type: 'js',//css or js
        },
        files: {
          'include/jsfiles.html': ['js/*.js'], //file to make : files to include
        },
      }
    },
});

This should create a new file jsfiles.html in the include folder. Its contents should look like the following

<script src="js/one.js?1393896952229205949"></script>
<script src="js/two.js?1393896952229205949"></script>

Options

options.base

Type: string Default value: ''

A string value that is put before the filename when writing the file paths. Defaults to filepath from gruntfile.

options.cacheBust

Type: boolen Default value: 'true'

Turns the cache buster on and off. By default ?randomNumbers will be added to filepaths

options.cacheBuster

Type: function Default value: '((new Date()).valueOf().toString()) + (Math.floor((Math.random()*1000000)+1).toString())'

This is used to cache bust the files. This is llikely to get rewritten somehow.

options.type

Type: string Default value: css

Currently this can be css or js. This is used as a key to to find the proper output pattern from options.types. See options.types

options.types

Type: object Default value: { js: '<script type="@@filepath"></script>', css: '<link src="@@filepath" type="text/css" />' }

This stores the output patterns used when writing out the css or js tags. TODO: make this simple to extend

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

0.1.8

Fixed task names not being lowercase

0.1.7

Resolving filepath issues

0.1.5

Mostly just better docs

Fixing some tests

bump version number

0.1.4

Mostly just better docs

0.1.3

Adding base option