Redaxscript

Asset builders are specialized frontend tools made for processing and minifying styles, scripts and fonts.

Styles

Define a collection inside a _{templateName}.css file:

@import 'foo.css';
@import 'bar.css';

Extend the postcss configuration inside your tasks/postcss.js file:

postcss:
{
	templateName:
	{
		src:
		[
			'templates/{templateName}/assets/styles/_{templateName}.css'
		],
		dest: 'templates/{templateName}/dist/styles/{templateName}.min.css'
	}
}

Register the task inside your gruntfile.js file:

grunt.registerTask('build-styles',
[
	'postcss:templateName'
]

Build the styles:

grunt build-styles

Scripts

Extend the uglify configuration inside your tasks/uglify.js file:

uglify:
{
	templateName:
	{
		src:
		[
			'templates/{templateName}/assets/scripts/{templateName}.js'
		],
		dest: 'templates/{templateName}/dist/scripts/{templateName}.min.js'
	}
}

Register the task inside your gruntfile.js file:

grunt.registerTask('build-scripts',
[
	'uglify:templateName'
]

Build the scripts:

grunt build-scripts

Fonts

Extend the rename and webfont configuration inside your tasks/rename.js and tasks/webfont.js file:

rename:
{
	templateName:
	{
		src:
		[
			'templates/{templateName}/assets/styles/_icon.tpl'
		],
		dest: 'templates/{templateName}/assets/styles/_icon.css'
	}
}

webfont:
{
	templateName:
	{
		src:
		[
			'node_templates/material-design-icons/{iconPath}.svg'
		],
		dest: 'templates/{templateName}/dist/fonts',
		options:
		{
			destCss: 'templates/{templateName}/assets/styles',
			template: 'templates/{templateName}/assets/styles/_icon.tpl'
		}
	}
}

Build the fonts:

grunt build-fonts

Edit on GitHub