[Deprecated] E-sites front-end workflow

Deprecated - All the code is merged to generator-esites-fe

This is the E-sites front-end dev workflow repository. This is where we centralise our Gulp tasks, JS and CSS structure and directory structure for images and SVGs.

Requirements

• Node 6
• Gulp CLI (npm install -g gulp-cli)
• For Linux users: Linux: notify-send/notify-osd should be installed (On Ubuntu this is installed per default). See gulp-notify requirements.
• Optional: Yarn For faster installation of modules.

How to use it

First of all, make a checkout of this repository by doing:

git clone https://github.com/e-sites/fe-boilerplate-poc.git && cd fe-boilerplate-poc

If you have Yarn installed, run yarn or otherwise run npm install.

Configure the paths for Gulp to watch in package.json and where to store the built output.

Then run gulp watch and the tasks should start watching the configured folders. Tasks are run automatically for a first time when watching. If you don't need watching, just run gulp.

Separate tasks

These tasks are included in this setup:

• gulp css
• gulp js
• gulp svg
• gulp watch

Features

• Gulp 4
• ITCSS directory structure for CSS
• Sass base with Normalize, Bourbon and Neat
• ESLint config (eslint-plugin-compat + babel-eslint for now, will add specific rules later)
• Babel config (babel-preset-env + stage-3)
• Conditioner.js - Frizz free, context-aware, JavaScript modules
• Path configuration in package.json
• Success and error notifications for tasks (tasks/base/handlers.js)
• Webpack JS bundler task (tasks/javascript/javascript.js) & (webpack.config.js)
• Sass compilation and minification task (tasks/sass/sass.js)
• SVG sprite generation task (tasks/svg/svg.js)
• Asset versioning via gulp-rev. Stores hashed filenames and generates a manifest with mapping from original filenames to hashed filenames.
• External SVG polyfill for IE10/11 (svgxuse) so SVG sprites can be a separate file and can thus be cached easier