Gulp Front-End Development Platform

gulpfile.babel.js

/**
 * Gulp Front-End Development Platform
 *
 * @author: Ahmet Işıtan Narlı
 * @mail: ahmetisitannarli@gmail.com
 * @git: github.com/isitannarli
 * @created_at: 2016-04-30
 * @updated_at: 2017-01-21
 *
 */

import gulp from 'gulp';
import connect from 'gulp-connect';
import concat from 'gulp-concat';
import uglify from 'gulp-uglify';
import sourcemaps from 'gulp-sourcemaps';
import notify from 'gulp-notify';
import plumber from 'gulp-plumber';
import sass from 'gulp-sass';
import autoprefixer from 'gulp-autoprefixer';
import pug from 'gulp-pug';
import babel from 'gulp-babel';
import cache from 'gulp-cache';
import imagemin from 'gulp-imagemin';
import pngquant from 'imagemin-pngquant';
import browserSync from 'browser-sync';
import ngrok from 'ngrok';

const reload = browserSync.reload;

gulp.task('browserSync', () => {
    browserSync({
        port: 3000,
        notify: false,
        reloadOnRestart: true,
        injectChanges: true,
        server: {
            baseDir: ['./']
        },
        ghostMode: {
            clicks: true,
            location: true,
            forms: true,
            scroll: true
        }
    }, (err, browserSync) => {
        ngrok.connect(browserSync.options.get('port'), (err, url) => {
            if(url)
                console.log('Ngrok Url = ' + url);
            else
                console.log(err);
        });
    });
});

gulp.task('templates', () => {
    return gulp.src('src/*.pug')
               .pipe(plumber({
                    errorHandler: notify.onError("Error: <%= error.message %>")
               }))
               .pipe(pug({
                   pretty: true
               }))
               .pipe(gulp.dest('./'))
               .pipe(reload({stream:true}));
});

gulp.task('scripts', () => {
    return gulp.src('src/js/**/*.js')
               .pipe(plumber({
                    errorHandler: notify.onError("Error: <%= error.message %>")
               }))
               .pipe(sourcemaps.init())
               .pipe(babel({
                   presets: ['es2015'],
                   plugins: ['transform-runtime']
               }))
               .pipe(concat('main.min.js'))
               .pipe(uglify())
               .pipe(sourcemaps.write('.'))
               .pipe(gulp.dest('js'))
               .pipe(reload({stream:true}));
});

gulp.task('styles', () => {
    return gulp.src('src/sass/*.scss')
               .pipe(plumber({
                    errorHandler: notify.onError("Error: <%= error.message %>")
               }))
               .pipe(sourcemaps.init())
               .pipe(sass.sync({
                    outputStyle: 'expanded'
               }))
               .pipe(gulp.dest('css'))
               .pipe(sass.sync({
                   outputStyle: 'compressed',
                   precision: 10,
                   includePaths: ['.']
               }))
               .pipe(autoprefixer({
                    browsers: [
                        'last 3 versions',
                        'ie 8',
                        'iOS >= 8.1',
                        'Android >= 4.4'
                    ],
                    cascade: false
               }))
               .pipe(concat('main.min.css'))
               .pipe(sourcemaps.write('.'))
               .pipe(gulp.dest('css'))
               .pipe(browserSync.stream({match: '**/*.css'}));
               // .pipe(reload({ stream: true }));
});

gulp.task('images', () => {
    return gulp.src('src/images/**/*.{jpg,jpeg,png,gif,svg}')
               .pipe(plumber({
                    errorHandler: notify.onError("Error: <%= error.message %>")
               }))
               .pipe(cache(imagemin({
                    optimizationLevel: 4,
                    progressive: true,
                    interlaced: true,
                    svgoPlugins: [{
                        removeViewBox: false,
                        cleanupIDs: false
                    }],
                    use: [pngquant()]
               })))
               .pipe(gulp.dest('images'))
               .pipe(reload({ stream:true }));
});

gulp.task('watch', ['browserSync'], () => {
    gulp.watch('src/images/**/*', ['images']).on("change", reload);
    gulp.watch(['src/*.pug'], ['templates', reload]);
    gulp.watch(['src/sass/**/*.scss'], ['styles']);
    gulp.watch(['src/js/**/*.js'], ['scripts']);
    gulp.watch(['*.html']).on("change", reload);
});

gulp.task('default', ['styles', 'scripts', 'templates', 'images', 'browserSync', 'watch']);

package.json

{
  "name": "gulphister",
  "version": "1.0.4",
  "private": true,
  "engines": {
    "node": ">=4.7.0"
  },
  "devDependencies": {
    "autoprefixer": "^6.6.1",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-register": "^6.22.0",
    "browser-sync": "^2.18.6",
    "browserify": "^13.3.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-babel": "^6.1.2",
    "gulp-cache": "^0.4.5",
    "gulp-concat": "^2.6.1",
    "gulp-connect": "^5.0.0",
    "gulp-imagemin": "^3.1.1",
    "gulp-notify": "^2.2.0",
    "gulp-plumber": "^1.1.0",
    "gulp-pug": "^3.2.0",
    "gulp-sass": "^3.1.0",
    "gulp-sourcemaps": "^2.4.0",
    "gulp-uglify": "^2.0.0",
    "imagemin-pngquant": "^5.0.0",
    "ngrok": "^2.2.5"
  },
  "dependencies": {}
}