A boilerplate for building web projects with Gulp.js.
- Compile, minify, autoprefix SASS files.
- Compile, concatenate and minify JavaScript.
- Render Twig templates.
- Optimise GIF, JPEG, PNG and SVG images.
- Archive
distcontent. - Watch for file changes, and automatically recompile build.
- Hot reloading with
browser-sync.
# 1 Clone this repo
git clone https://github.com/mavisland/boilerplate.git
# 2 Navigate into the repo directory
cd boilerplate
# 3 Install all node packages
npm install
# 4 Get started
npm run start
This project requires you have Node.js with npm installed. This project requires you have a global installation of gulp-cli.
# Install gulp-cli globally
npm install -g gulp-cli
Add your source files to the appropriate src subdirectories. Gulp.js will process and and compile them into dist.
Files in the src/scss directory will be compiled to dist/css.
Put your JavaScript files in the src/js directory. Files placed directly in the src/js folder will compile directly to dist/js as both minified and unminified files.
Put your Twig templates in the src/html directory. Files placed directly in the src/html folder will compile directly to dist.
Place GIF, JPEG, PNG and SVG images in the src/images directory. Images will be optimized with imagemin plugins and compiled into dist/images.
| Task Name | Task Decription |
|---|---|
| archive | Archive dist content |
| build | Run all tasks |
| images | Optimise GIF, JPEG, PNG and SVG images |
| serve | Watch for changes to the src directory |
| scripts | Concanate & minify JavaScript files |
| styles | Compile, autoprefix & minify SASS files |
| templates | Render Twig templates |
| watch | Watch all file changes |
Adjust the input, output, watch paths for all of the Gulp.js tasks under the paths variable. Paths are relative to the root project folder.
// Paths
const paths = {
archive: {
input: "dist/**",
output: "build/",
},
images: {
input: ["src/images/*.{gif,ico,jpg,png,svg}"],
output: "dist/images",
watch: ["src/images/*.{gif,ico,jpg,png,svg}"],
},
scripts: {
input: ["src/js/plugins.js", "src/js/main.js"],
output: "dist/js",
watch: "src/js/**/*.js",
},
server: {
root: "dist/",
},
styles: {
input: "src/scss/*.css",
output: "dist/css",
watch: "src/scss/**/*.css",
},
templates: {
input: "src/html/*.twig",
output: "dist/",
watch: "src/html/**/*.twig",
},
};The code is available under the MIT License.