Asset Basics

Assets are styles, scripts, images and fonts located inside the assets directory.

Styles

Styles are PostCSS files located inside the assets\styles directory.

Scripts

Scripts are JavaScript files located inside the assets\scripts directory.

Images

Images are JPG, PNG, ICO, WEBP and SVG files located inside the assets\images directory.

Fonts

Fonts are WOFF2 files located inside the assets\fonts directory.

Hidden feature

Disable cached assets by temporary using the no-cache parameter:

domain.com/?no-cache=on
Edit on GitHub

Asset Builders

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 uglify configuration inside your tasks/uglify.js file:

uglify:
{
	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',
[
	'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/{template-name}/assets/styles/_icon.tpl'
		],
		dest: 'templates/{template-name}/assets/styles/_icon.css'
	}
}
webfont:
{
	templateName:
	{
		src:
		[
			'node_templates/material-design-icons/{icon-path}.svg'
		],
		dest: 'templates/{template-name}/dist/fonts',
		options:
		{
			destCss: 'templates/{template-name}/assets/styles',
			template: 'templates/{template-name}/assets/styles/_icon.tpl'
		}
	}
}

Build the fonts:

grunt build-fonts
Edit on GitHub

Asset Helpers

Asset helpers are specialized template tags made for bundling and caching styles and scripts.

Link

Initialize the collection:

Tag::link()->init(string $name);

Append a link to the collection:

Tag::link()->append(string|array $attribute, string $value);
Tag::link()->appendFile(string|array $file);

Prepend a link to the collection:

Tag::link()->prepend(string|array $attribute, string $value);
Tag::link()->prependFile(string|array $file);

Remove a link from the collection:

Tag::link()->remove(string $attribute, string $value);
Tag::link()->removeFile(string|array $file);

Rewrite paths in the collection:

Tag::link()->rewrite(array rewriteArray);

Concat the collection to a cached file:

Tag::link()->concat(array $optionArray);

Clear the collection:

Tag::link()->clear();

Style

Initialize the collection:

Tag::style()->init(string $name);

Append inline style to the collection:

Tag::style()->appendInline(string $inline);

Prepend inline style to the collection:

Tag::style()->prependInline(string $inline);

Clear the collection:

Tag::link()->clear();

Script

Initialize the collection:

Tag::script()->init(string $name);

Append a script to the collection:

Tag::script()->append(string|array $attribute, string $value);
Tag::script()->appendFile(string|array $file);

Append inline script to the collection:

Tag::script()->appendInline(string $inline);

Prepend a script to the collection:

Tag::script()->prepend(string|array $attribute, string $value);
Tag::script()->prependFile(string|array $file);

Prepend inline script to the collection:

Tag::script()->prependInline(string $inline);

Remove a script from the collection:

Tag::script()->remove(string $attribute, string $value);
Tag::script()->removeFile(string|array $file);

Transport PHP to JavaScript variables:

Tag::script()->transportVar(string $key, string|array $value);

Concat the collection to a cached file:

Tag::script()->concat(array $optionArray);

Clear the collection:

Tag::script()->clear();
Edit on GitHub