blendid

Blendid is a delicious stand-alone blend of tasks and build tools poured together as a full-featured modern asset pipeline. It can be used as-is as a static site builder, or can be configured and integrated into your own development environment and site or app structure.

Quick start on a fresh project (empty directory)

yarn init
yarn add blendid
yarn run blendid init
yarn run blendid

This will create default src and config files in your directory and start compiling and live-updating files! Try editing them and watch your browser auto-update!

Documentation

Full documentation is available on the Wiki

---

Visit code.viget.com to see more projects from Viget.

Changelog

4.5.1

• Adds PostCSS support
• Autoprefixer replaces gulp-autoprefixer
• cssnano replaces gulp-cssnano

Users can configure plugins and options in task-config.js's stylesheets.postcss. See gulp-postcss for more info.

Basic usage is unchanged. Source stylesheets will be preprocessed with Sass unless stylesheets.sass is false. You can still call out Sass explicitly if you like:

// in task-config.js
stylesheets: true

A task-config with custom PostCSS will look like this

// task-config.js
// must also add the dependencies (`(npm i|yarn add) some-plugin some-option`)

var somePlugin = require('some-plugin')
var someOption = require('some-option')

var postCssPlugins = [somePlugin()]
var postCssOptions = {someOption}

module.exports = {
    // ...
    stylesheets: {
        // sass: true is implied
        postcss: {
           plugins: postCssPlugins,
           options: postCssOptions
        }
    }
    // ...
}

Autoprefixer and cssnano are injected into the PostCSS plugins list, and do not need to be specified. However custom Autoprefixer and/or cssnano configs are respected if provided. That looks like this:

// task-config.js
// must also add the autoprefixer dependency (`(npm i|yarn add) autoprefixer`)

var autoprefixer = require('autoprefixer')

var postCssPlugins = [
    autoprefixer({
        grid: "autoplace"
    })
]

module.exports = {
    // ...
    stylesheets: {
        // sass: true is implied
        postcss: {
           plugins: postCssPlugins
        }
    }
    // ...
}