@8bitstudio/workflow

Front-end workflow with gulp, webpack and browser-sync

Usage no npm install needed!

<script type="module">
  import 8bitstudioWorkflow from 'https://cdn.skypack.dev/@8bitstudio/workflow';
</script>

README

Workflow

npm (scoped) NpmLicense

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