concat

Mickael Daniel edited this page Apr 7, 2012 · 3 revisions

» Home

» Tasks


» clean: Wipe the previous build dirs.

» mkdirs: Prepares the build dirs.

» concat: Concatenate files. (built-in)

» css: Concats, replaces @imports and minifies CSS files.

» min: Minify files using UglifyJS (built-in)

» rev: Automate the revving of assets and perform the hash rename

» usemin: Replaces references to non-minified scripts / stylesheets


» serve: Spawns up a basic local http server

» connect: livereload version of serve task

Clone this wiki locally

Task - concat

Read the grunt documentation on concat built-in task

Concat is a built-in grunt task and allows you to easily concatenate a list of files.

concat: {
  'intermediate/js/scripts.js': [ 'js/plugins.js', 'js/script.js' ],
  'intermediate/css/style.css': [ 'css/*.css' ]
},

The mechanism is fairly simple:

  • config subprop are the destination files.
  • config subprop values are an array of glob patterns that will be expanded in the corresponding file arrays.

Each "fileset" is then concat into one file, the destination one.

If order is important, you might need to be a little more explicit here and specify each script to be included (as glob patterns won't ensure this). Actually, you can see this in action here with the intermediate/js/scripts.js file.

This is a really basic concat configuration, there's much more built-in in the grunt concat task, like banner comments, multiple build targets, and dynamic filenames. You're encouraged to edit this basic concat configuration to match your very own setup.