Workflow

Front-end development workflow from 8bitstudio using gulp and webpack

Installation

Make sure Nodejs and yarn are installed and updated. If you don't have a package.json file, create one with npm init. Add the package to your devDependencies (npm install -D @8bitstudio/workflow).

yarn run workflow init will create the default workflow.config.js file at the root of your project. There you can define settings like the paths. It will also generate a default src folder where you can work in.

Usage

workflow, wf [command] [options]

Commands

• yarn run workflow – Build files in dist folder.
• yarn run workflow init – Init examples files and folder to start the project (multi-choices).

Options

You can add flags to the main command yarn run workflow

• -s, --server – Launch a browsersync server
• -w, --watch – Watch files and run compile when change
• -p, --prod, --production – Run production env
• -h, --help – Show help

Examples

• workflow – Build files in dist folder
• workflow --watch --server – Start a server and watch changes
• workflow --prod – Build files minimified and optimized
• workflow init – Init example files and folder

## Tasks

• html: Render pug files. Minimify in production.
• css: Compile SCSS, autoprefix, sourcemaping. Minimify in production.
• js: Use webpack and babel. Compile vuejs files. Sourcemaping. Minimify in production
• static: Just move everything from src to destination folder.
• images: Compress and optimize in production.
• svgSprite: Create sprite with all SVGs in destination folder (will also copy the SVGs).
• translate: Compile .po files into .mo files.

Author

• Thomas Robert - Web design, front-end development

License

MIT License – Copyright © 2018-present, 8bitstudio