Example Gulp File

gulp-example.js

// import requirements
const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const minifycss = require('gulp-uglifycss'); // Minifies CSS files.
const combineMQ = require('gulp-combine-mq');
const sourceMaps = require('gulp-sourcemaps');
const babel = require('gulp-babel');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');
const watch = require('gulp-watch');
const filter = require('gulp-filter'); // Enables you to work on a subset of the original files by filtering them using globbing.
const browserSync = require('browser-sync').create(); // Reloads browser and injects CSS. Time-saving synchronised browser testing.
const reload = browserSync.reload; // For manual browser reload.
const imagemin = require('gulp-imagemin'); // Minify PNG, JPEG, GIF and SVG images with imagemin.
const moz = require('imagemin-mozjpeg');
const ping = require('imagemin-pngout');
const notify = require('gulp-notify'); // Sends message notification to you
const pump = require('pump');

// Browsers for autoprefixing.
// Browserlist https://github.com/ai/browserslist
const AUTOPREFIXER_BROWSERS = [
    'last 2 version',
    '> 1%',
    'ie >= 9',
    'ie_mob >= 10',
    'ff >= 30',
    'chrome >= 34',
    'safari >= 7',
    'opera >= 23',
    'ios >= 7',
    'android >= 4',
    'bb >= 10'
];

// Project Variables
// Style URLs
const STYLE_SRC = './dev/sass/style.scss';
const STYLE_DEST = './';
const STYLE_WATCH = './dev/sass/**/**/*.scss';

// JS CUSTOM HONEY URLs
const JS_HONEY_SRC = './dev/js/honey/*.js';
const JS_HONEY_DEST = './dist/js/honey/';
const JS_HONEY_WATCH = './dev/js/honey/*.js';

// JS VENDOR URLs
const JS_VENDOR_SRC = './dev/js/vendor/*.js';
const JS_VENDOR_DEST = './dist/js/vendor/';
const JS_VENDOR_WATCH = './dev/js/vendor/*.js';

// PHP URLs
const PHP_WATCH = './**/**/*.php'; // Path to all PHP files.

// IMAGE URLs
const IMAGE_SRC = './dev/images/**/*.{png,jpg,jpeg,gif,svg}'; // Source folder of images which should be optimized.
const IMAGE_DEST = './dist/images/';

const PROJECT_URL = 'http://localhost/honey_wp/';
// END Project Variables

/**
 * Task: `browser-sync`.
 *
 * Live Reloads, CSS injections, Localhost tunneling.
 *
 * This task does the following:
 *    1. Sets the project URL
 *    2. Sets inject CSS
 *    3. You may define a custom port
 *    4. You may want to stop the browser from opening automatically
 */
gulp.task('browser-sync', function () {
    browserSync.init({
        // For more options
        // @link http://www.browsersync.io/docs/options/
        // Project URL.
        proxy: PROJECT_URL,
        // `true` Automatically open the browser with BrowserSync live server.
        // `false` Stop the browser from automatically opening.
        open: false,
        // Inject CSS changes.
        // Comment it to reload browser for every CSS change.
        injectChanges: true,
        // Use a specific port (instead of the one auto-detected by Browsersync).
        // port: 7000,
    });
});

/**
 * Task: `sass`.
 *
 * Compiles Sass, Autoprefixes it and Minifies CSS.
 *
 * This task does the following:
 *    1. Gets the source scss file
 *    2. Compiles Sass to CSS
 *    3. Writes Sourcemaps for it
 *    4. Autoprefixes it and generates style.css
 *    5. Renames the CSS file with suffix .min.css
 *    6. Minifies the CSS file and generates style.min.css
 *    7. Injects CSS or reloads the browser via browserSync
 */
gulp.task('sass', () => {
    gulp.src(STYLE_SRC)
        .pipe(sourceMaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(combineMQ())
        .pipe(sourceMaps.write({
            includeContent: false
        }))
        .pipe(sourceMaps.init({
            loadMaps: true
        }))
        .pipe(autoprefixer(AUTOPREFIXER_BROWSERS))
        .pipe(sourceMaps.write(STYLE_DEST))
        .pipe(rename('style.css'))
        .pipe(gulp.dest(STYLE_DEST))
        .pipe(filter('**/*.css')) // Filtering stream to only css files
        .pipe(browserSync.stream()) // Reloads style.css if that is enqueued.
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(minifycss({
            maxLineLen: 10
        }))
        .pipe(gulp.dest(STYLE_DEST))
        .pipe(filter('**/*.css')) // Filtering stream to only css files
        .pipe(browserSync.stream()) // Reloads style.min.css if that is enqueued.
        .pipe(notify({
            message: 'TASK: "SASS Styles" Completed! 💯',
            onLast: true
        }))
});

/**
 * Task: 'honeyJS'.
 * 
 * Converts Honey custom JS to ES5
 */
gulp.task('honeyJS', () => {
    pump([
        gulp.src(JS_HONEY_SRC),
        concat('honey-scripts.js'),
        babel({
            presets: ['es2015']
        }),
        uglify({
            preserveComments: 'all'
        }),
        rename({
            extname: '.min.js'
        }),
        gulp.dest(JS_HONEY_DEST),
        notify({
            message: 'TASK: "Custom JS" Completed! 💯',
            onLast: true
        })
    ]);
});

// TODO > add vendor JS task

/**
 * Task: `images`.
 *
 * Minifies PNG, JPEG, GIF and SVG images.
 *
 * This task does the following:
 *     1. Gets the source of images raw folder
 *     2. Minifies PNG, JPEG, GIF and SVG images
 *     3. Generates and saves the optimized images
 *
 * This task will run only once, if you want to run it
 * again, do it with the command `gulp images`.
 */
gulp.task('images', () => {
    gulp.src(IMAGE_SRC)
        .pipe(imagemin({
            use: [
                ping({
                    optimizationLevel: 7
                }),
                moz({
                    quality: {
                        min: 30,
                        max: 50
                    }
                })
            ],
            interlaced: true,
            svgoPlugins: [{
                removeViewBox: false
            }]
        }))
        .pipe(gulp.dest(IMAGE_DEST))
        .pipe(notify({
            message: 'TASK: "Compress Images" Completed! 💯',
            onLast: true
        }));
});

/**
 * Watch Tasks.
 *
 * Watches for file changes and runs specific tasks.
 */
gulp.task('default', ['sass', 'honeyJS', 'images', 'browser-sync'], () => {
    gulp.watch(PHP_WATCH, reload); // Reload on PHP file changes.
    gulp.watch(STYLE_WATCH, ['sass']);
    gulp.watch(JS_HONEY_WATCH, ['honeyJS', reload]); // Reload on JS changes
});