Created
April 4, 2022 13:17
-
-
Save tankbar/ea02061aac3641098b290129f716ff85 to your computer and use it in GitHub Desktop.
Example gulpfile.js for WordPress theme writing to static folder
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const { src, dest, parallel, series, watch } = require('gulp'); | |
const concat = require('gulp-concat'); | |
const sass = require('gulp-sass')(require('sass')); | |
const cleanCSS = require('gulp-clean-css'); | |
const uglify = require('gulp-uglify-es').default; | |
const sourcemaps = require('gulp-sourcemaps'); | |
const livereload = require('gulp-livereload'); | |
const postcss = require("gulp-postcss"); | |
const autoprefixer = require("autoprefixer"); | |
const cssnano = require("cssnano"); | |
const rename = require('gulp-rename'); | |
const imagemin = require('gulp-imagemin'); | |
const babel = require('gulp-babel'); | |
const bourbon = require("node-bourbon").includePaths; | |
const notifier = require('node-notifier'); | |
const stripAnsi = require('strip-ansi'); | |
const beep = require('beepbeep'); | |
const fs = require('fs'); | |
const project = JSON.parse(fs.readFileSync('./package.json').toString()); | |
const paths = { | |
css: { | |
main: { | |
files: { | |
glob: 'assets/scss/**/*.scss', | |
main: 'assets/scss/main.scss', | |
}, | |
dist: 'static/' | |
}, | |
editor: { | |
files: { | |
glob: 'assets/scss/**/*.scss', | |
main: 'assets/scss/editor.scss', | |
}, | |
dist: 'static/' | |
}, | |
admin: { | |
files: { | |
glob: 'assets/scss/**/*.scss', | |
main: 'assets/scss/admin.scss', | |
}, | |
dist: 'static/admin/' | |
} | |
}, | |
js: { | |
global: { | |
files: 'assets/js/global/**/*.js', | |
dist: 'static/', | |
}, | |
vendor: { | |
files: 'assets/js/vendor/**/*.js', | |
dist: 'static/' | |
}, | |
admin: { | |
files: 'assets/js/admin/**/*.js', | |
dist: 'static/admin/' | |
}, | |
standalone: { | |
files: 'assets/js/*.js', | |
dist: 'static/' | |
} | |
}, | |
images: { | |
files: 'assets/images/**/*', | |
dist: 'static/images/' | |
}, | |
fonts: { | |
files: 'assets/fonts/**/*', | |
dist: 'static/fonts' | |
} | |
}; | |
function getShortSassError(message) { | |
const parts = message.split("\n"); | |
return parts[0]; | |
} | |
const handleSassError = build => { | |
return function(err) { | |
console.log(err.formatted); | |
if (!build) { | |
beep(); | |
notifier.notify({ | |
title: project.name, | |
message: `${getShortSassError(stripAnsi(err.formatted))} in ${err.relativePath}`, | |
}); | |
this.emit('end'); | |
} else { | |
process.exit(1) | |
} | |
}; | |
}; | |
const _css = { | |
css(build = false) { | |
return function css() { | |
let stream = src(paths.css.main.files.main) | |
.pipe(sourcemaps.init()) | |
.pipe(sass({ | |
includePaths: bourbon | |
}).on('error', handleSassError( build ))) | |
.pipe(concat('main.css')) | |
.pipe(dest(paths.css.main.dist)) | |
.pipe(postcss([autoprefixer(), cssnano()])) | |
.pipe(cleanCSS()) | |
.pipe(rename({ | |
suffix: '.min' | |
})) | |
.pipe(sourcemaps.write('./')) | |
.pipe(dest(paths.css.main.dist)); | |
if(!build) { | |
stream = stream.pipe(livereload()); | |
} | |
return stream; | |
} | |
}, | |
editor(build = false) { | |
return function editor() { | |
let stream = src(paths.css.editor.files.main) | |
.pipe(sourcemaps.init()) | |
.pipe(sass({ | |
includePaths: bourbon | |
}).on('error', handleSassError( build ))) | |
.pipe(concat('editor.css')) | |
.pipe(dest(paths.css.editor.dist)) | |
.pipe(postcss([autoprefixer(), cssnano()])) | |
.pipe(cleanCSS()) | |
.pipe(rename({ | |
suffix: '.min' | |
})) | |
.pipe(sourcemaps.write('./')) | |
.pipe(dest(paths.css.editor.dist)); | |
if(!build) { | |
stream = stream.pipe(livereload()); | |
} | |
return stream; | |
} | |
}, | |
admin(build = false) { | |
return function admin() { | |
let stream = src(paths.css.admin.files.main) | |
.pipe(sourcemaps.init()) | |
.pipe(sass({ | |
includePaths: bourbon | |
}).on('error', handleSassError( build ))) | |
.pipe(concat('main.css')) | |
.pipe(dest(paths.css.admin.dist)) | |
.pipe(postcss([autoprefixer(), cssnano()])) | |
.pipe(cleanCSS()) | |
.pipe(rename({ | |
suffix: '.min' | |
})) | |
.pipe(sourcemaps.write('./')) | |
.pipe(dest(paths.css.admin.dist)); | |
if(!build) { | |
stream = stream.pipe(livereload()); | |
} | |
return stream; | |
} | |
} | |
} | |
const _js = { | |
global(build = false) { | |
return function global() { | |
let stream = src(paths.js.global.files) | |
.pipe(sourcemaps.init()) | |
.pipe(babel()) | |
.pipe(concat('global.js')) | |
.pipe(dest(paths.js.global.dist)) | |
.pipe(uglify()) | |
.pipe(rename({ | |
suffix: '.min', | |
})) | |
.pipe(sourcemaps.write('./')) | |
.pipe(dest(paths.js.global.dist)); | |
if(!build) { | |
stream = stream.pipe(livereload()); | |
} | |
return stream; | |
} | |
}, | |
vendor(build = false) { | |
return function vendor() { | |
let stream = src(paths.js.vendor.files) | |
.pipe(sourcemaps.init()) | |
.pipe(concat('vendor.js')) | |
.pipe(sourcemaps.write('./')) | |
.pipe(dest(paths.js.vendor.dist)); | |
if(!build) { | |
stream = stream.pipe(livereload()); | |
} | |
return stream; | |
} | |
}, | |
admin(build = false) { | |
return function admin() { | |
let stream = src(paths.js.admin.files) | |
.pipe(sourcemaps.init()) | |
.pipe(babel()) | |
.pipe(dest(paths.js.admin.dist)) | |
.pipe(uglify()) | |
.pipe(rename({ | |
suffix: '.min', | |
})) | |
.pipe(sourcemaps.write('./')) | |
.pipe(dest(paths.js.admin.dist)); | |
if(!build) { | |
stream = stream.pipe(livereload()); | |
} | |
return stream; | |
} | |
}, | |
standalone(build = false) { | |
return function admin() { | |
let stream = src(paths.js.standalone.files) | |
.pipe(sourcemaps.init()) | |
.pipe(babel()) | |
.pipe(dest(paths.js.standalone.dist)) | |
.pipe(uglify()) | |
.pipe(rename({ | |
suffix: '.min' | |
})) | |
.pipe(sourcemaps.write('./')) | |
.pipe(dest(paths.js.standalone.dist)); | |
if (!build) { | |
stream = stream.pipe(livereload()); | |
} | |
return stream; | |
} | |
} | |
}; | |
function _images() { | |
return function images() { | |
return src(paths.images.files) | |
.pipe(imagemin()) | |
.pipe(dest(paths.images.dist)); | |
} | |
} | |
function _fonts() { | |
return function fonts() { | |
return src(paths.fonts.files) | |
.pipe(dest(paths.fonts.dist)); | |
} | |
} | |
function watchFiles() { | |
watch(paths.css.main.files.glob, _css.css(false)); | |
watch(paths.css.editor.files.glob, _css.editor(false)); | |
watch(paths.css.admin.files.glob, _css.admin(false)); | |
watch(paths.js.global.files, _js.global(false)); | |
watch(paths.js.vendor.files, _js.vendor(false)) | |
watch(paths.js.admin.files, _js.admin(false)); | |
watch(paths.js.standalone.files, _js.standalone(false)); | |
watch(paths.images.files, _images()); | |
watch(paths.fonts.files, _fonts()); | |
} | |
function initLivereload(cb) { | |
livereload.listen(cb); | |
} | |
exports.default = parallel( | |
_css.css(false), | |
_css.editor(false), | |
_css.admin(false), | |
_js.global(false), | |
_js.vendor(false), | |
_js.admin(false), | |
_js.standalone(false), | |
_images(), | |
_fonts() | |
); | |
exports.build = parallel( | |
_css.css(true), | |
_css.editor(true), | |
_css.admin(true), | |
_js.global(true), | |
_js.vendor(true), | |
_js.admin(true), | |
_js.standalone(true), | |
_images(), | |
_fonts() | |
); | |
exports.css = _css.css(false); | |
exports.watch = series(exports.default, parallel(watchFiles, initLivereload)); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment