Redaxscript

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

Styles

Define a collection inside a _{template-name}.css file:

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

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

postcss:
{
	templateName:
	{
		src:
		[
			'templates/{template-name}/assets/styles/_{template-name}.css'
		],
		dest: 'templates/{template-name}/dist/styles/{template-name}.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 babel configuration inside your tasks/babel.js file:

babel:
{
	templateName:
	{
		src:
		[
			'templates/{template-name}/assets/scripts/{template-name}.js'
		],
		dest: 'templates/{template-name}/dist/scripts/{template-name}.min.js'
	}
}

Register the task inside your gruntfile.js file:

grunt.registerTask('build-scripts',
[
	'babel: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/{template-name}/assets/styles/icon.css'
		],
		dest: 'templates/{template-name}/assets/styles/_icon.css'
	}
}

webfont:
{
	templateName:
	{
		src:
		[
			'node_modules/@mdi/svg/svg/{icon-name}.svg'
		],
		dest: 'templates/{template-name}/dist/fonts',
		options:
		{
			destCss: 'templates/{template-name}/assets/styles',
			template: 'templates/{template-name}/assets/styles/_template.css'
		}
	}
}

Build the fonts:

grunt build-fonts

Edit on GitHub