• Stars
    star
    184
  • Rank 209,187 (Top 5 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 12 years ago
  • Updated over 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A grunt kitchen that reduces your web ingredients down to their essence for optimal serving. Bon appétit!

grunt-reduce

NPM version Dependency Status Bitdeli Badge

A grunt kitchen that reduces your web ingredients down to their essence for optimal serving. Bon appétit!

grunt-reduce builds your web application based on the DOM. This has a number of advantages to the developer:

  • If the browser can see it, so can grunt-reduce - Develop for the browser not the build system!
  • Minimal configuration needed
  • No build system smells in your markup, javascript, css etc.
  • It's fast! No intermediate files on disk

Compatible with grunt v0.3.x and v0.4.x

Configuration

Minimal configuration:

module.exports = function( grunt ) {
  'use strict';

  grunt.initConfig({
    reduce: {
        root: 'app',
        outRoot: 'dist'
    }
  });

  grunt.loadNpmTasks('grunt-reduce');
};

Maximal configuration:

module.exports = function( grunt ) {
  'use strict';

  grunt.initConfig({
    reduce: {
        // Source folder
        root: 'app', // Default: 'app',

        // Build destination folder
        outRoot: 'dist', // Default: 'dist',

        // Root of your CDN. Optional
        //cdnRoot: 'https://my.amazon.s3.bucket',

        // minimatch patterns of files to include as base assets
        // Dependencies of these will be automatically populated
        // Paths are relative to reduce.root ('app')
        include: [
          '*.html',
          '.htaccess',
          '*.txt',
          '*.ico'
        ],

        // Browser support configuration to send to autoprefixer and other transforms.
        // Browser support syntax documentation: https://github.com/ai/autoprefixer#browsers
        browsers: [
            '> 1%',
            'last 2 versions',
            'Firefox ESR',
            'Opera 12.1'
        ],

        // Add Angular.js annotations with ng-annotate
        angular: false, // Default: false

        // Compile scss files
        scss: true, // Default: true

        // Compile less files and remove less.js from application
        less: true, // Default: true

        // Run all available jpeg and png optimizations on images
        // For maximum efficiency install jpegtran, optipng, pngcrush and pngquant
        optimizeImages: true, // Default: true

        // Add source maps for all transpiling and bundling
        sourceMaps: true, // Default: true

        // Revision file names with the md5 sum of the file content and move to /static/
        fileRev: true, // Default: true

        // Create a cache manifest file
        // If one already exists it will be ammended with static assets
        manifest: false, // Default: false

        // Set the 'async'-attribute on all script tags
        asyncScripts: true, // Default: true

        // Pretty print assets. Good for debugging
        pretty: false, // Default: false

        // Inline CSS backgrounds below this byte threshold as data-uris
        // There will be an old IE fallback to the original image
        // 0 disables.
        inlineSize: 4096 // Default: 4096
    }
  });

  grunt.loadNpmTasks('grunt-reduce');
};

Automated spriting

Even though most browsers support inlining images through data-uris, spriting is sometimes still needed.

grunt-reduce eases the pain of spriting considerably, down to a convenient little anotation in the image url of the images you want to sprite.

Say you have the following CSS:

.icon.calendar {
    background-image: url(icons/calendar.png);
}
.icon.email {
    background-image: url(icons/email.png);
}
.icon.contacts {
    background-image: url(icons/contacts.png);
}

Assuming all of these images are all smaller than 4k after minification grunt-reduce will inline them as data-uris. If what you really wanted was a sprite, you can do this instead:

.icon.calendar {
    background-image: url(icons/calendar.png?sprite=mySprite);
}
.icon.email {
    background-image: url(icons/email.png?sprite=mySprite);
}
.icon.contacts {
    background-image: url(icons/contacts.png?sprite=mySprite);
}

The build process will now generate an optimally packed sprite sheet for you, run that sprite sheet through lossless image optimization and replace the CSS image references with a reference to the generated sprite, including the sprite offset.

You may create several different sprite sheets by defining different sprite names in the sprite parameter.

When using this technique it is recommended to have a seperate dom element for each image with the same dimensions as the background image.

Note about data-uris: IE versions lower than 8 do not understand data-uris. grunt-reduce adds a fallback to get the original image using conditional comments for these old IE versions.

Internationalization

Internationalization is optional, and is done by parsing in a locales key to the grunt reduce configuration like so:

module.exports = function( grunt ) {
  'use strict';

  grunt.initConfig({
    reduce: {
        // Source folder
        root: 'app', // Default: 'app',

        // Build destination folder
        outRoot: 'dist', // Default: 'dist',

        // Output languages
        locales: [
            'da',
            'en'
        ]
    }
  })
}

Please read the internationalization documentation in Asset Graph Builder project for more information on the subject.

Tools used

License

Copyright (c) 2012 Peter Müller Licensed under the MIT license.

More Repositories

1

subfont

Command line tool to optimize your webfont loading. Aggressive subsetting based on your font use, self-hosting of Google fonts and preloading
JavaScript
1,561
star
2

fusile

A web asset precompiling file system proxy.
HTML
233
star
3

hyperlink

A node library and command line tool to test the integrity of your internal an external hyperlinks
JavaScript
227
star
4

assetviz

Assetviz is a web application code base visualization tool. Generate a self encapsulated html-file with a force directed graph representing the assets in your project and their relations.
JavaScript
87
star
5

netlify-plugin-checklinks

Netlify build plugin check your links and asset references
JavaScript
86
star
6

netlify-plugin-subfont

Netlify build plugin to run automated web font loading optimizations on static pages
JavaScript
67
star
7

node-histogram

Javascript histogram library that gives you a data structure describing your PNG/JPEG/GIF. Works in NodeJS and any canvas supporting browser. Added bonus: Exports AMD module in the browser if require.js is loaded, otherwise falls back to exposing histogram on window.
JavaScript
62
star
8

generator-greenfield

A full and clean frontend web workflow Yeoman generator. Simple configuration, powerful preprocessing and image pipeline, livereload and a highly optimized production build output
ApacheConf
42
star
9

netlify-plugin-hashfiles

Netlify build plugin to get optimal file caching with hashed file names and immutable cache headers
JavaScript
32
star
10

express-systemjs-translate

Express middleware to speed up systemjs development loads by running translations serverside
JavaScript
28
star
11

tolk

A file reader that promises to translate non-web assets to web assets given the available transpilers. Autoprefixing, sourcemaps and all!
HTML
27
star
12

generator-npm-webapp

A full and clean frontend web workflow Yeoman generator with npm as task runner. Simple configuration, powerful preprocessing and image pipeline, livereload and a highly optimized production build output
JavaScript
16
star
13

express-compile-sass

Express middleware to compile sass in the HTTP stream
CSS
15
star
14

yify-query

Find torrent magnet links from the yify database directly from the command line or in your node modules
JavaScript
14
star
15

todomvc-challenge

Challenge: Use assetgraph to build every example app from TasteJS/TodoMVC
JavaScript
13
star
16

contentsecure

A Content Security Policy auto generator (DEPRECATED)
JavaScript
12
star
17

expush

Express with spdy push of static assets and proxy passthrough for non-static assets
JavaScript
11
star
18

pipetteur

A function to extract any colors from a string
JavaScript
11
star
19

grunt-livestyle

A static file development server with automated file watching, less/sass/jsx preprocessing, image preprocessing, autoprefixing and proxy passthrough
JavaScript
10
star
20

episode

JavaScript utility function to find tv series season and episode numbers from a string
JavaScript
9
star
21

synesthesia

A collection of regular expressions to match color syntax substrings from a text
JavaScript
7
star
22

svg-clock

JavaScript
7
star
23

dotfiles

Shell
7
star
24

webapp-skel

Web application skeleton directory set up for builds of webapps with Ext JS using assetgraph-builder
JavaScript
6
star
25

bower-to-jspm

Utility to help you migrate from bower to jspm. Finds packages on npm and github and generates jspm install command lines
JavaScript
6
star
26

express-legacy-csp

Downgrade content-security-policy version and fidelity to support the requesting browser
JavaScript
6
star
27

schemes

IANA Uniform Resource Identifier (URI) Schemes list, including crowd sourced unofficial ones
JavaScript
5
star
28

jspm-config-test

A tool to run through your jspm config and check if all modules load without errors. Helps debug missing dependencies or shims
JavaScript
5
star
29

webpack-assetgraph-plugin

EXPERIMENTAL! Assetgraph plugin for webpack that will include all referenced external assets in the build
JavaScript
5
star
30

buildfu

A collection of CLI tools for improving web performance optimization and building webapps
JavaScript
5
star
31

generator-webapp-assetgraph

An alternative grunt workflow leveraging the power of Assetgraph
ApacheConf
5
star
32

ambitus

A calendar interval controller
JavaScript
5
star
33

ezflix

Play video directly from eztv torrents
JavaScript
4
star
34

pressable

JavaScript representations of pressable keys that aren't text. These are stored in the Unicode PUA (Private Use Area) code points, 0xE000-0xF8FF.
JavaScript
4
star
35

playify

Play movies from yify directly from the command line using torrentstream
JavaScript
4
star
36

JS-snippets

Collection of often used JS scripts
JavaScript
4
star
37

fontinspect

Trace the web font usage of a particular web page on the command line
JavaScript
4
star
38

requirejs-istanbul

RequireJS plugin to instrument modules with Istanbul for code coverage
JavaScript
3
star
39

www.browserling.com

Build system experiment using www.browserling.com as an example
JavaScript
3
star
40

LSB-improvement

Lån og Spar netbank forbedring via Chrome/Firefox userscript
JavaScript
2
star
41

coronasmitte.netlify.app

A clone of the Danish Police website limited to the sections about coronavirus.
JavaScript
2
star
42

no-build-system

A talk about build systems for EmpireJS 2014
CSS
2
star
43

mntr.dk

My blog
CSS
2
star
44

plugin-subfont-demo

Demo page for Jamstack 2020 virtual netlify-plugin-subfont
HTML
2
star
45

colorcat

Demo: CSS3 nyan cat with color adjustment inputs using One-color.js
JavaScript
2
star
46

micro.offset

Microlib to get the offset of a DOM element on the page
JavaScript
2
star
47

RevyTeX

LaTeX environment and scripts for the science revues at Copenhagen university
TeX
2
star
48

BallsBallsBalls

A quiz about balls
CSS
2
star
49

hoodie-css-local

Example setup for applying local css to remote proxied website
HTML
2
star
50

node-color-commando

Nothing but the bare naked color math. CLI owns a pretty color picker every time!
JavaScript
2
star
51

assetgraph-webbundle

Assetgraph transform to create a webbundle from the existing graph
JavaScript
2
star
52

tap-spot

Compact dot reporter for TAP output. Supports skip and todo
JavaScript
2
star
53

talk-images

Assets for a talk about auto generated image variants in development and static builds
CSS
2
star
54

svelte-a11y-tree

Svelte-based implementation of the WAI-ARIA TreeView: https://www.w3.org/TR/wai-aria-practices/#TreeView
JavaScript
2
star
55

toggleprint

Defines a hotkey that can toggle your print stylesheets to be applied on your screen for fast print stylesheet iteration
JavaScript
2
star
56

rollcount

An experiment in CSS 3d transforms for making a rolling slot counter
CSS
1
star
57

coin

Mac Donalds coin offer code generator
JavaScript
1
star
58

hyperlink-webpack

Temporary testing ground for running hyperlink on webpack docs
HTML
1
star
59

requirejs-react-hotload

JavaScript
1
star
60

assetgraph-relation-htmlimportmap

Assetgraph relation to model import maps from HTML assets
JavaScript
1
star
61

talk-transpiling-recomposed

A talk about the complexity of configuring transpilers for your web development workflows
JavaScript
1
star
62

system-plugin-jsx-bug

JavaScript
1
star
63

ren-lyrics

Lyrics and subtitles of Ren songs with translations
1
star
64

perf

JavaScript
1
star
65

jquery-datatables

HTML
1
star
66

jquery-prestige

A jQuery plugin that makes any dom element a clickable file input.
CSS
1
star
67

micro.mouse

Microlib to fix mouse event differences
JavaScript
1
star
68

companydata

JavaScript
1
star
69

semihkirdinli.github.io

HTML
1
star
70

node-sass-evergreen

node-sass compatibility wrapper providing nodes-sass compatibility with previous major versions
JavaScript
1
star
71

yeoman-angular-reduce-example

Example repos to demonstrate how to adapt a yeoman generated angular application to use grunt-reduce as a build system
JavaScript
1
star
72

m.lanyrd.com

Repo for experimenting with build system optimization of m.lanyrd.com
Shell
1
star
73

Userscripts

Random userscripts for different websites I use
JavaScript
1
star
74

node-untile

Combines map tiles into a sinlge map png
JavaScript
1
star
75

apollo-pokedex-experiment

Personal playground for learning Apollo and Graphql via Pokedex
JavaScript
1
star
76

MochaJsdomReact

Temporary repository to debug a crazy Mocha / Jsdom / React combination failure
JavaScript
1
star
77

seespee.netlify.com

Website for seespee
JavaScript
1
star
78

CloudPun

Pun web page for cloud presentation at Open Source Days
JavaScript
1
star
79

FileJS

A collection of small decoupled javascript AMD modules for file input and upload
JavaScript
1
star