gulpfile.js

'use strict';

const   gulp          = require('gulp'),
        connect       = require('gulp-connect-php'),
        browserSync   = require('browser-sync').create(),
        ngrok         = require('ngrok'),
        gutil         = require('gulp-util'),
        pug           = require('gulp-pug'),
        sass          = require('gulp-sass'),
        sourcemaps    = require('gulp-sourcemaps'),
        babel         = require('gulp-babel'),
        concat        = require('gulp-concat'),
        uglify        = require('gulp-uglify'),
        rename        = require('gulp-rename'),
        notify        = require('gulp-notify'),
        autoprefixer  = require('gulp-autoprefixer'),

    path = {
        root: './app',
        maps: './_maps',
        src: {
            pug:     'app/**/*.pug',
            html:    'app/**/*.html',
            php:     'app/**/*.php',
            sass:    'app/source/styles/**/*.scss',
            js:      'app/source/scripts/*.js',
            jquery:  'bower_components/jquery/dist/jquery.min.js'
        },
        dest: {
            css:     'app/css',
            js:      'app/js',
            jslibs:  'app/js/libs'
        }
    },
    jslibs = [path.src.jquery];

gulp.task('connect-sync', function() {
  connect.server({hostname:'0.0.0.0', port:'8000', base: path.root}, function (){
    browserSync.init({
      proxy: 'localhost:8000',
      notify: false
    });
  }, ngrok.connect({
                proto: 'http',
                addr: 8000,
                console_ui: true
            }, function(err, url){
                console.log(gutil.colors.blue('-------------------------'));
                console.log(gutil.colors.bgBlue(url));
                console.log(gutil.colors.blue('-------------------------'));
                })
            );
});

gulp.task('pug2html', function(){
    return gulp.src(path.src.pug, {base: './'})
        .pipe(sourcemaps.init())
        .pipe(pug().on('error', notify.onError(function(error){
            return 'An error occured while compiling pug file.\nLook in the console for details.\n' + error;
        })))
        .pipe(sourcemaps.write(path.src.maps))
        .pipe(gulp.dest('.'))
});

gulp.task('sass', function(){
    return gulp.src(path.src.sass)
        .pipe(sourcemaps.init())
        .pipe(sass.sync({outputStyle: 'compressed'}).on('error', sass.logError))
        .pipe(autoprefixer({browsers:['last 2 versions'],
            cascade: false
        }))
        .pipe(sourcemaps.write(path.maps))
        .pipe(gulp.dest(path.dest.css))
        .pipe(browserSync.stream())
});

gulp.task('jslibs', function(){
    return gulp.src(jslibs)
        .pipe(sourcemaps.init())
        .pipe(concat('libs.min.js'))
        .pipe(sourcemaps.write('../_maps'))
        .pipe(gulp.dest(path.dest.jslibs))
});

gulp.task('scripts', ['jslibs'], function(){
    return gulp.src(path.src.js)
        .pipe(sourcemaps.init())
        .pipe(babel({presets:['latest']}))
        .pipe(concat('source.js'))
        .pipe(uglify())
        .pipe(rename({suffix:'.min'}))
        .pipe(sourcemaps.write(path.maps))
        .pipe(gulp.dest(path.dest.js))
        .pipe(browserSync.stream())
});

gulp.task('watch',['connect-sync', 'scripts', 'sass', 'pug2html'], function(){
    gulp.watch(path.src.pug, ['pug2html']);
    gulp.watch([path.src.html, path.src.php]).on('change', browserSync.reload);
    gulp.watch(path.src.sass, ['sass']);
    gulp.watch(path.src.js, ['scripts']);
});

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