Asset Basics
Assets are styles, scripts and images 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
, WEBP
and SVG
files located inside the assets\images
directory.
Hidden feature
Disable cached assets by temporary using the no-cache
parameter:
domain.com/?no-cache=onEdit on GitHub
Asset Builders
Asset builders are specialized frontend tools made for processing and minifying styles and scripts.
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-scriptsEdit on GitHub
Asset Helpers
Asset helpers are specialized template tags to handle link
, style
and script
collections.
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