CSS / JS / PUG Gulp files for standard PHP project

gulp.js

/* load our libraries */
const { series, parallel, src, dest, watch } = require("gulp");
const sass = require("gulp-sass");
const uglify = require("gulp-uglify");
const babel = require("gulp-babel");
const pug = require("gulp-pug");
const concat = require("gulp-concat");
const cleanCSS = require("gulp-clean-css");
const sourcemaps = require("gulp-sourcemaps");
const del = require("del");
const rebase = require('gulp-css-rebase');
const rewriteCSS = require('gulp-rewrite-css');
const replace = require('gulp-replace');

/* attach the sass compiler to the sass class */
sass.compiler = require("node-sass");

const tempFolder = "var/tmp";
const distFolder = "htdocs/dist";
const finalCss = "dist.css";
const finalJs = "dist.js";
const assetsFolder = "htdocs/assets";

// ie. ["application/views/**/*.pug"]
let pugViews = [];

let css = {
	compressed: [
		"node_modules/font-awesome/css/font-awesome.min.css",
		"node_modules/bootstrap/dist/css/bootstrap.min.css",
		"node_modules/bootstrap-select/dist/css/bootstrap-select.min.css",
	],
	uncompressed: [
		"node_modules/roboto-fontface/css/roboto/roboto-fontface.css",
		"assets/css/application.css",
		"assets/plugins/notify/notify.css",
		"assets/plugins/table-sort/table-sort.css"
	],
	scss: [],
};

let js = {
	compressed: [
		"node_modules/jquery/dist/jquery.min.js",
		"node_modules/tinybind/dist/tinybind.min.js",
		"node_modules/bootstrap/dist/js/bootstrap.min.js",
		"node_modules/bootstrap-select/dist/js/bootstrap-select.min.js",
		"node_modules/tinysort/dist/tinysort.min.js",
		"node_modules/bootbox/dist/bootbox.all.min.js",
		"node_modules/sprintf-js/dist/sprintf.min.js"
	],
	uncompressed: [
		"node_modules/localstorage-fifo/src/fifo.js",
		"assets/plugins/notify/notify.js",
		"assets/plugins/orangeBind/orangeCollection.js",
		"assets/plugins/orangeBind/orangeLoader.js",
		"assets/plugins/orangeBind/orangeRouter.js",
		"assets/plugins/orangeBind/orangeRequest.js",
		"assets/plugins/orangeBind/orangeBinders.js",
		"assets/plugins/orangeBind/orangeFormatters.js",
		"assets/plugins/orangeBind/orangeBind.js",
		"assets/js/application.js",

		"assets/app/app.js",
		"assets/app/nav.js",

		"assets/js/onReady.js"
	],
};

let copyDir = {
	//"node_modules/blueimp-md5/js/md5.min.js": "dmyers-sandbox-myshopify-com-venture/assets",
	//"dmyers-sandbox-myshopify-com-venture/assets/sb.js": "build",
	//"node_modules/font-awesome/fonts/*": "htdocs/assets/fonts",
	//"node_modules/roboto-fontface/fonts/roboto/*": "htdocs/assets/fonts/roboto",
	"assets/fav/favicon.ico": "htdocs"
};

/* all config finished */

/* auto build the watch arrays */
let watchFiles = Array.prototype.concat(pugViews, css.uncompressed, css.compressed, css.scss, js.compressed, js.uncompressed);
let watchFilesJs = Array.prototype.concat(js.uncompressed);
let watchFilesCss = Array.prototype.concat(css.uncompressed, css.compressed, css.scss);
let watchFilesPug = pugViews;

var tasks = {
	compilePug: function (callback) {
		if (pugViews.length > 0) {
			return src(pugViews)
				.pipe(
					pug({
						pretty: true,
					})
				)
				.pipe(dest("application/views"));
		} else {
			return callback();
		}
	},
	compileJsCompressed: function (callback) {
		if (js.compressed.length > 0) {
			return src(js.compressed).pipe(concat("1_compressed.js")).pipe(dest(tempFolder));
		} else {
			return callback();
		}
	},
	compileJsUncompressed: function (callback) {
		/*
		.pipe(sourcemaps.init())
		.pipe(sourcemaps.write('.'))
		*/
		if (js.uncompressed.length > 0) {
			return src(js.uncompressed)
				.pipe(
					babel({
						presets: [["@babel/preset-env", { "targets": "defaults" }]],
						plugins: ["@babel/plugin-proposal-class-properties"],
					})
				)
				.pipe(uglify())
				.pipe(concat("2_uncompressed.js"))
				.pipe(dest(tempFolder));
		} else {
			return callback();
		}
	},
	compileCssUncompressed: function (callback) {
		if (css.uncompressed.length > 0) {
			return src(css.uncompressed)
				.pipe(rebase({ output_css: '.' + distFolder, output_assets: '.' + assetsFolder, overwrite: true }))
				.pipe(cleanCSS({ compatibility: "ie9" })) /* compress */
				.pipe(concat("1_css.css"))
				.pipe(dest(tempFolder));
		} else {
			return callback();
		}
	},
	compileSass: function (callback) {
		if (css.scss.length > 0) {
			return src(css.scss)
				.pipe(sass())
				.pipe(concat("2_sass.css"))
				.pipe(dest(tempFolder));
		} else {
			return callback();
		}
	},
	compileCssCompressed: function (callback) {
		if (css.compressed.length > 0) {
			return src(css.compressed)
				.pipe(rebase({ output_css: '.' + distFolder, output_assets: '.' + assetsFolder, overwrite: true }))
				.pipe(cleanCSS({ compatibility: "ie9" })) /* compress */
				.pipe(concat("3_css.css"))
				.pipe(dest(tempFolder));
		} else {
			return callback();
		}
	},
	combinedJs: function (callback) {
		return src(tempFolder + "/*.js")
			.pipe(concat(finalJs))
			.pipe(dest(distFolder));
	},
	combinedCss: function (callback) {
		return src(tempFolder + "/*.css")
			.pipe(concat(finalCss))
			.pipe(dest(distFolder));
	},
	copyDirectories: function (callback) {
		if (Object.keys(copyDir).length > 0) {
			for (const property in copyDir) {
				src(property).pipe(dest(copyDir[property]));
			}
		}

		return callback();
	},
	cleanUp: function (callback) {
		return del([tempFolder + "/*.js", tempFolder + "/*.css"], callback);
		//return del([tempFolder + "/*", distFolder + "/" + finalJs, distFolder + "/" + finalCss], callback);
	},
};

exports["watch:all"] = () => {
	exports["default"]();
	watch(watchFiles, series(parallel(series(tasks.compileJsUncompressed, tasks.combinedJs), series(parallel(tasks.compileSass, tasks.compileCssUncompressed, tasks.compileCssCompressed), tasks.combinedCss)), tasks.compilePug, tasks.copyDirectories));
};

exports["watch:js"] = () => {
	exports["default"]();
	watch(watchFilesJs, series(parallel(tasks.compileJsCompressed, tasks.compileJsUncompressed), tasks.combinedJs, tasks.copyDirectories));
};

exports["watch:css"] = () => {
	exports["default"]();
	watch(watchFilesCss, series(parallel(tasks.compileSass, tasks.compileCssUncompressed, tasks.compileCssCompressed), tasks.combinedCss, tasks.copyDirectories));
};

exports["watch:pug"] = () => {
	exports["default"]();
	watch(watchFilesPug, parallel(tasks.compilePug), tasks.copyDirectories, tasks.copyDirectories);
};

exports.copy = series(tasks.copyDirectories);

exports.clean = series(tasks.cleanUp);

exports.default = series(tasks.cleanUp, parallel(series(parallel(tasks.compileJsCompressed, tasks.compileJsUncompressed), tasks.combinedJs), series(parallel(tasks.compileSass, tasks.compileCssUncompressed, tasks.compileCssCompressed), tasks.combinedCss), tasks.compilePug), tasks.copyDirectories);

Install Node and Gulp

Install Gulp

https://nodejs.org/en/

* Install Node

Node.js v12.16.1 to /usr/local/bin/node
npm v6.13.4 to /usr/local/bin/npm


# Using Ubuntu
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt-get install -y nodejs

https://github.com/nodesource/distributions/blob/master/README.md

* install gulp

sudo npm install gulp-cli -g

* install node npm development modules (in the package.json devDependencies)

npm install --only=dev

npm install gulp-cli -g
npm install gulp -D
npx -p touch nodetouch gulpfile.js
gulp --help

package.json

{
	"name": "mvvmbind",
	"version": "1.0.0",
	"description": "",
	"keywords": [],
	"author": "",
	"license": "ISC",
	"dependencies": {
		"bootbox": "^5.3.4",
		"bootstrap": "^4.6.0",
		"bootstrap-select": "^1.13.12",
		"bootstrap3": "^3.3.5",
		"bootstrap4": "0.0.1-security",
		"del": "^4.1.1",
		"font-awesome": "^4.7.0",
		"handlebars": "^4.7.7",
		"jquery": "^3.5.0",
		"jstorage": "^0.4.8",
		"keymaster": "^1.6.2",
		"localstorage-fifo": "^2.0.1",
		"popper.js": "^1.16.0",
		"roboto-fontface": "^0.10.0",
		"sprintf-js": "^1.1.2",
		"tinybind": "^1.0.0",
		"tinysort": "^3.2.5"
	},
	"devDependencies": {
		"@babel/core": "^7.7.2",
		"@babel/plugin-proposal-class-properties": "^7.13.0",
		"@babel/plugin-proposal-json-strings": "^7.7.4",
		"@babel/plugin-syntax-dynamic-import": "^7.7.4",
		"@babel/plugin-syntax-import-meta": "^7.7.4",
		"@babel/preset-env": "^7.14.0",
		"@babel/preset-stage-3": "^7.0.0",
		"gulp": "^4.0.2",
		"gulp-babel": "^8.0.0",
		"gulp-clean-css": "^4.3.0",
		"gulp-cli": "^2.2.0",
		"gulp-concat": "^2.6.1",
		"gulp-css-rebase": "^2.0.5",
		"gulp-files-sync": "^0.3.2",
		"gulp-pug": "^4.0.1",
		"gulp-rename": "^1.4.0",
		"gulp-replace": "^1.1.2",
		"gulp-rewrite-css": "^1.1.2",
		"gulp-sass": "^4.0.2",
		"gulp-sourcemaps": "^2.6.5",
		"gulp-uglify": "^3.0.2"
	}
}