Commands

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

Default task

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 UI tools available on port 3001!

Build task

yarn run blendid -- build

Compiles files for production to your destination directory. JS files are built with webpack 3 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 filenames in your apps. CSS and HTML files read this file and string-replace filenames automatically.

Github pages task

yarn run blendid -- gh-pages

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.

It's a good idea to add aliases for these commands to your package.json scripts object.

// package.json
  "scripts": {
    "start": "yarn run blendid",
    "build": "yarn run blendid -- build"
  }

// Command line
yarn start
yarn run build