README.md

Gulp ES6 boilerplate

A toolkit for quick start developing with: twig, rollup.js, sass, foundation.

Features

1. brosersync for live reload browser
2. rollup javascript module bundler with babel plugin
3. gulpfile and tasks written with es6 syntax
4. twig template engine
5. sass css preprocessor
6. gulp-sass-glob Gulp plugin for gulp-sass to use glob imports.
7. foundation framework
8. image minification

Quick start

1. Install nodeJS and npm
2. Install gulp "npm install -g gulp"
3. Clone this repo in your work folder
4. Move terminal to work folder
5. In terminal "npm install"
6. In terminal "gulp" for develop environment or "gulp --env production" for production

Tasks

• webserver - run local webserver
• watch - watch for changes in source files and automatic rebuild
• build:html - compile twig templates to html
• build:js - compile es6 javascript files and make bundle with rollup
  -in production additionally minify js
• build:js-libs - concat javascript files from directory src/js/libs and from file src/js/libs/import.json (used for import code from node_modules)
• build:style - compile scss to css. gulp-sass-glob configured to ignore files witch started with double underscore __*.scss
  - in production: minify and prefix
  - in development: write soursemaps
• build:image - simply copy images from pic and img to build folder
  - in production: minify images
• build:font - symply copy fonts from font folder to build folder
• build - run next tasks
  • build:html
  • build:js
  • build:js-libs
  • build:style
  • build:font
  • build:image
• default - run next tasks
  • build
  • webserver
  • watch