catberry-assets

Plugin for Catberry Framework that builds assets for every cat-component using Gulp.

Usage no npm install needed!

<script type="module">
  import catberryAssets from 'https://cdn.skypack.dev/catberry-assets';
</script>

README

Assets plugin for Catberry Framework

Gitter

Catberry

Installation

npm install catberry-assets --save

Description

This is a plugin for working with Catberry component's assets. If you want cat-component to have any assets like CSS/LESS and images you just need to add the plugin to your project and put all this stuff to an assets directory of your cat-component, this plugin will do everything needed for you.

Also, you can have a global assets directory called static at the root of your project.

For example, your project tree can look like this:

catberry_components/
    component1/
        assets/
            images/
                c1-1.jpg
                c1-2.png
            svg/
                c1-3.svg
        ...
    component2/
        assets/
            images/
                c2-1.jpg
                c2-2.png
            svg/
                c2-3.svg
        ...
static/
    static1.jpg
    static2.png
    static3.svg
    styles.less

Your assets will be put to a public directory like this:

public/
    assets/
        component1/
            images/
                c1-1.jpg
                c1-2.png
            svg/
                c1-3.svg
                c1-3.png
            ...
        component2/
            images/
                c2-1.jpg
                c2-2.png
            svg/
                c2-3.svg
                c2-3.png
        ...
static1.jpg
static2.png
static3.svg
style.css

You are safe to use URLs to assets like /assets/component1/c1-1.jpg in your styles or HTML.

How to use

In build.js

const assets = require('catberry-assets');
const catberry = require('catberry');
const config = require('./config-build');
const cat = catberry.create(config);

// register plugin to the service locator
assets.register(cat.locator);

// now we can build a Catberry bundle
cat.build();

The plugin uses csstime package under the hood, you can pass parameters to the csstime using section assets in the config object. For learning all possible parameters, you can see the documentation.

Contributing

There are a lot of ways to contribute:

Denis Rechkunov denis.rechkunov@gmail.com