gulpfile.js

var gulp            = require('gulp');
// var compass         = require('gulp-compass');
var del             = require('del');
var sass            = require('gulp-sass');
var pleeease        = require('gulp-pleeease');
var autoprefixer    = require('gulp-autoprefixer');
var imagemin        = require('gulp-imagemin');
var svgstore        = require('gulp-svgstore');
var svgmin          = require('gulp-svgmin');
var spritesmith     = require('gulp.spritesmith');
var jade            = require('gulp-jade');
var plumber         = require('gulp-plumber');
var minifyCss       = require('gulp-minify-css');
var uglify          = require('gulp-uglify');
var rename          = require("gulp-rename");
var browserSync     = require('browser-sync').create();

var path = {

  src: {
    html: [
      '!src/**/_*.jade',
      '!src/js/main.jade',
      'src/**/*.jade'
    ],

    style: 'src/scss/**/*.scss',

    img: 'src/*.+(jpg|png|gif)',

    imgSvg : [
      '!src/img/icons/*.*',
      '!src/img/svg-sprite/*.*',
      '!src/libs/**/*.*',
      'src/**/*.svg'
    ],

    sprite: {
      svgSprite  : 'src/img/svg-sprite/*.*',
      imgSprite  : 'src/img/icons/*.*',
      outputFile : 'src/img/'
    },

    font: 'src/font/**/*.*',

    js: [
      'src/js/*.js',
      'src/js/main.jade'
    ]
  },

  build: {
    html  : 'build/',
    style : 'build/css/',
    img   : 'build/img',
    font  : 'build/font/',
    js    : 'build/js/'
  },

  del: [
    'build/font',
    'build/img'
  ]
};

gulp.task('browser-sync', function() {
  browserSync.init({
    server: {
      baseDir: path.build.html
    },
    notify: false
  });
});

gulp.task('html', function() {
  return gulp.src(path.src.html)
    .pipe( plumber() )
    .pipe( jade({pretty:true}) )
    .pipe( gulp.dest(path.build.html) )
    .pipe( browserSync.stream() );
});

gulp.task('style', function() {
  return gulp.src(path.src.style)
    .pipe( plumber() )
    // .pipe(
    //   compass({
    //     config_file: 'src/config.rb',
    //     css        : 'build/css',
    //     sass       : 'src/scss',
    //     font       : 'build/font',
    //     image      : 'src/img',
    //     sourcemap  : true
    //   })
    // )
    .pipe(
      sass({
        includePaths: require('node-bourbon').includePaths
      }).on('error', sass.logError)
    )
    // .pipe(
    //   autoprefixer({
    //     browsers: ['last 15 versions'],
    //     cascade: false
    //   })
    // )
    .pipe( minifyCss() )
    .pipe(
      pleeease({
        'autoprefixer': {
           'browsers': ['last 15 versions'],
           'cascade': false
        },
        'mqpacker': true,
        'opacity': true,
        'rem': true,
        'filters': { 'oldIE': true },
        'pseudoElements': true
      })
    )
    .pipe( gulp.dest(path.build.style) )
    .pipe( browserSync.stream() );
});


gulp.task('img', function() {
  gulp.src(path.src.img)
    .pipe(
      imagemin({
        progressive: true,
        optimizationLevel: 7,
        interlaced: true
      })
    )
    .pipe( gulp.dest(path.build.img) )
    .pipe( browserSync.stream() );
});

gulp.task('imgSprite', function () {
  var spriteData = gulp.src(path.src.sprite.imgSprite)
    .pipe(spritesmith({
      imgPath: '../img/icons.png',
      imgName: 'icons.png',
      cssName: '../scss/_icons.scss'
    }));
  return spriteData.pipe( gulp.dest(path.src.sprite.outputFile) );
});

gulp.task('svgSprite', function() {
  gulp.src(path.src.sprite.svgSprite)
    .pipe( svgmin() )
    .pipe( svgstore() )
    .pipe(
      rename({
        basename: "svg-sprite"
      })
    )
    .pipe( gulp.dest(path.src.sprite.outputFile) )
});

gulp.task('svgmin', function() {
  gulp.src(path.src.imgSvg)
    .pipe(
      svgmin({
          js2svg: {
            pretty: true
          },
          plugins: [
            { cleanupIDs: false }
          ],
      })
    )
    .pipe( gulp.dest(path.build.img) )
    .pipe( browserSync.stream() );
});

gulp.task('font', function() {
  gulp.src(path.src.font)
    .pipe( gulp.dest(path.build.font) );
});

gulp.task('js', function() {
  gulp.src(path.src.js)
    .pipe( plumber() )
    .pipe( jade() )
    .pipe(
      rename({
        basename: "main",
        suffix: ".min",
        extname: ".js"
      })
    )
    .pipe( uglify() )
    .pipe( gulp.dest('build/js/') )
    .pipe( browserSync.stream() );
});

gulp.task('del', function() {
  del(path.del);
})

gulp.task('watch', ['del', 'html',  'img', 'imgSprite', 'svgSprite', 'svgmin', 'style' , 'js', 'font'],  function() {
  gulp.watch( [path.src.html, 'src/**/*.md'],  ['html' ] );
  gulp.watch( path.src.style,                  ['style'] );
  gulp.watch( path.src.js,                     ['js'   ] );
  gulp.watch( path.src.font,                   ['font' ] );
  gulp.watch( path.src.img,                    ['img']         );
  gulp.watch( path.src.sprite.imgSprite,       ['imgSprite']   );
  gulp.watch( path.src.sprite.svgSprite,       ['svgSprite']   );
  gulp.watch( path.src.imgSvg,                 ['svgmin'   ]   );
});

gulp.task('default', ['browser-sync', 'watch']);