queo-blendid

Blendid (formerly known as Gulp Starter) is a delicious stand-alone blend of tasks and build tools poured into Gulp to form 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. The extras folder contains configuration details for Rails and Craft, with more to follow. Check out the compiled demo and play with the source files!

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!

Recommended Setup

While you can install Node a variety of ways, and use NPM directly to install dependencies, we highly recommend using NVM to install and manage Node versions, and Yarn (via npm) to install and manage your JS dependencies, and run npm scripts and node_modles/.bin executables.

Blendid requires at least Node 6+

Commands

All commands should be run through yarn run. If you haven't switched to yarn yet, now's a great time!

yarn run blendid

This is where the magic happens. The perfect front-end workflow. This runs the development task, which starts compiling, watching, and live updating all our files as we change them. BrowserSync will start a server on port 3000, or do whatever you've configured it to do. You'll be able to see live changes in all connected browsers. Don't forget about the additional BrowserSync tools available on port 3001!

yarn run blendid -- build

Compiles files for production to your destination directory. JS files are built with Webpack with standard production optimizations (uglfiy, etc.). CSS is run through CSSNano. If rev is set to true in your task-config.js file, filenames will be hashed (file.css -> file-a8908d9io20.css) so your server may cache them indefinitely. A rev-manifest.json file is output to the root of your dest directory (public by default), and maps original filenames to hashed ones. Helpers exist for Rails and Craft that read this file and automatically update replace filenames in your apps. CSS and HTML files read this file and string-replace filenames automatically.

yarn run blendid -- deploy

If you are building a static site, and would like to preview it on GitHub pages, this handy script does just that using gulp-gh-pages. Be sure to add or update the homepage property in your package.json to point to your gh-pages url.

yarn run blendid-karma

Runs a pre-configured karma + mocha + chai test suite that will run any files ending in .test.js in your src directory. By default, this runs in watch mode.

To just run once, run:

yarn run blendid-karma -- --single-run

Configuration

You may override the default configuration by creating a config folder with the following two files in it: path-config.json and task-config.js. These files will be created by any of the -- init tasks, or you can generate only the config files with the following command:

yarn run blendid -- init-config

path-config.json

This file specifies the src and dest root directories, and src and dest for each task, relative to the configured root. For example, if your source files live in a folder called app, and your compiled files should be output to a folder called static, you'd update the src and dest properties here to reflect that.

task-config.js

This file exposes per-task configuration and overrides. Better documentation is forth coming, but for now, the best way to see what you can change is to take a peak at the source tasks themselves: gulpfile.js. The webpack config exposes a ton: gulpfile.js/lib/webpack-multi-config.js

General Options (see task-config.json > options)

• cleanFirst Tells gulp to clean target directory before task is running.
• reportSizes Set to true if you want to see a size report when running the "production" or "build" task.
• watch In "development" and "production" task the watcher will be disabled if you set this to "false".
• watchProduction Enables the watcher in "production" task if you set this to "true".

Tasks will only run if a configuration exists for them in this file. For example, if your project has it's own handling HTML and templating (Rails, Craft, Django, etc), you may remove the html config completely or set it to false.

FAQ

Can I customize and add Gulp tasks?

You could clone this repo, copy over the gulpfile.js folder and package.json dependencies and run gulp instead of installing it as a module directly, or your could fork and maintain your own custom setup.

I don't see JS files in my dest directory during development

JS files are compiled and live-update via BrowserSync + WebpackDevMiddleware + WebpackHotMiddleware. That means, that you won't actually see .js files output to your destination directory during development, but they will be available to your browser running on the BrowserSync port.

What's under the hood?

Gulp tasks! Built combining the following:

Feature	Packages Used
CSS	Sass (Libsass via node-sass), Autoprefixer, CSSNano, Source Maps
JavaScript	Babel, Webpack
HTML	Nunjucks, gulp-data, or bring your own
Pug/Jade	Pug, gulp-data, or bring your own
Images	Compression with imagemin See README
Icons	Auto-generated SVG Sprites
Fonts	Folder and .sass mixin for including WebFonts
Live Updating	BrowserSync, Webpack Dev Middleware, Webpack Hot Middleware
Production Builds	CSS is minified, JS is compressed and optimized with various Webpack plugins, filename md5 hashing (reving), file size reporting, local production Express server for testing builds.
JS Testing	Karma, Mocha, Chai, and Sinon, Example Travis CI integration
Deployment	Quickly deploy public folder to gh-pages with gulp-gh-pages

---

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