Script for a simple frontend build with some defaults which can be extended and customized. Optimizes css, images, html and JavaScript for production and creates a svg symbol sprite.
Clone or download the repository and install dependencies:
npm install
Customize the config variable in the gulpfile to your liking. An initial default folder structure can be setup by running:
npm run build
Default gulp task is optimized for production and includes browsersync with active file watching. Just run:
gulp
To prepare the production files (minimize, copy and remove sourcemaps and unused css definitions), run the production gulp task:
gulp production
For production, images are processed with imagemin which can take some time if source images are not optimized already.
- gulp - Build system automating tasks
- webpack - Module bundler
- PostSCC - A tool for transforming CSS with JavaScript
- imagemin - Minify images seamlessly
- svg-sprite - SVG sprites & stacks galore
- npm - Package manager for JavaScript
See package.json for the whole list.
This project is licensed under the MIT License - see the LICENSE.md file for details.
Some useful links for further customizing your build process:
- Getting started - Web Some web development workspace and tool suggestions from Google Developers.
- Introduction to Gulp.js An expansive tutorial on setting up a gulp workflow by Stefan Imhoff. Great starting point and reference.
- Gulp documentation Official gulp documentation with many examples and articles.
- How to work with SVG icons An SVG icons primer by Florens Verschelde. Everything from export to implementation.
- Creating an SVG icon workflow A tutorial by Luke Whitehouse that covers gulp and SVG icons integration with fallbacks for older broswers.
- Creating SVG sprites using gulp and Sass SVG and Sass with gulp example by Mike Street.
- A Gulp-Based External SVG Symbol Sprite Icon System Some considerations for SVG icons implementation by Una Kravets.
- Using A Static Site Generator At Scale: Lessons Learned Some considerations for choosing your page html templates manager by Stefan Baumgartner.
- How to Modularize HTML Using Template Engines and Gulp An example integration of nunjucks templates into a gulp workflow by Zell Liew.
- Unpacking Webpack A tutorial for replacing gulp with a purely webpack based workflow by Samantha Geitz.
- Getting Started with webpack 2 Webpack basics and multiple files examples by Drew Powers that also covers fully webpack based workflow.
- A Beginner’s Guide to Webpack 2 and Module Bundling A guide by Mark Brown which covers initial webpack setup and configuration, modules, loaders, plugins, code splitting and hot module replacement.
- PostCSS Deep Dive A great PostCSS reference and tutorial series by Kezz Bracey.