One build tool to rule them all—Blendid!

Introducing Blendid!—the culmination of over three years of steady progress and community contributions in pursuit of the perfect front-end toolset. It's a stand-alone blend of fully configurable tasks packaged into a full-featured modern asset pipeline. Blendid combines and configures the best build tools so you don't have to.

It can be used out of the box with zero configuration as a static site builder, or can be easily configured for any platform. At Viget, we've used Blendid on production Rails, Django, Craft, Laravel, and React projects, to name a few.

Live Development. Fast builds. #

yarn run blendid

No one should have to suffer through hitting save, waiting 30 seconds for your code to recompile, then hitting refresh in your browser to see it, or worse yet, manually running a command to recompile code. Also, no one should develop without source maps.

Blendid configures all the things to live-update via Browsersync and Webpack Hot Middleware. Source maps work out of the gate, and each task is optimized to minimize compile time.

Everything you need for an efficient front-end workflow is provided:

• Compile JS (Webpack 2 + Babel), preconfigured with es2015, and stage-1 presets.
• Compile CSS (Node Sass)
• Compile HTML (Nunjucks) when needed.
• Live update JS, CSS, images, and assets via Browsersync and Webpack Hot Middleware
• Hot module replacement is enabled, with support for React Hot Loader 3
• New files are tracked - no restarting the processes required.
• Compile errors are handled gracefully and displayed in the console, in the browser (for JS), and via notifications.
• Source maps are set up for both CSS and JS. JS defaults to Webpack's cheap-eval-sourcemap, which is one of the fastest to compile.
• Deploy compiled files directly to gh-pages. Great for prototypes and static sites.

Optimized Production Output. #

yarn run blendid -- build

Crunch down those files, and get ready to deploy. Blendid handles minification, uglification, autoprefixing, filename hashing and more.

• Webpack 2 production optimizations (uglify, etc.) w/ optional source maps.
• Autoprefixer, CSS Nano
• Optional filename hashing + platform specific filename replacement helpers so you can cache files forever.
• Hooks to run additional custom tasks in production builds

Pre-configured. Fully Configurable. #

One of the goals of Blendid is to minimize and simplify the overhead of configuring multiple tools to work together—without sacrificing access to configuration.

Blendid provides three init commands out of the box to get you started: init, init-rails, and init-craft. Each of them will generate the folder structure and config files you need to hit the ground running. The first is a good starting point for any project, and the latter two will generate configuration and asset helpers for the Rails and Craft platforms.

You can get started quickly with generated defaults, but you do have full access to configure your directory structure, as well as each task, and every module used under the hood. Prefer Pug and PostCSS over Nunjucks and Sass? Blendid supports swapping out html and stylesheets tasks. Gulp is running under the hood, and if you wish, you can add your own tasks to run prebuild or postbuild in either development or production environments.

Open Source. Community Driven. #

For those who have been following us for a while, you might know that Blendid is the next iteration of the project formerly known as gulp-starter, which was born out of the now outdated Gulp + Browserify: The Everything Post back in April 2014.

Since then, we've had 52 contributors and counting shaping this into what it is today! So whether it's a typo fix in a README or a brand new feature, new issues and pull requests are always welcome. It's what makes this project great.

Let's keep making front-end development better together. Give it a try!