Skip to content

Commit

Permalink
reload gulp after deploy #182 (#183)
Browse files Browse the repository at this point in the history
  • Loading branch information
@chrisherold
chrisherold authored Sep 27, 2023
1 parent e3b8a21 commit ad87990
Show file tree
Hide file tree
Showing 2 changed files with 83 additions and 73 deletions.
6 changes: 6 additions & 0 deletions _build/deploy.sh
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,12 @@ else
fi
fi

if pgrep gulp >/dev/null 2>&1
then
echo "Rebuilding gulp dev assets"
npx gulp restart
fi

if [ -f ".env" ]; then
unset $(grep -v '^#' .env | sed -E 's/(.*)=.*/\1/' | xargs)
fi
150 changes: 77 additions & 73 deletions gulpfile.mjs
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,28 @@
'use strict';
"use strict";

// load gulp and gulp plugins
import gulp from 'gulp';
import plugins from 'gulp-load-plugins';
import dartSass from 'sass';
import gulpSass from 'gulp-sass';
import gulpEsbuild from 'gulp-esbuild';
import path from 'path';
import revAll from 'gulp-rev-all';
import { globalExternals } from '@fal-works/esbuild-plugin-global-externals';
import { readFile } from 'fs/promises';
import gulp from "gulp";
import plugins from "gulp-load-plugins";
import dartSass from "sass";
import gulpSass from "gulp-sass";
import gulpEsbuild from "gulp-esbuild";
import path from "path";
import revAll from "gulp-rev-all";
import { globalExternals } from "@fal-works/esbuild-plugin-global-externals";
import { readFile } from "fs/promises";
const sass = gulpSass(dartSass);

const $ = plugins({
config: path.join(process.cwd(), 'package.json'),
config: path.join(process.cwd(), "package.json"),
});

// load node modules
import { deleteSync } from 'del';
import pump from 'pump';
import beeper from 'beeper';
import { deleteSync } from "del";
import pump from "pump";
import beeper from "beeper";

// others
import browserSync from 'browser-sync';
import browserSync from "browser-sync";
const server = browserSync.create();
//
// Gulp config
Expand All @@ -33,17 +33,17 @@ const server = browserSync.create();
let localConfig;

try {
const data = await readFile('./gulpconfig.json');
const data = await readFile("./gulpconfig.json");
localConfig = JSON.parse(data);
} catch (err) {
localConfig = {
gulp: {
debug: false,
},
bs: {
proxy: 'http://localhost:8000',
logLevel: 'info',
tunnel: '',
proxy: "http://localhost:8000",
logLevel: "info",
tunnel: "",
open: true,
notify: false,
},
Expand All @@ -52,29 +52,29 @@ try {

// Build themeDir variable based on current theme from config file, fallback to default

const themeRoot = 'wp-content/themes/';
const theme = localConfig.activeTheme || 'timber';
const themeRoot = "wp-content/themes/";
const theme = localConfig.activeTheme || "timber";
const themeDir = themeRoot + theme;

// Defaults

const config = {
theme: themeDir,
assets: themeDir + '/assets',
dist: themeDir + '/dist',
dev: themeDir + '/dev',
output: themeDir + '/dev', // default to dev
static: themeDir + '/static',
init: './_init',
assets: themeDir + "/assets",
dist: themeDir + "/dist",
dev: themeDir + "/dev",
output: themeDir + "/dev", // default to dev
static: themeDir + "/static",
init: "./_init",
};

// Esbuild project customizations
const esbuildConfig = {
path: 'js',
exclude: ['!**/assets/vendor/**', '!**/assets/js/lib/**'],
include: [config.assets + '/{js}/calc/*'],
path: "js",
exclude: ["!**/assets/vendor/**", "!**/assets/js/lib/**"],
include: [config.assets + "/{js}/calc/*"],
globals: {
jquery: '$',
jquery: "$",
},
};

Expand All @@ -98,13 +98,13 @@ const handleErrors = (err) => {

// notifications
if (err.line && err.column) {
var notifyMessage = 'LINE ' + err.line + ':' + err.column + ' -- ';
var notifyMessage = "LINE " + err.line + ":" + err.column + " -- ";
} else {
var notifyMessage = '';
var notifyMessage = "";
}

$.notify({
title: 'FAIL: ' + err.plugin,
title: "FAIL: " + err.plugin,
message: notifyMessage + err.message,
});

Expand All @@ -122,18 +122,18 @@ const handleErrors = (err) => {

const styles = (done) => {
const sassOptions = {
outputStyle: 'expanded',
outputStyle: "expanded",
};

pump(
[
gulp.src(config.assets + '/scss/*.scss', {
gulp.src(config.assets + "/scss/*.scss", {
sourcemaps: !isProduction,
}),
sass(sassOptions),
$.if(isProduction, $.autoprefixer('last 2 versions')),
$.if(isProduction, $.autoprefixer("last 2 versions")),
$.if(isProduction, $.csso()),
gulp.dest(config.output + '/css', { sourcemaps: !isProduction }),
gulp.dest(config.output + "/css", { sourcemaps: !isProduction }),
server.stream(),
],
(err) => {
Expand Down Expand Up @@ -161,41 +161,41 @@ const scripts = (done) => {
});

const renameOptions = (path) => {
path.dirname = 'js';
path.dirname = "js";
};

const filterExclusions = $.filter(['**', ...esbuildConfig.exclude], {
const filterExclusions = $.filter(["**", ...esbuildConfig.exclude], {
restore: true,
});

pump(
[
gulp.src(config.theme + '/views/layout.twig'),
gulp.src(config.theme + "/views/layout.twig"),
assets,
$.filter(['**', '!**/layout.twig'], { restore: true }),
$.filter(["**", "!**/layout.twig"], { restore: true }),
$.if(esbuildConfig.include.length > 0, gulp.src(esbuildConfig.include)),
$.debug({
title: 'scripts debug pre filter exclusions: ',
title: "scripts debug pre filter exclusions: ",
showFiles: localConfig.gulp.debug,
}),
filterExclusions,
$.debug({ title: 'scripts debug: ', showFiles: localConfig.gulp.debug }), // to debug files getting proccessed
$.debug({ title: "scripts debug: ", showFiles: localConfig.gulp.debug }), // to debug files getting proccessed
gulpEsbuild({
outdir: '',
sourcemap: isProduction ? false : 'inline',
outdir: "",
sourcemap: isProduction ? false : "inline",
bundle: true,
loader: {
'.tsx': 'tsx',
'.jsx': 'jsx',
'.js': 'jsx',
".tsx": "tsx",
".jsx": "jsx",
".js": "jsx",
},
target: 'es2015',
target: "es2015",
plugins: [globalExternals(esbuildConfig.globals)],
}),
filterExclusions.restore,
$.rename(renameOptions),
$.debug({
title: 'scripts debug after restore and rename: ',
title: "scripts debug after restore and rename: ",
showFiles: localConfig.gulp.debug,
}),
gulp.dest(config.output, {}),
Expand All @@ -213,15 +213,15 @@ const scripts = (done) => {

// When scripts runs, it creates extra files in copying from vendor we can delete
const cleanScripts = (done) => {
deleteSync([config.output + '/wp-content']);
deleteSync([config.output + "/wp-content"]);
done();
};

// copy unmodified files
const copy = (done) => {
pump(
[
gulp.src(config.assets + '/{img,fonts,js}/**/*', {
gulp.src(config.assets + "/{img,fonts,js}/**/*", {
base: config.assets,
}),
$.newer(config.output),
Expand All @@ -234,24 +234,27 @@ const copy = (done) => {
// loops through the generated html and replaces all references to static versions
const rev = (done) => {
let extensions = [
'.html',
'.css',
'.js',
'.png',
'.jpg',
'.jpeg',
'.gif',
'.svg',
'.woff',
'.woff2',
'.ttf',
'.eot',
'.otf',
".html",
".css",
".js",
".png",
".jpg",
".jpeg",
".gif",
".svg",
".woff",
".woff2",
".ttf",
".eot",
".otf",
];
pump(
[
gulp.src(config.dist + '/{css,js,fonts,img}/**/*'),
revAll.revision({ dontSearchFile: ['.js'], includeFilesInManifest: extensions }),
gulp.src(config.dist + "/{css,js,fonts,img}/**/*"),
revAll.revision({
dontSearchFile: [".js"],
includeFilesInManifest: extensions,
}),
gulp.dest(config.static),
revAll.manifestFile(),
gulp.dest(config.static),
Expand Down Expand Up @@ -279,13 +282,13 @@ const serve = (done) => {
notify: localConfig.bs.notify || false,
open: localConfig.bs.open || true,
tunnel: localConfig.bs.tunnel || false,
logLevel: localConfig.bs.logLevel || 'info',
logLevel: localConfig.bs.logLevel || "info",
});

gulp.watch(config.theme + '/**/*.{twig,php}', gulp.series(reload));
gulp.watch(config.assets + '/scss/**/*.scss', styles);
gulp.watch(config.assets + '/js/**/*.js', gulp.series(scripts, copy, reload));
gulp.watch(config.assets + '/{img,fonts}/**', gulp.series(copy, reload));
gulp.watch(config.theme + "/**/*.{twig,php}", gulp.series(reload));
gulp.watch(config.assets + "/scss/**/*.scss", styles);
gulp.watch(config.assets + "/js/**/*.js", gulp.series(scripts, copy, reload));
gulp.watch(config.assets + "/{img,fonts}/**", gulp.series(copy, reload));

done();
};
Expand All @@ -304,6 +307,7 @@ export const release = (done) => {
};

const compile = gulp.series(clean, styles, scripts, copy, cleanScripts, rev);
export const restart = gulp.series(clean, styles, scripts, copy, reload);
export const defaultTasks = gulp.series(clean, styles, scripts, copy, serve);

export default defaultTasks;

0 comments on commit ad87990

Please sign in to comment.