/build-toolchain

Gulp tasks for a streamlined web development workflow with Webpack, Marko, Babel and Sass.

Primary LanguageJavaScriptMIT LicenseMIT

Build Toolchain

Gulp tasks for a streamlined development workflow with Webpack, Marko, Babel and Sass.

Run npm install and npm run build.

This repo also includes a dummy folder with some examples for compilation.

Features

  • Compiling Marko templates.
  • Compiling Sass stylesheets.
  • Transpiling ES6 code.
  • Watching for file changes and recompiling.
  • Running and refreshing the Node server during development.
  • Parsing of Webpack entry points based on their filename ❧.
  • Minification of assets for production.

❧ like the Sass convention, files with a preceding underscore '_.' are skipped unless they get required

Development

The Gulp tasks default to production mode. In order to enable development features, pass 'development' as the Node environment:

NODE_ENV=development npx gulp

Commands

By default, Gulp will build all assets and then exit.

watch – starts watching the source folder for changes and compiles on the fly.

info – outputs the state of the build tools. E.g. the environment it's running in.

build:scripts – builds all JavaScripts.

build:styles – builds all stylesheets.

clean – removes all files from the distribution folder.

Todo

  • Pass in default Sass format (not SCSS) to Sass compiler.
  • Watch for Git changes while watching and restart.
  • Optionally create source-maps during development.
  • Update to Webpack 4 once marko-loader has been updated.
  • Move Sass handling into Webpack once there is a Sass loader that supports Dart Sass.
  • Enable Sass in Marko templates once the Sass loader is available.