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!
yarn inityarn add blendidyarn run blendid -- inityarn 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!
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+
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
You may override the default configuration by creating a
config folder with the following two files in it:
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
This file specifies the
dest root directories, 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
dest properties here to reflect that.
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
cleanFirstTells gulp to clean target directory before task is running.
reportSizesSet to true if you want to see a size report when running the "production" or "build" task.
watchIn "development" and "production" task the watcher will be disabled if you set this to "false".
watchProductionEnables 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
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.
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.
Gulp tasks! Built combining the following:
|CSS||Sass (Libsass via node-sass), Autoprefixer, CSSNano, Source Maps|
|HTML||Nunjucks, gulp-data, or bring your own|
|Pug/Jade||Pug, gulp-data, or bring your own|
|Icons||Auto-generated SVG Sprites|
|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|