static-site-gulp-webpack-boilerplate

Drop-in Gulp and Webpack tasks for static site development.

Includes:

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

Installation

Step 1: Add global packages to your computer.

• Required: node & npm, gulp-cli
• Optional: yarn

Step 2: Install dependencies:

yarn

Configuration

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
├── scripts/
│   └── *.js (or *.module.js - for exports only)
├── styles/
│   └── *.css, *.scss
└── views/
    └── *.html, *.ico, *.xml, etc...

Do NOT remove or rename the immediate folders within src unless you plan to modify the gulp configuration.

Development

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

Staging/Production

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

# Image optimization.
yarn build:media

# CSS/Sass processing and minification.
yarn build:styles

# JavaScript bundling and minification.
yarn build:scripts