gulpfile.js

gulpfile.js

//more info here https://github.com/stefanpenner/es6-promise
require('es6-promise').polyfill();

//if a new task is needed please add the variable in this list
var gulp = require('gulp'),
  // it synchronizes with the browser on save
  browserSync = require('browser-sync').create(),
  reload = browserSync.reload,
    // plumber handles errors to display them in console
  plumber = require('gulp-plumber'),
  //names a file on build
  rename = require('gulp-rename'),
  //compiles sass files into css
  sass = require('gulp-sass'),
  //For newbies in sass it is an extra help to write sass
  csslint = require('gulp-csslint'),
  // no need for browser prefixes this gulp task does it for u <3
  autoPrefixer = require('gulp-autoprefixer'),
  // this is not really necesary but, it merges all responsive media-queries into one
  cmq = require('gulp-merge-media-queries'),
  //self explanatory it minifies css
  minifyCss = require('gulp-minify-css'),
  // minifies js
  uglify = require('gulp-uglify'),
  // concats js into one file
  concat = require('gulp-concat'),
  //self explanatory it minifies html
  minifyHtml = require('gulp-minify-html'),
  //optimizes images ohhh seh
  imageMin = require('gulp-imagemin'),
  // never used this before, it is a simple in-memory file cache for gulp more info https://github.com/jgable/gulp-cache
  cache = require('gulp-cache');

//Task to run when gulp command is triggered

gulp.task('sass',function(){
  gulp.src(['src/styles**/*.sass'])
    .pipe(plumber({
      handleError: function (err) {
        console.log(err);
        this.emit('end');
      }
    }))
    // pipe concats functions
    .pipe(sass())
    .pipe(autoPrefixer())
    .pipe(cmq({log:true}))
    .pipe(csslint())
    .pipe(csslint.reporter())
    .pipe(concat('main.css'))
    .pipe(gulp.dest('dist/styles/'))
    .pipe(rename({
      suffix: '.min'
    }))
    .pipe(minifyCss())
    .pipe(gulp.dest('dist/styles'))
    .pipe(reload())
});

gulp.task('js',function(){
  gulp.src(['src/scripts**/*.js'])
    .pipe(plumber({
      handleError: function (err) {
        console.log(err);
        this.emit('end');
      }
    }))
    .pipe(concat('main.js'))
    .pipe(gulp.dest('dist/scripts'))
    .pipe(rename({
      suffix: '.min'
    }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/scriptsjs/'))
    .pipe(reload())
});

gulp.task('html',function(){
  gulp.src(['src/**/*.html'])
    .pipe(plumber({
      handleError: function (err) {
        console.log(err);
        this.emit('end');
      }
    }))
    .pipe(minifyHtml())
    .pipe(gulp.dest('dist/'))
    .pipe(reload())
});

gulp.task('image',function(){
  gulp.src(['src/images**/*'])
    .pipe(plumber({
      handleError: function (err) {
        console.log(err);
        this.emit('end');
      }
    }))
    .pipe(cache(imageMin()))
    .pipe(gulp.dest('dist/images'))
    .pipe(reload())
});

gulp.task('default',function(){
  browserSync.init({
        server: "dist/"
    });
  gulp.watch('src/**/*.html',['html']);
  gulp.watch('src/scripts**/*.js',['js']);
  gulp.watch('src/styles**/*.sass',['sass']);
  gulp.watch('src/images**/*',['image']);
});