gulpfile.js

var gulp = require("gulp"),
    browserSync = require("browser-sync"),
    plugins = require("gulp-load-plugins")();
    plugins.del = require("del");

var path = {
  dest: {
    pug: 'dist',
    sass: 'dist/css',
    js: 'dist/js',
    fonts: 'dist/fonts',
    images: 'dist/images',
    svg: 'dist/images'
  },
  src: {
    pug: 'src/*.pug',
    sass: [
      'src/sass/*.sass',
      'src/sass/*.scss'
    ],
    js: './src/js/_*.js',
    jsMin: '!./src/js/_*.js',
    fonts: 'src/fonts/**/*.*',
    images: 'src/images/**/*.*',
    svg: 'src/svg/**/*.svg'
  },
  watch: {
    svg: 'src/svg/**/*.svg',
    pug: 'src/**/*.pug',
    sass: [
      'src/sass/**/*.sass',
      'src/sass/**/*.scss'
    ],
    js: 'src/js/**/*.js',
    fonts: 'src/fonts/**/*.*',
    images: 'src/images/**/*.*'
  },
  sourcemaps: '../maps',
  clean: 'dist'
};

gulp.task("server", function () {
  browserSync.init({
    server: {
      baseDir: "./dist",
    },
    notify: false,
    open: false,
    reloadOnRestart: true,
    port: 9000
  });
});

gulp.task("html", function () {
  return gulp.src(path.src.pug)
      .pipe(plugins.plumber())
      .pipe(plugins.pug({
        pretty: true
      }))
      .pipe(gulp.dest(path.dest.pug))
});

gulp.task("css", function () {
  return gulp.src(path.src.sass)
      .pipe(plugins.plumber())
      .pipe(plugins.sourcemaps.init())
      .pipe(plugins.sass())
      .pipe(plugins.postcss([
        require("css-mqpacker"),
        require("autoprefixer")({
          browsers: ['> 1%', 'last 20 versions', 'Firefox ESR', 'Opera 12.1'],
          cascade: true
        })
      ]))
      .pipe(plugins.sourcemaps.write(path.sourcemaps))
      .pipe(gulp.dest(path.dest.sass))
});

gulp.task("css:prod", function () {
  return gulp.src(path.src.sass)
      .pipe(plugins.plumber())
      .pipe(plugins.sass())
      .pipe(plugins.postcss([
        require("css-mqpacker"),
        require("autoprefixer")({
          browsers: ['> 1%', 'last 20 versions', 'Firefox ESR', 'Opera 12.1'],
          cascade: true
        })
      ]))
      .pipe(gulp.dest(path.dest.sass))
      .pipe(plugins.csso())
      .pipe(plugins.rename({
        suffix: '.min'
      }))
      .pipe(gulp.dest(path.dest.sass))
});

gulp.task("js", function () {
  return gulp.src(path.src.jsMin)
      .pipe(plugins.plumber())
      .pipe(plugins.sourcemaps.init())
      .pipe(plugins.sourcemaps.write(path.sourcemaps)
          .pipe(gulp.dest(path.dest.js)))
});

gulp.task("js:prod", function () {
  var minify = gulp.src(path.src.jsMin)
      .pipe(plugins.plumber())
      .pipe(gulp.dest(path.dest.js))
      .pipe(plugins.uglify())
      .pipe(plugins.rename({
        suffix: '.min'
      }))
      .pipe(gulp.dest(path.dest.js))

  var notMinify = gulp.src(path.src.js)
      .pipe(plugins.plumber())
      .pipe(plugins.rename(function (path) {
        path.basename = path.basename.replace(/_/, '');
        return path;
      }))
      .pipe(gulp.dest(path.dest.js))

  return plugins.merge(minify, notMinify);
});

gulp.task("fonts", function () {
  return gulp.src(path.src.fonts)
      .pipe(plugins.plumber())
      .pipe(gulp.dest(path.dest.fonts))
})

gulp.task("images", function () {
  return gulp.src(path.src.images)
      .pipe(plugins.plumber())
      .pipe(gulp.dest(path.dest.images))
})

gulp.task("images:prod", function () {
  return gulp.src(path.src.images)
      .pipe(plugins.plumber())
      .pipe(plugins.imagemin([
        plugins.imagemin.gifsicle({interlaced: true}),
        plugins.imagemin.jpegtran({progressive: true}),
        plugins.imagemin.optipng({optimizationLevel: 5}),
        plugins.imagemin.svgo({plugins: [{removeViewBox: false}]})
      ]))
      .pipe(gulp.dest(path.dest.images))
})

gulp.task("svg", function () {
  return gulp.src(path.src.svg)
      .pipe(plugins.plumber())
      .pipe(plugins.svgmin())
      .pipe(plugins.svgstore({
        inlineSvg: true
      }))
      .pipe(gulp.dest(path.dest.svg));
})

gulp.task("clean", function () {
  return plugins.del(path.clean)
});

gulp.task("watch", function () {

  plugins.watch(path.watch.pug, function (callback) {
    plugins.sequence(
        "html",
        callback
    )
  });

  plugins.watch(path.watch.sass, function (callback) {
    plugins.sequence(
        "css",
        callback
    )
  });

  plugins.watch(path.watch.js, function (callback) {
    plugins.sequence(
        "js",
        callback
    )
  });

  plugins.watch(path.watch.fonts, function (callback) {
    plugins.sequence(
        "fonts",
        callback
    )
  });

  plugins.watch(path.watch.images, function (callback) {
    plugins.sequence(
        "images",
        callback
    )
  });

  plugins.watch(path.watch.svg, function (callback) {
    plugins.sequence(
        "svg",
        callback
    )
  });
});

gulp.task("build:dev", ["clean"], function (callback) {
  plugins.sequence(
      "html",
      "css",
      "js",
      "fonts",
      "images",
      "svg",
      "server",
      "watch",
      callback
  )
});

gulp.task("build:prod", ["clean"], function (callback) {
  plugins.sequence(
      "html",
      "css:prod",
      "js:prod",
      "fonts",
      "images:prod",
      "svg",
      callback
  )
});

gulp.task("dev", function (callback) {
  plugins.sequence(
      "build:dev",
      callback
  )
});

gulp.task("prod", function (callback) {
  plugins.sequence(
      "build:prod",
      callback
  )
});

gulp.task("default", function (callback) {
  plugins.sequence(
      "build:dev",
      callback
  )
});