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:

By default Blendid won't output your compiled javascript files to the destination folder when running yarn run blendid, but they are compiled and live-updated via BrowserSync + WebpackDevMiddleware + WebpackHotMiddleware. To ensure this works you must add a publicPath object to your javascript object in task-config.js. Using our example project structure looks like: publicPath: "public/assets/dyn/js".

Set the javascripts destination object as "dest": "js" in your path-config.json. To see the files actually output into the directory you must run yarn run blendid -- build. Be sure to include the space between the -- and build!

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 directory 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(from the Readme):

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

Installing the plugin:

• Copy and paste the node_modules/blendid/extras/craft/gulprev directory and its contents into craft/plugins
• Enable the plugin in your Craft admin panel in Settings => Plugins.

Usage:

The output of the Twig filter defaults to the given string/path unless rev-manifest.json exists. When rev-manifest.json exists, then the string is replaced with the revisioned asset name stored in that file. You can use this to include your CSS and JS files.

Important Notes:

The plugin assumes that your rev-manifest.json file is in the public folder. Make sure rev-manifest.json does not exist when running npm run gulp (the development task). This will cause an error since the revisioned file will not exist. Asset paths output by the Twig filter are forced to start with a "/" if it doesn't already exist.

If you prefer to work without revisions you can disable it by changing the production config object in task-config.js to rev: false.