Craft Setup

Using Blendid with CraftCMS

I'm putting together all the information that I've found from the repo about using Blendid with Craft. This is just an example of what worked for me so far, and is still a work in progress with some issues(#403). If you have alternative methods of using Blendid with Craft please add them so we can all use them!

Blendid init considerations

Upon running yarn run blendid Blendid will clobber the contents of the destination directory set in the dest object in your config/path-config.json file, which by default is set to the public/ directory. Since Craft uses public to store some files that don't need to be processed you will need to configure Blendid to work around this.

Setting Blendid's destination to a subdirectory

Since you will most likely be keeping your image assets in a subdirectory of public/ to be handled by Craft as an asset source using Blendid's static task to transfer files untouched into public/ may cause some issues.

It is recommended to create a subdirectory within public and designate it as Blendid's destination folder. For the purpose of this guide we will use the following directory structure for the public/ and going down through path-config.json in order.

CraftSite
|-- config
|   |-- path-config.json
|   `-- task-config.js
`-- public
    |-- assets
    |   |-- dyn
    |   |   |-- css
    |   |   `-- jss
    |   `-- img
    `-- Other Craft Files We Don't Want To Clobber...

Set the destination directory

"dest": "./public/assets/dyn",

Watching templates

CraftCMS will be handling our need for html template processing. Stop Blendid from processing HTML files by first changing the html configuration in config/task-config.js to html:false, and delete the html object in config/path-config.json.

In order to have BrowserSync to start watching your templates folder use the files option in the browserSync object in config/task-config.js. By default Craft uses templates from craft/templates. An example of watching the files within this directory: files: "./craft/templates/**/*"

Static file functionality

If you'd like to use Blendid's static task to transfer files untouched into a directory create a subdirectory in dyn/ and set your the static destination object to match. Since Blendid will be leaving the files in the parent/ directory alone I usually just delete this object from path-config.json and set the static object to false in task-config.js.

Setting the javascripts destination

*Note: There is an issue with js not being watched. #403. Working on sorting this out. Set the javascripts destination object as "dest": "js" .

Setting the stylesheets destination

Set the stylesheets destination object as "dest": "css: .

Image assets

Since Craft handles images and Blendid only copies these files from one directory to another by default you can safely set the images object in task-config.js to false and delete the images object from the path-config.json.

Fonts

Blendid simply copies the font files from the configured source into the destination directory. If you'd like to use this functionality create a fonts subdirectory in your dyn director and set the dest object accordingly. Otherwise, delete the object in path-config.json and set the fonts object in task-config.json to false.

Icons

If you'd like to use Blendid's icon processing functionality create an icons subdirectory in the dyn directory and set the destination to "dest": "icons". Otherwise, delete the iconsobject inpath-config.jsonand set theiconsobject intask-config.json` to false.

Asset revisions

Use the Gulp Rev Craft Plugin to include the proper gulp-revisioned version of an asset in your Twig templates. More details found in readme.