grunt-frontend

library2.0.4jsnpmunverified

A Grunt.js multi-task for CSS and JS minification that respects file modification dates to avoid unnecessary re-minification. Version 2.0.4 uses UglifyJS for JavaScript minification and CSSO for CSS minification, with automatic @import inlining and url() rewriting. Unlike basic minifiers, it stores a .build-catalog.json file to track state and checksums, saving CPU time and preserving modification dates for effective caching. Release cadence is low (last release years ago). Key differentiator: it skips re-minification of unchanged files and supports versioned URL schemes for cache busting.

devops

npm install grunt-frontend

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · GRUNT-FRONTEND

grunt-frontend

devopsjavascriptv2.0.4

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

grunt.initConfig

✓ grunt.initConfig({ 'frontend-js': { ... } });

✗ grunt.initConfig({ frontend: { ... } });

Global config is under 'frontend' key, but tasks are named 'frontend-js', 'frontend-css', 'frontend-index'. Do not confuse global config with task names.

grunt.loadNpmTasks

✓ grunt.loadNpmTasks('grunt-frontend');

✗ require('grunt-frontend');

Grunt plugins are loaded via grunt.loadNpmTasks, not directly require'd.

frontend-css task

✓ grunt.initConfig({ 'frontend-css': { main: { options: { minify: true }, files: [ { src: 'src/*.css', dest: 'out/css' } ] } } });

✗ grunt.initConfig({ 'frontend-css': { main: { files: { 'out/css': 'src/*.css' } } } });

The files format for frontend-css is an array of objects with src and dest, not a key-value pair like in frontend-js.

Shows minimal Grunt configuration with frontend-js and frontend-css tasks including global frontend config and loading the plugin.

module.exports = function(grunt) { grunt.initConfig({ frontend: { force: false, srcWebroot: './src', webroot: './dist' }, 'frontend-js': { main: { options: { minify: true }, files: { 'dist/js/bundle.js': ['src/js/*.js'] } } }, 'frontend-css': { main: { options: { minify: true, inline: true, rewriteUrl: true }, files: [{ src: 'src/css/*.css', dest: 'dist/css' }] } } }); grunt.loadNpmTasks('grunt-frontend'); grunt.registerTask('default', ['frontend-js', 'frontend-css']); };

Debug

Known issues

breakingIncompatible with Grunt 1.x: peer dependency requires grunt ~0.4.0, which is outdated.

fix

Use with Grunt 0.4.x or fork/upgrade the plugin.

affects: >=2.0.0

deprecatedUses deprecated UglifyJS (older version) and CSSO; no updates since 2015.

fix

Consider migrating to modern tools like webpack, gulp, or direct use of terser/postcss.

affects: *

gotchaThe .build-catalog.json file must not be deleted or edited manually; task behavior depends on it.

fix

Keep the catalog file in the project and include in .gitignore if needed.

affects: *

gotchaGlobal config key is spelled 'frontent' in example code in README (typo), but actual key is 'frontend'.

fix

Use 'frontend' for global config, not 'frontent'.

affects: *

Errors

Common errors & fixes

Warning: Task "frontend-js" not found. Use --force to continue.

Plugin not loaded or grunt.loadNpmTasks('grunt-frontend') missing.

fix

Add grunt.loadNpmTasks('grunt-frontend'); in Gruntfile.js.

ParseError: Invalid CSS after "@import"

CSS @import URL not resolvable or file missing.

fix

Ensure src paths in @import are relative to srcWebroot or use absolute paths correctly.

TypeError: Cannot read property 'length' of undefined

files configuration for frontend-css used key-value format instead of array of objects.

fix

Use array format: files: [{ src: 'src/*.css', dest: 'out/css' }].

Upgrade

Version history

2.0.4latest on npm

Audit

Dependencies

gruntrequiredpeer dependency; requires Grunt ~0.4.0 to run tasks

Agent activity

4 hits · last 30 days

node

Resources

githubgit://github.com/sergeche/grunt-frontend ↗

packagegrunt-frontend ↗

homepagehttps://github.com/sergeche/grunt-frontend ↗