Gulp is included out-of-the-box in the framework, same as a bunch of several tasks for styles and scripts compilation and project’s deployment. The following command must be executed in command line (pointing at the project’s root folder) to install all gulp dependencies:
NodeJS is required prior using gulp.
Raw vs compiled
Optimization and development are key factors that are empowered by the framework. Predefined gulp tasks will compile, minify and or concatenate raw assets for more efficiency.
All CSS/JS/SASS files located under [projects path]/assets/raw will be automated optimization and or compilation:
- […]/assets/raw/css: CSS files in this folder will be concatenated into one file called app.css and stored into [..]/assets/css.
- […]/assets/raw/js: JS files in this folder will be concatenated into one file called app.js and stored into [..]/assets/js.
- […]/assets/raw/sass: SASS/SCSS files in this folder will be compiled (out-of-the-box) into one or multiple files and stored into [..]/assets/raw/css (later to be concatenated with any other CSS file located in the destination folder).
To compile the assets located in the raw folder run the following command in command-line:
By default the generated files, app.css and app.js (compiled from raw assets), will be auto-enqueued into WordPress. Auto-enqueue settings can be modified at the configuration file.
Custom asset files can be auto-enqueued.
<?php return [ // more settings...., 'autoenqueue' => [ // Enables or disables auto-enqueue of assets 'enabled' => true, // Assets to auto-enqueue 'assets' => [ [ 'asset' => 'css/app.css', 'dep' => , 'footer' => false, ], [ 'asset' => 'js/app.js', 'dep' => , 'footer' => true, ], [ 'asset' => 'js/custom.js', 'dep' => ['jquery'], 'footer' => true, ], ], ], // more settings...., ];
To compile the assets for production, remove unneeded files and compress the project for installation run the following command in command-line:
Built projects are stored inside the
/builds folder and are compressed into ready-to-install zip packages. Assets located in
/assets/css are minified, un-necesary root files are removed and vendor packages used only for development are excluded.
assets_url() global function to get the url of an asset.
<div class="assets-url function sample"> <img src="<?php echo assets_url( 'img/my-logo.png', __FILE__ ) ?>" /> </div>