Includes:
- Nunjucks/HTML compilation.
- Image optimization (imagemin).
- CSS/Sass processing and minification (sourcemaps, autoprefixer, clean-css).
- JavaScript bundling and minification (webpack, babel-minify).
- Delivery folder generation - clean and ready for distribution to staging, production, etc.
- Fully configurable build process.
Step 1: Add global packages to your computer.
- Required: node & npm, gulp-cli
- Optional: yarn
Step 2: Install dependencies:
yarn
Default paths and plugin-configurations can be modified to your liking, but anything beyond that may require some Gulp file refactoring. Additional documentation provided via comments within gulpfile.js
.
An example file structure with include-media, normalize.css, flexboxgrid, and jQuery (via node_modules) have been added to the project. To reduce build size, feel free to remove these extra files and packages if they go unused.
src/
├── media/
│ └── *.gif, *.jpg, *.png, *.svg
├── public/
│ └── *.ico, *.xml, etc...
├── scripts/
│ └── *.js (or *.module.js - for exports only)
├── styles/
│ └── *.css, *.scss
└── views/
└── *.html, *.njk, *.nunjucks
Do NOT remove or rename the immediate folders within src
unless you plan to modify the gulp configuration.
Default script:
Processes source files, starts a BrowerSync server (defaults to port 3000), and watches for file changes.
yarn start
Other scripts:
Deletes the generated output folder. This is your reset button.
yarn clean
Default script:
Processes/minifies/moves files to the configured output folder for distribution.
yarn build
Notes:
- Use a bang to avoid comments from being stripped out of stylesheets, ex:
/*! ... */
- Individual production tasks can be run seperately, ex:
# Move public files and (sub)folders.
yarn build:public
# Nunjucks compilation.
yarn build:views
# Image optimization.
yarn build:media
# CSS/Sass processing and minification.
yarn build:styles
# JavaScript bundling and minification.
yarn build:scripts