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

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.