Skip to content

Instantly share code, notes, and snippets.

@deodat

deodat/gulpfile.babel.js

Last active October 13, 2019 19:32
Show Gist options
  • Save deodat/5eea835b508c6ceb6b8a0f5000e51b6c to your computer and use it in GitHub Desktop.
Save deodat/5eea835b508c6ceb6b8a0f5000e51b6c to your computer and use it in GitHub Desktop.
Download ZIP
Gulp config for WordPresse themes
Raw
gulpfile.babel.js
// ref https://css-tricks.com/gulp-for-wordpress-initial-setup/
// ref https://css-tricks.com/gulp-for-wordpress-creating-the-tasks/
import { src, dest, watch, series, parallel } from 'gulp';
import yargs from 'yargs';
import sass from 'gulp-sass';
import cleanCss from 'gulp-clean-css';
import gulpif from 'gulp-if';
import postcss from 'gulp-postcss';
import sourcemaps from 'gulp-sourcemaps';
import autoprefixer from 'autoprefixer';
import imagemin from 'gulp-imagemin';
import concat from 'gulp-concat';
import rename from 'gulp-rename';
import uglify from 'gulp-uglify';
import svgmin from 'gulp-svgmin';
import svgstores from 'gulp-svgstore';
import del from 'del';
import named from 'vinyl-named';
import browserSync from "browser-sync";
import zip from "gulp-zip";
import path from "path";
import info from "./package.json";
import replace from "gulp-replace";
import wpPot from "gulp-wp-pot";
const PRODUCTION = yargs.argv.prod;
const server = browserSync.create();
// js file paths
const utilJsPath = 'src/js/scripts/'; // util.js path - you may need to update this if including the framework as external node module
const componentsJsPath = 'src/js/components/*.js'; // component js files
const vendorsPath = 'src/js/vendors/*.js';
const scriptsJsPath = 'dist/js'; //folder for final scripts.js/scripts.min.js files
export const serve = done => {
server.init({
proxy: "https://blueprint-30082019.stash"
});
done();
};
export const reload = done => {
server.reload();
done();
};
export const clean = () => del(['dist']);
export const styles = () => {
return src(['src/scss/bundle.scss', 'src/scss/admin.scss'])
.pipe(gulpif(!PRODUCTION, sourcemaps.init()))
.pipe(sass().on('error', sass.logError))
.pipe(gulpif(PRODUCTION, postcss([ autoprefixer ])))
.pipe(gulpif(PRODUCTION, cleanCss({compatibility:'ie8'})))
.pipe(gulpif(!PRODUCTION, sourcemaps.write()))
.pipe(dest('dist/css'))
.pipe(server.stream());
}
export const images = () => {
return src('src/images/**/*.{jpg,jpeg,png,svg,gif}')
.pipe(gulpif(PRODUCTION, imagemin()))
.pipe(dest('dist/images'));
}
export const copy = () => {
return src(['src/**/*','!src/{images,js,scss}','!src/{images,js,scss}/**/*'])
.pipe(dest('dist'));
}
// JS concat and minify
export const scripts = () => {
return src([utilJsPath+'/util.js', componentsJsPath, vendorsPath, utilJsPath+'script.js'])
.pipe(concat('scripts.js'))
.pipe(dest(scriptsJsPath))
.pipe(browserSync.reload({
stream: true
}))
.pipe(rename('scripts.min.js'))
.pipe(gulpif(PRODUCTION, uglify()))
.pipe(dest(scriptsJsPath))
.pipe(browserSync.reload({
stream: true
}));
}
export const svgstore = () => {
return src('icons/*.svg')
.pipe(svgmin(function (file) {
var prefix = path.basename(file.relative, path.extname(file.relative));
return {
plugins: [{
cleanupIDs: {
prefix: prefix + '-',
minify: true
}
}]
}
}))
.pipe(rename({prefix: 'icon-'}))
.pipe(svgstores({
inlineSvg: true
}))
.pipe(dest("dist/css/svg"));
}
export const compress = () => {
return src([
"**/*",
"!node_modules{,/**}",
"!bundled{,/**}",
"!src{,/**}",
"!.babelrc",
"!.gitignore",
"!gulpfile.babel.js",
"!package.json",
"!package-lock.json",
])
.pipe(
gulpif(
file => file.relative.split(".").pop() !== "zip",
replace("_stashhouse", info.name)
)
)
.pipe(zip(`${info.name}.zip`))
.pipe(dest('bundled'));
};
export const pot = () => {
return src("**/*.php")
.pipe(
wpPot({
domain: "_stashhouse",
package: info.name
})
)
.pipe(dest(`languages/${info.name}.pot`));
};
export const watchForChanges = () => {
watch('src/scss/**/*.scss', styles);
watch('icons/*.svg', series(svgstore));
watch('src/images/**/*.{jpg,jpeg,png,svg,gif}', series(images, reload));
watch(['src/**/*','!src/{images,js,scss}','!src/{images,js,scss}/**/*'], series(copy, reload));
watch('src/js/**/*.js', series(scripts, reload));
watch("**/*.php", reload);
}
export const dev = series(clean, parallel(styles, svgstore, images, copy, scripts), serve, watchForChanges);
export const build = series(clean, parallel(styles, svgstore, images, copy, scripts), pot, compress);
export default dev;
Raw
package.json
{
"name": "_stashouse",
"version": "1.0.0",
"description": "Site web blueprint",
"main": "gulpfile.js",
"scripts": {
"start": "gulp",
"build": "gulp build --prod"
},
"author": "DGou",
"license": "ISC",
"dependencies": {
"codyhouse-framework": "^2.1.4",
"swiper": "^5.0.4"
},
"devDependencies": {
"@babel/core": "^7.6.4",
"@babel/preset-env": "^7.6.3",
"@babel/register": "^7.6.2",
"autoprefixer": "^9.6.4",
"babel-loader": "^8.0.6",
"browser-sync": "^2.26.7",
"del": "^5.1.0",
"gulp": "^4.0.2",
"gulp-clean-css": "^4.2.0",
"gulp-concat": "^2.6.1",
"gulp-if": "^3.0.0",
"gulp-imagemin": "^6.1.1",
"gulp-plumber": "^1.1.0",
"gulp-postcss": "^8.0.0",
"gulp-rename": "^1.4.0",
"gulp-replace": "^1.0.0",
"gulp-sass": "^4.0.2",
"gulp-sourcemaps": "^2.6.5",
"gulp-svgmin": "^2.2.0",
"gulp-svgstore": "^7.0.1",
"gulp-uglify": "^3.0.2",
"gulp-wp-pot": "^2.3.5",
"gulp-zip": "^5.0.1",
"path": "^0.12.7",
"vinyl-named": "^1.1.0",
"yargs": "^14.2.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment