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';



npm (scoped) NpmLicense

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


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.


workflow, wf [command] [options]


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


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


  • 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


  • 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.


  • Thomas Robert - Web design, front-end development


MIT License – Copyright © 2018-present, 8bitstudio