[WordPress Dev workflow]

Gulpfile.js

var siteUrl = 'wp.lanbox.lt',
    urlProtocol = 'http://',
    secureUrl = false,
    portNumber = 8888,
    reloadDelayMiliseconds = 700;

var homeRoot = '../../',
    srvRoot = homeRoot + 'www_srv/',
    sitesRoot = srvRoot + 'clients/client1/',
    wpContent = sitesRoot + siteUrl + '/web/wp-content/',
    themesRoot = wpContent + 'themes/',
    pluginsRoot = wpContent + 'plugins/';


var themeName = 'anwp',
    themePrefix = 'anwp',
    themeRoot = themesRoot + themeName + '/',
    themeAssets = themeRoot + 'assets/', // tuščia eilutė arba, pvz: 'assets/' – su forward slash pabaigoje
    themeSrcRoot = themeRoot + '_src/';

var pluginOnePrefix = 'wpanwas',
    pluginOneName = pluginOnePrefix + '-helper',
    pluginOneRoot = pluginsRoot + pluginOneName + '/',
    pluginOneAssets = pluginOneRoot + 'assets/', // tuščia eilutė arba, pvz: 'assets/' – su forward slash pabaigoje
    pluginOneSrcRoot = pluginOneRoot + '_src/';

var pluginTwoPrefix = 'anwas',
    pluginTwoName = pluginTwoPrefix + '-custom',
    pluginTwoRoot = pluginsRoot + pluginTwoName + '/',
    pluginTwoAdminRoot = pluginsRoot + pluginTwoName + '/admin/',
    pluginTwoAdminAssets = pluginTwoAdminRoot + '', // tuščia eilutė arba, pvz: 'assets/' – su forward slash pabaigoje
    pluginTwoAdminSrcRoot = pluginTwoAdminAssets + '_src/',
    pluginTwoPublicRoot = pluginsRoot + pluginTwoName + '/public/',
    pluginTwoPublicAssets = pluginTwoPublicRoot + '', // tuščia eilutė arba, pvz: 'assets/' – su forward slash pabaigoje
    pluginTwoPublicSrcRoot = pluginTwoPublicAssets + '_src/';


// Name of working theme destination folder
var theme = {
        root: themeRoot,
        assets: themeAssets,
        css: themeAssets + 'css/',
        cssmin: themeAssets + 'css/', // tuščia eilutė arba, pvz: 'cssmin/' – su forward slash pabaigoje
        js: themeAssets + 'js/',
        img: themeAssets + 'images/',
        languages: themeRoot + 'languages/',
    };

// Name of working theme source folder
var themeSrc = {
        root: themeSrcRoot,
        scss: themeSrcRoot + 'sass/',
        js: themeSrcRoot + 'js/',
    };


// Name of plugin one destination folder
var pluginOne = {
        root: pluginOneRoot,
        assets: pluginOneAssets,
        css: pluginOneAssets + 'css/',
        cssmin: pluginOneAssets + 'css/', // tuščia eilutė arba, pvz: 'cssmin/' – su forward slash pabaigoje
        js: pluginOneAssets + 'js/',
        img: pluginOneAssets + 'images/',
        languages: pluginOneRoot + 'languages/',
    };

// Name of plugin one source folder
var pluginOneSrc = {
        root: pluginOneSrcRoot,
        scss: pluginOneSrcRoot + 'sass/',
        js: pluginOneSrcRoot + 'js/',
    };


// Name of plugin one destination folder
var pluginTwo = {
        root: pluginTwoRoot,
        adminassets: pluginTwoAdminAssets,
        admincss: pluginTwoAdminAssets + 'css/',
        admincssmin: pluginTwoAdminAssets + 'css/', // tuščia eilutė arba, pvz: 'cssmin/' – su forward slash pabaigoje
        adminjs: pluginTwoAdminAssets + 'js/',
        adminimg: pluginTwoAdminAssets + 'images/',
        publicassets: pluginTwoPublicAssets,
        publiccss: pluginTwoPublicAssets + 'css/',
        publiccssmin: pluginTwoPublicAssets + 'css/', // tuščia eilutė arba, pvz: 'cssmin/' – su forward slash pabaigoje
        publicjs: pluginTwoPublicAssets + 'js/',
        publicimg: pluginTwoPublicAssets + 'images/',
        languages: pluginTwoRoot + 'languages/',
    };

// Name of plugin one source folder
var pluginTwoSrc = {
        adminroot: pluginTwoAdminSrcRoot,
        adminscss: pluginTwoAdminSrcRoot + 'sass/',
        adminjs: pluginTwoAdminSrcRoot + 'js/',
        publicroot: pluginTwoPublicSrcRoot,
        publicscss: pluginTwoPublicSrcRoot + 'sass/',
        publicjs: pluginTwoPublicSrcRoot + 'js/',
    };


var autoprefixerBrowsers = [
        'Android 2.3',
        'Android >= 4',
        'Chrome >= 20',
        'Firefox >= 24',
        'Explorer >= 8',
        'iOS >= 6',
        'Opera >= 12',
        'Safari >= 6'
    ];

var gulp = require('gulp'),
    // Prepare and optimize code etc
    autoprefixer = require('autoprefixer'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    pump = require('pump'),
    rename = require("gulp-rename"),
    browserSync = require('browser-sync').create(),
    // compass = require('gulp-compass'),
    image = require('gulp-image'),
    jshint = require('gulp-jshint'),
    postcss = require('gulp-postcss'),
    sass = require('gulp-sass'),
    cleanCSS = require('gulp-clean-css'),
    sourcemaps = require('gulp-sourcemaps'),
    // Only work with new or updated files
    newer = require('gulp-newer');



// CSS via Sass and Autoprefixer
gulp.task('themeCss', function() {
    return gulp.src([themeSrc.scss + '*.scss'])
        .pipe(sourcemaps.init())
        .pipe(sass({
            // compass: true,
            outputStyle: 'expanded',
            indentType: 'tab',
            indentWidth: '1'
        }).on('error', sass.logError))
        .pipe(postcss([
            autoprefixer({ browsers: autoprefixerBrowsers })
        ]))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(theme.css));
});

// CSS Minification and Clean
gulp.task('themeCssMin', function() {
    return gulp.src([theme.css + '*.css', '!' + theme.css + '*.min.css'])
        .pipe(sourcemaps.init())
        .pipe(rename(function (path) {
            path.basename += ".min";
            path.extname = ".css";
        }))
        .pipe(cleanCSS({
            compatibility: 'ie8',
            debug: true
        },
        (details) => {
            console.log(`Original: ${details.name}: ${details.stats.originalSize}`);
            console.log(`Minified: ${details.name}: ${details.stats.minifiedSize}`);
        }
        ))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(theme.cssmin));
});

// JavaScript
gulp.task('themeJavaScript', function(cb) {
    pump([
        gulp.src([themeSrc.js + 'multiple/*.js']),
        newer(theme.js),
        jshint(),
        jshint.reporter('default'),
        gulp.dest(theme.js),
        rename(function (path) {
            path.basename += ".min";
            path.extname = ".js";
        }),
        uglify(),
        gulp.dest(theme.js)
    ],
    cb
    );
});

gulp.task('themeJavaScriptConcat', function(cb) {
    pump([
        gulp.src([themeSrc.js + 'concat/*.js']),
        jshint(),
        jshint.reporter('default'),
        concat(themePrefix + '-theme-scripts.js'),
        gulp.dest(themeSrc.js + 'concat/concatenated/'),
        gulp.dest(theme.js),
        rename(function (path) {
            path.basename += ".min";
            path.extname = ".js";
        }),
        uglify(),
        gulp.dest(theme.js)
    ],
    cb
    );
});

// Optimize images through gulp-image
gulp.task('themeImages', function() {
    return gulp.src(theme.img + 'RAW/**/*.{jpg,JPG,png,svg}')
        .pipe(newer(theme.img))
        .pipe(image())
        .pipe(gulp.dest(theme.img));
});


// CSS via Sass and Autoprefixer
gulp.task('pluginOneCss', function() {
    return gulp.src([pluginOneSrc.scss + '*.scss'])
        .pipe(sourcemaps.init())
        .pipe(sass({
            // compass: true,
            outputStyle: 'expanded',
            indentType: 'tab',
            indentWidth: '1'
        }).on('error', sass.logError))
        .pipe(postcss([
            autoprefixer({ browsers: autoprefixerBrowsers })
        ]))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(pluginOne.css));
});

// CSS Minification and Clean
gulp.task('pluginOneCssMin', function() {
    return gulp.src([pluginOne.css + '*.css', '!' + pluginOne.css + '*.min.css'])
        .pipe(sourcemaps.init())
        .pipe(rename(function (path) {
            path.basename += ".min";
            path.extname = ".css";
        }))
        .pipe(cleanCSS({
            compatibility: 'ie8',
            debug: true
        },
        (details) => {
            console.log(`Original: ${details.name}: ${details.stats.originalSize}`);
            console.log(`Minified: ${details.name}: ${details.stats.minifiedSize}`);
        }
        ))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(pluginOne.cssmin));
});

// JavaScript
gulp.task('pluginOneJavaScript', function(cb) {
    pump([
        gulp.src([pluginOneSrc.js + 'multiple/*.js']),
        newer(pluginOne.js),
        jshint(),
        jshint.reporter('default'),
        gulp.dest(pluginOne.js),
        rename(function (path) {
            path.basename += ".min";
            path.extname = ".js";
        }),
        uglify(),
        gulp.dest(pluginOne.js)
    ],
    cb
    );
});

gulp.task('pluginOneJavaScriptConcat', function(cb) {
    pump([
        gulp.src([pluginOneSrc.js + 'concat/*.js']),
        jshint(),
        jshint.reporter('default'),
        concat(pluginOneName + '-scripts.js'),
        gulp.dest(pluginOneSrc.js + 'concat/concatenated/'),
        gulp.dest(pluginOne.js),
        rename(function (path) {
            path.basename += ".min";
            path.extname = ".js";
        }),
        uglify(),
        gulp.dest(pluginOne.js)
    ],
    cb
    );
});

// Optimize images through gulp-image
gulp.task('pluginOneImages', function() {
    return gulp.src(pluginOne.img + 'RAW/**/*.{jpg,JPG,png,svg}')
        .pipe(newer(pluginOne.img))
        .pipe(image())
        .pipe(gulp.dest(pluginOne.img));
});


// CSS via Sass and Autoprefixer
gulp.task('pluginTwoAdminCss', function() {
    return gulp.src([pluginTwoSrc.adminscss + '*.scss'])
        .pipe(sourcemaps.init())
        .pipe(sass({
            // compass: true,
            outputStyle: 'expanded',
            indentType: 'tab',
            indentWidth: '1'
        }).on('error', sass.logError))
        .pipe(postcss([
            autoprefixer({ browsers: autoprefixerBrowsers })
        ]))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(pluginTwo.admincss));
});

// CSS Minification and Clean
gulp.task('pluginTwoAdminCssMin', function() {
    return gulp.src([pluginTwo.admincss + '*.css', '!' + pluginTwo.admincss + '*.min.css'])
        .pipe(sourcemaps.init())
        .pipe(rename(function (path) {
            path.basename += ".min";
            path.extname = ".css";
        }))
        .pipe(cleanCSS({
            compatibility: 'ie8',
            debug: true
        },
        (details) => {
            console.log(`Original: ${details.name}: ${details.stats.originalSize}`);
            console.log(`Minified: ${details.name}: ${details.stats.minifiedSize}`);
        }
        ))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(pluginTwo.admincssmin));
});

// JavaScript
gulp.task('pluginTwoAdminJavaScript', function(cb) {
    pump([
        gulp.src([pluginTwoSrc.adminjs + 'multiple/*.js']),
        newer(pluginTwo.adminjs),
        jshint(),
        jshint.reporter('default'),
        gulp.dest(pluginTwo.adminjs),
        rename(function (path) {
            path.basename += ".min";
            path.extname = ".js";
        }),
        uglify(),
        gulp.dest(pluginTwo.adminjs)
    ],
    cb
    );
});

gulp.task('pluginTwoAdminJavaScriptConcat', function(cb) {
    pump([
        gulp.src([pluginTwoSrc.adminjs + 'concat/*.js']),
        jshint(),
        jshint.reporter('default'),
        concat(pluginTwoName + '-scripts.js'),
        gulp.dest(pluginTwoSrc.adminjs + 'concat/concatenated/'),
        gulp.dest(pluginTwo.adminjs),
        rename(function (path) {
            path.basename += ".min";
            path.extname = ".js";
        }),
        uglify(),
        gulp.dest(pluginTwo.adminjs)
    ],
    cb
    );
});

// Optimize images through gulp-image
gulp.task('pluginTwoAdminImages', function() {
    return gulp.src(pluginTwo.adminimg + 'RAW/**/*.{jpg,JPG,png,svg}')
        .pipe(newer(pluginTwo.adminimg))
        .pipe(image())
        .pipe(gulp.dest(pluginTwo.adminimg));
});


// CSS via Sass and Autoprefixer
gulp.task('pluginTwoPublicCss', function() {
    return gulp.src([pluginTwoSrc.publicscss + '*.scss'])
        .pipe(sourcemaps.init())
        .pipe(sass({
            // compass: true,
            outputStyle: 'expanded',
            indentType: 'tab',
            indentWidth: '1'
        }).on('error', sass.logError))
        .pipe(postcss([
            autoprefixer({ browsers: autoprefixerBrowsers })
        ]))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(pluginTwo.publiccss));
});

// CSS Minification and Clean
gulp.task('pluginTwoPublicCssMin', function() {
    return gulp.src([pluginTwo.publiccss + '*.css', '!' + pluginTwo.publiccss + '*.min.css'])
        .pipe(sourcemaps.init())
        .pipe(rename(function (path) {
            path.basename += ".min";
            path.extname = ".css";
        }))
        .pipe(cleanCSS({
            compatibility: 'ie8',
            debug: true
        },
        (details) => {
            console.log(`Original: ${details.name}: ${details.stats.originalSize}`);
            console.log(`Minified: ${details.name}: ${details.stats.minifiedSize}`);
        }
        ))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(pluginTwo.publiccssmin));
});

// JavaScript
gulp.task('pluginTwoPublicJavaScript', function(cb) {
    pump([
        gulp.src([pluginTwoSrc.publicjs + 'multiple/*.js']),
        newer(pluginTwo.publicjs),
        jshint(),
        jshint.reporter('default'),
        gulp.dest(pluginTwo.publicjs),
        rename(function (path) {
            path.basename += ".min";
            path.extname = ".js";
        }),
        uglify(),
        gulp.dest(pluginTwo.publicjs)
    ],
    cb
    );
});

gulp.task('pluginTwoPublicJavaScriptConcat', function(cb) {
    pump([
        gulp.src([pluginTwoSrc.publicjs + 'concat/*.js']),
        jshint(),
        jshint.reporter('default'),
        concat(pluginTwoName + '-front-scripts.js'),
        gulp.dest(pluginTwoSrc.publicjs + 'concat/concatenated/'),
        gulp.dest(pluginTwo.publicjs),
        rename(function (path) {
            path.basename += ".min";
            path.extname = ".js";
        }),
        uglify(),
        gulp.dest(pluginTwo.publicjs)
    ],
    cb
    );
});

// Optimize images through gulp-image
gulp.task('pluginTwoPublicImages', function() {
    return gulp.src(pluginTwo.publicimg + 'RAW/**/*.{jpg,JPG,png,svg}')
        .pipe(newer(pluginTwo.publicimg))
        .pipe(image())
        .pipe(gulp.dest(pluginTwo.publicimg));
});



// Watch everything
gulp.task('watch', function() {
    browserSync.init({
        open: 'external',
        proxy: urlProtocol + siteUrl,
        port: portNumber,
        https: secureUrl,
        reloadDelay: reloadDelayMiliseconds
    });
    gulp.watch([themeSrc.root + '**/*.scss' ], ['themeCss']);
    gulp.watch(
        [
            theme.css + '*.css',
            '!' + theme.css + '*.min.css',
            '!' + theme.cssmin + '*.min.css'
        ], ['themeCssMin']
    );
    gulp.watch(themeSrc.js + 'multiple/**/*.js', ['themeJavaScript']);
    gulp.watch(themeSrc.js + 'concat/*.js', ['themeJavaScriptConcat']);
    gulp.watch(theme.img + 'RAW/**/*.{jpg,JPG,png,svg}', ['themeImages']);
    gulp.watch([
        theme.root + '**/*.{php,html,min.css,min.js}',
        '!' + theme.root + '**/*.map',
        '!' + themeSrc.root + '**/*'
    ]).on('change', browserSync.reload);

    gulp.watch([pluginOneSrc.root + '**/*.scss' ], ['pluginOneCss']);
    gulp.watch(
        [
            pluginOne.css + '*.css',
            '!' + pluginOne.css + '*.min.css',
            '!' + pluginOne.cssmin + '*.min.css'
        ], ['pluginOneCssMin']
    );
    gulp.watch(pluginOneSrc.js + 'multiple/**/*.js', ['pluginOneJavaScript']);
    gulp.watch(pluginOneSrc.js + 'concat/*.js', ['pluginOneJavaScriptConcat']);
    gulp.watch(pluginOne.img + 'RAW/**/*.{jpg,JPG,png,svg}', ['pluginOneImages']);
    gulp.watch([
        pluginOne.root + '**/*.{php,html,min.css,min.js}',
        '!' + pluginOne.root + '**/*.map',
        '!' + pluginOneSrc.root + '**/*'
    ]).on('change', browserSync.reload);

    gulp.watch([pluginTwoSrc.adminroot + '**/*.scss' ], ['pluginTwoAdminCss']);
    gulp.watch(
        [
            pluginTwo.admincss + '*.css',
            '!' + pluginTwo.admincss + '*.min.css',
            '!' + pluginTwo.admincssmin + '*.min.css'
        ], ['pluginTwoAdminCssMin']
    );
    gulp.watch(pluginTwoSrc.adminjs + 'multiple/**/*.js', ['pluginTwoAdminJavaScript']);
    gulp.watch(pluginTwoSrc.adminjs + 'concat/*.js', ['pluginTwoAdminJavaScriptConcat']);
    gulp.watch(pluginTwo.adminimg + 'RAW/**/*.{jpg,JPG,png,svg}', ['pluginTwoAdminImages']);

    gulp.watch([pluginTwoSrc.publicroot + '**/*.scss' ], ['pluginTwoPublicCss']);
    gulp.watch(
        [
            pluginTwo.publiccss + '*.css',
            '!' + pluginTwo.publiccss + '*.min.css',
            '!' + pluginTwo.publiccssmin + '*.min.css'
        ], ['pluginTwoPublicCssMin']
    );
    gulp.watch(pluginTwoSrc.publicjs + 'multiple/**/*.js', ['pluginTwoPublicJavaScript']);
    gulp.watch(pluginTwoSrc.publicjs + 'concat/*.js', ['pluginTwoPublicJavaScriptConcat']);
    gulp.watch(pluginTwo.publicimg + 'RAW/**/*.{jpg,JPG,png,svg}', ['pluginTwoPublicImages']);

    gulp.watch([
        pluginTwo.root + '**/*.{php,html,min.css,min.js}',
        '!' + pluginTwo.adminroot + '**/*.map',
        '!' + pluginTwo.publicroot + '**/*.map',
        '!' + pluginTwoSrc.adminroot + '**/*',
        '!' + pluginTwoSrc.publicroot + '**/*'
    ]).on('change', browserSync.reload);
});


// Default task (runs at initiation: gulp --verbose)
gulp.task('default', ['watch']);

install-latest-npm-and-gulp-packages.txt

sudo npm i npm@latest -g
npm install --save-dev gulp gulp-clean-css gulp-concat gulp-image jshint gulp-jshint gulp-newer gulp-postcss gulp-rename gulp-sass gulp-sourcemaps gulp-uglify pump gulp-babel @babel/core @babel/preset-env autoprefixer browser-sync vinyl-ftp jshint-stylish del gulp-sftp run-sequence susy
npm audit fix

package-lock.json

{
  "name": "gulp-dev",
  "version": "1.0.1",
  "description": "Gulp dev workflow",
  "main": "Gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Aivaras",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "autoprefixer": "^9.1.5",
    "browser-sync": "^2.24.7",
    "del": "^3.0.0",
    "gulp": "^3.9.1",
    "gulp-babel": "^8.0.0",
    "gulp-clean-css": "^3.10.0",
    "gulp-concat": "^2.6.1",
    "gulp-image": "^4.3.0",
    "gulp-jshint": "^2.1.0",
    "gulp-newer": "^1.4.0",
    "gulp-postcss": "^8.0.0",
    "gulp-rename": "^1.4.0",
    "gulp-sass": "^4.0.1",
    "gulp-sourcemaps": "^2.6.4",
    "gulp-uglify": "^3.0.1",
    "jshint": "^2.9.6",
    "jshint-stylish": "^2.2.1",
    "pump": "^3.0.0",
    "run-sequence": "^2.2.1",
    "susy": "^3.0.5",
    "vinyl-ftp": "^0.6.1"
  }
}

package.json

{
  "name": "gulp-dev",
  "version": "1.0.1",
  "description": "Gulp dev workflow",
  "main": "Gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Aivaras",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "autoprefixer": "^9.1.5",
    "browser-sync": "^2.24.7",
    "del": "^3.0.0",
    "gulp": "^3.9.1",
    "gulp-babel": "^8.0.0",
    "gulp-clean-css": "^3.10.0",
    "gulp-concat": "^2.6.1",
    "gulp-image": "^4.3.0",
    "gulp-jshint": "^2.1.0",
    "gulp-newer": "^1.4.0",
    "gulp-postcss": "^8.0.0",
    "gulp-rename": "^1.4.0",
    "gulp-sass": "^4.0.1",
    "gulp-sourcemaps": "^2.6.4",
    "gulp-uglify": "^3.0.1",
    "jshint": "^2.9.6",
    "jshint-stylish": "^2.2.1",
    "pump": "^3.0.0",
    "run-sequence": "^2.2.1",
    "susy": "^3.0.5",
    "vinyl-ftp": "^0.6.1"
  }
}