Cacher is the code snippet organizer for pro developers

$ npm install --global gulp-cli
$ npm init
$ npm install --save-dev gulp
$ gulp default

.
|
├── dist
│   ├── styles  ─> css 
│   ├── scripts ─> vanilla js
│   └── images  ─> optimized
└── src
    ├── styles  ─> scss
    ├── scripts ─> es6
    └── images  ─> non-optimized
   
Gulp Features
 ─> CSS
    ─> Sass to CSS Compilation
    ─> Autoprefix
    ─> Minimize   
 ─> JS
    ─> ES6 to ES5 Compilation
    ─> Concatenate
    ─> Minimize  
 ─> IMAGES
    ─> Optimization
 ─> WATCH
    ─> Watch files and reload server
 ─> Others
    ─> TO be included soon ....

 

{
  "name": "Alex",
  "version": "1.0.0",
  "description": "A Gulp file and project generator.",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Alex",
  "license": "MIT",
  "devDependencies": {
    "browser-sync": "2.6.5",
    "gulp-autoprefixer": "2.1.0",
    "gulp-babel": "5.1.0",
    "gulp-cache": "0.2.8",
    "gulp-concat": "2.5.2",
    "gulp-jshint": "1.10.0",
    "gulp-imagemin": "2.2.1",
    "gulp-minify-css": "1.0.0",
    "gulp-plumber": "1.0.0",
    "gulp-rename": "1.2.2",
    "gulp-sass": "1.3.3",
    "gulp-uglify": "1.2.0",
    "gulp": "3.8.11"
  }
}

var gulp = require('gulp'),
    plumber = require('gulp-plumber'),
    rename = require('gulp-rename');
var autoprefixer = require('gulp-autoprefixer');
var babel = require('gulp-babel');
var concat = require('gulp-concat');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin'),
    cache = require('gulp-cache');
var minifycss = require('gulp-minify-css');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');

gulp.task('browser-sync', function() {
  browserSync({
    server: {
       baseDir: "./"
    }
  });
});

gulp.task('bs-reload', function () {
  browserSync.reload();
});

gulp.task('images', function(){
  gulp.src('src/images/**/*')
    .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
    .pipe(gulp.dest('dist/images/'));
});

gulp.task('styles', function(){
  gulp.src(['src/styles/**/*.scss'])
    .pipe(plumber({
      errorHandler: function (error) {
        console.log(error.message);
        this.emit('end');
    }}))
    .pipe(sass())
    .pipe(autoprefixer('last 2 versions'))
    .pipe(gulp.dest('dist/styles/'))
    .pipe(rename({suffix: '.min'}))
    .pipe(minifycss())
    .pipe(gulp.dest('dist/styles/'))
    .pipe(browserSync.reload({stream:true}))
});

gulp.task('scripts', function(){
  return gulp.src('src/scripts/**/*.js')
    .pipe(plumber({
      errorHandler: function (error) {
        console.log(error.message);
        this.emit('end');
    }}))
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(babel())
    .pipe(gulp.dest('dist/scripts/'))
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(gulp.dest('dist/scripts/'))
    .pipe(browserSync.reload({stream:true}))
});

gulp.task('default', ['browser-sync'], function(){
  gulp.watch("src/styles/**/*.scss", ['styles']);
  gulp.watch("src/scripts/**/*.js", ['scripts']);
  gulp.watch("*.html", ['bs-reload']);
});