FatehAK / gulp-sass-babel-demo

A demo showing automation of build tasks using Gulp, SASS compilation and usage of Babel for transpilation of ES6 code

Gulp, SASS and Babel Demo

Installation

• Clone the repository and open up the bash console in root of directory.
• Open the bash console and type npm install to install all the dependecies.
• There are three main gulp tasks they are the development, optimization and the babel task.
• The development tasks include CSS to SCSS compilation, watching files for changes, autoprefixing vendor code and live browser sync.
• The optimization tasks include concatenation of CSS and JS files, conversion of JavaScript ES6 to browser compatible ES5 code using Babel, optimizing images and copying fonts to distribution directory.

Running Tasks

• Development task is the default task so run using gulp command.
• Run optimization task using gulp build command in the console.
• Clean distribution directory using clean:dist command.
• Clear the image cache using cahce:clear command.

List of gulp plugins used

• gulp-sass link
• browser-sync link
• gulp-useref link
• gulp-uglifyes link
• gulp-cssnano link
• gulp-if link
• gulp-imagemin link
• gulp-cache link
• del link
• run-sequence link
• gulp-autoprefixer link
• gulp-sourcemaps link
• gulp-babel link

Plugin installation

Use the following command - npm install plugin-name --save-dev