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.
- 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
The Gulp tasks default to production mode. In order to enable development features, pass 'development' as the Node environment:
NODE_ENV=development npx gulp
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.
- 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.