-
Notifications
You must be signed in to change notification settings - Fork 682
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!
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.
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...
"dest": "./public/assets/dyn",
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/**/*"]
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
.
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
!
Set the stylesheets destination object as "dest": "css:
.
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
.
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.
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 in
path-config.jsonand set the
iconsobject in
task-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.
- Copy and paste the
node_modules/blendid/extras/craft/gulprev
directory and its contents intocraft/plugins
- Enable the plugin in your Craft admin panel in Settings => Plugins.
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
.
Visit code.viget.com to see more projects from Viget.