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