npm

Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript.Learn more »

grunt-cruncher

1.3.0 • Public • Published

grunt-cruncher

Crunches every dependency of your web app into a single distributable file structure.

Getting Started

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

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

grunt.loadNpmTasks('grunt-cruncher');

Tasks:

processConfig

This task runs through a source config file and generates a consumable config file for use in your application. It supports comments and privates.

For example, our source config file looks like this:

{ 
  "public": "Hi there, buddy",
  //We do not want anyone to know about this!
    "top_secret": /*private*/ "SHUSH",
}

processConfig can split out two versions of the Config file, one private.json that contains the private references (for backend configuration), and one public.json that has the private references stripped out. It also ensures that the file is valid JSON in the end. Nifty!

Finally, it can output a javascript file that can be wrapped into any framework you like.

Usage Example

processConfig: {
 
    'public': {
        src: 'config.json',
        dest: 'config.public.json'
    },
 
    'private': {
 
        options: {
            type: 'private'
        },
 
        src: 'config.json',
        dest: 'config.private.json'
 
    }
    
}

This example outputs two configs in JSON format, both inheriting from root.json through the "extends" syntax.

inlineEverything

This task takes an HTML file(s) containing CSS, Javascript and Image Assets, and output Vendor-Permutated HTML with all of this content inlined (what else did you expect?) Images are base64 encoded and served inlined as well. It also supports multiple partials, say, for example: Retina and Non-Retina Asset Packs.

For example:

<html>
<script src="MyApp.js"></script>
<link href="MyStyles.css" rel="stylesheet" type="text/css">
</html>

would output:

<html>
<script>alert('foo');</script> 
<style>body{background-image:url(data:image/png;base64.......);}</style> 
</html>

Options

relativeTo

Type: String

Default: source

The location all of your included files are relative to. If your index.html is in source/index.html, that would be "source".

tags

Type: Object Default: {}

link

Type: Boolean|Function Default: true

Enables or disables the inlining of stylesheets. If you want to map a certain location to another one (i.e. "style.css" to "generated/style.css"), pass a function instead of "true". That function will then receive the found path, and allows you to return where to include from, like so:

link: function(src, engine) {
    src = src.replace('/css/', '/css/generated/').replace(/\.css$/, '.' + engine + '.css');
    return src;
}

Hint: grunt-cruncher will automatically search for vendor mutated versions of your CSS (i.e. style.webkit.css) and build a webkit-only build of your file then!

script

Type: Boolean|Function Default: true

Same as with link, if you want to map the sources files differently, pass a callback:

For example:
script: function(src) {
    src = src.replace('/js/', '/css/generated/');
    return src;
}

Usage Example

Given this directory structure:

build/
source/
	css/
	img/
	js/
	partials/
		non-retina/ 
			partial.html
			css/
			img/
		retina/ 
			partial.html
			css/
			img/
		pirate-version/ 
			partial.html
			css/
			img/
	templates/
		index.html
		generated/
			index.built.html
inlineEverything: {
    templates: {
        options: {
            relativeTo: 'source'
        },
 
        files: [
            {
                expand: true,
                cwd: SOURCE_FOLDER + '/templates/generated',
                src: '*.built.html',
                dest: 'build'
            },
            {
                expand: true,
                cwd: SOURCE_FOLDER + '/partials',
                src: '*/partial.html',
                dest: 'build/partials'
            }
        ]
 
    }
}

Keywords

none

install

npm i grunt-cruncher

Downloadsweekly downloads

18

version

1.3.0

license

none

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability