Full Gulpfile

gulpfile.js

'use strict';

var gulp = require('gulp'),
    watch = require('gulp-watch'),
    uglify = require('gulp-uglify'),
    sass = require('gulp-sass'),
    sourcemaps = require('gulp-sourcemaps'),
    rigger = require('gulp-rigger'),
    cssmin = require('gulp-minify-css'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    rimraf = require('rimraf'),
    iconfont = require('gulp-iconfont'),
    iconfontCss = require('gulp-iconfont-css'),
    runTimestamp = Math.round(Date.now()/1000),
    browserSync = require("browser-sync"),
    reload = browserSync.reload;

var path = {
    dest: { // Тут мы укажем куда складывать готовые после сборки файлы
        html: 'dist/',
        js: 'dist/js/',
        css: 'dist/css/',
        img: 'dist/img/',
        svg: 'dist/svg/',
        fonts: 'dist/fonts/'
    },
    src: { // Пути откуда брать исходники
        html: 'app/*.html',
        js: 'app/js/script.js',
        style: 'app/scss/style.scss',
        img: 'app/img/**/*.*',
        svg: 'app/svg/**/*.*',
        icons: 'app/icons/*.svg',
        fonts: 'app/fonts/**/*.*'
    },
    watch: { // Изменениея каких файлов мы хотим наблюдать
       html: 'app/**/*.html',
       js: 'app/js/**/*.js',
       jscopy: 'app/js/vendor/*.js',
       style: 'app/scss/**/*.scss',
       img: 'app/img/**/*.*',
       svg: 'app/svg/**/*.*',
       icons: 'app/icons/**/*.*',
       fonts: 'app/fonts/**/*.*'
    },
    clean: './dist'
};

var config = {
    server: {
        baseDir: "./"
    },
    host: 'localhost',
    port: 3000,
    startPath: "/dist",
    browser: "Google Chrome"
    //tunnel: true,
    //logPrefix: "xaxa_"
};

// ICONFONT
gulp.task('icons:build', function(){
  gulp.src(path.src.icons)
    .pipe(iconfontCss({
      fontName: 'iconfont-main',
      path: 'app/icons/_icons.css',
      targetPath: './stylesheet.css',
      fontPath: './'
    }))
    .pipe(iconfont({
      fontName: 'iconfont-main', // required
      prependUnicode: true, // recommended option
      formats: ['ttf', 'eot', 'woff', 'woff2'], // default, 'woff2' and 'svg' are available
      timestamp: runTimestamp, // recommended to get consistent builds when watching files
      normalize: true,
      fontHeight: 1001,
     }))
    .pipe(gulp.dest(path.dest.fonts + './iconfont-main'));
});

// HTML
gulp.task('html:build', function () {
    gulp.src(path.src.html) // Выберем файлы по нужному пути
        .pipe(rigger()) // Прогоним через rigger
        .pipe(gulp.dest(path.dest.html)) // Выплюнем их в папку build
        .pipe(reload({stream: true})); // И перезагрузим наш сервер для обновлений
});

// JS
gulp.task('js:build', function () {
    gulp.src(path.src.js) // Найдем наш script файл
        .pipe(rigger()) // Прогоним через rigger
        .pipe(gulp.dest(path.dest.js)) // Выплюнем несжатый файл в build
        .pipe(sourcemaps.init()) // Инициализируем sourcemap
        .pipe(uglify()) // Сожмем наш js
        .pipe(rename({ suffix: '.min' })) // Добавим min
        .pipe(sourcemaps.write()) // Пропишем карты
        .pipe(gulp.dest(path.dest.js)) // Выплюнем готовый файл в build
        .pipe(reload({stream: true})); // И перезагрузим сервер
});

// JS COPY
gulp.task('js-copy:build', function () {
    gulp.src('app/js/vendor/*.js') // Найдем все вендорные script-ы
        .pipe(gulp.dest(path.dest.js)) // Выплюнем в build
        .pipe(reload({stream: true})); // И перезагрузим сервер
});

// CSS
gulp.task('style:build', function () {
    gulp.src(path.src.style) // Выберем наш style.scss
        .pipe(sourcemaps.init()) // То же самое что и с js
        .pipe(sass()) // Скомпилируем
        //.pipe(prefixer()) // Добавим вендорные префиксы
        .pipe(gulp.dest(path.dest.css)) // Выплюнем несжатый файл в build
        .pipe(cssmin()) // Сожмем
        .pipe(rename({ suffix: '.min' })) // Добавим min
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(path.dest.css)) // И в build
        .pipe(reload({stream: true}));
});

// Images
gulp.task('image:build', function () {
    gulp.src(path.src.img) // Выберем наши картинки
        .pipe(imagemin({ // Сожмем их
            progressive: true,
            //use: [pngquant()],
            interlaced: true
        }))
        .pipe(gulp.dest(path.dest.img)) // И бросим в build
        .pipe(reload({stream: true}));
});

// SVG
gulp.task('svg:build', function () {
    gulp.src(path.src.svg) // Выберем наши картинки
        .pipe(imagemin({ // Сожмем их
            svgoPlugins: [{removeViewBox: false}],
        }))
        .pipe(gulp.dest(path.dest.svg)) // И бросим в build
        .pipe(reload({stream: true}));
});

// Fonts
gulp.task('fonts:build', function() {
    gulp.src(path.src.fonts)
        .pipe(gulp.dest(path.dest.fonts))
});

// Common task
gulp.task('build', [
    'html:build',
    'js:build',
    'js-copy:build',
    'style:build',
    'image:build',
    'svg:build',
    'icons:build',
    'fonts:build'
]);

// Watch
gulp.task('watch', function(){
    watch([path.watch.html], function(event, cb) {
        gulp.start('html:build');
    });
    watch([path.watch.style], function(event, cb) {
        gulp.start('style:build');
    });
    watch([path.watch.js], function(event, cb) {
        gulp.start('js:build');
    });
    watch([path.watch.jscopy], function(event, cb) {
        gulp.start('js-copy:build');
    });
    watch([path.watch.img], function(event, cb) {
        gulp.start('image:build');
    });
    watch([path.watch.svg], function(event, cb) {
        gulp.start('svg:build');
    });
    watch([path.watch.icons], function(event, cb) {
        gulp.start('icons:build');
    });
    watch([path.watch.fonts], function(event, cb) {
        gulp.start('fonts:build');
    });
});

// Local server
gulp.task('webserver', function () {
    browserSync(config);
});

// Clean 'dist'
gulp.task('clean', function (cb) {
    rimraf(path.clean, cb);
});

// Default task
gulp.task('default', ['build', 'webserver', 'watch']);

// Big thanks to Insayt! https://habrahabr.ru/post/250569/