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\styles directory.

Images

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

Fonts

Fonts are WOFF and 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 _{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

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 tag to the collection:

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

Prepend a tag to the collection:

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

Remove a tag from the collection:

Tag::link()->remove(mixed $attribute, string $value);
Tag::link()->removeFile(string $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 code to the collection:

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

Prepend inline code 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 tag to the collection:

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

Append inline code to the collection:

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

Prepend a tag to the collection:

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

Prepend inline code to the collection:

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

Remove a tag from the collection:

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

Transport PHP to JavaScript variables:

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

Concat the collection to a cached file:

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

Clear the collection:

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