Skip to content

Instantly share code, notes, and snippets.

@jcklpe
Forked from zachattack/wp-gulp.js
Created November 13, 2018 19:45
Show Gist options
  • Save jcklpe/c72d332fd49ed023815bfc58c5ab53ba to your computer and use it in GitHub Desktop.
Save jcklpe/c72d332fd49ed023815bfc58c5ab53ba to your computer and use it in GitHub Desktop.
Simple Gulp Config for Word Press Dev
// Gulp.js configuration
'use strict';
const
// source and build folders
dir = {
src : './static/',
lib : './static/lib/',
build : './assets/'
},
// Gulp and plugins
gulp = require('gulp'),
gutil = require('gulp-util'),
newer = require('gulp-newer'),
imagemin = require('gulp-imagemin'),
sass = require('gulp-sass'),
postcss = require('gulp-postcss'),
deporder = require('gulp-deporder'),
concat = require('gulp-concat'),
stripdebug = require('gulp-strip-debug'),
uglify = require('gulp-uglify')
;
// Browser-sync
var browsersync = false;
// Browsersync options
const syncOpts = {
proxy : 'texas-news.test',
files : dir.build + '**/*',
open : false,
notify : false,
ghostMode : false,
ui: {
port: 8001
}
};
// browser-sync
gulp.task('browsersync', () => {
if (browsersync === false) {
browsersync = require('browser-sync').create();
browsersync.init(syncOpts);
}
});
// PHP settings
const php = {
src : dir.src + 'templates/**/*.php',
build : dir.build
};
// copy PHP files
gulp.task('php', () => {
return gulp.src(php.src)
.pipe(newer(php.build))
.pipe(gulp.dest(php.build));
});
// font settings
const fonts = {
src : dir.src + 'fonts/**/*.*',
build : dir.build + 'fonts/'
};
// copy font files
gulp.task('fonts', () => {
return gulp.src(fonts.src)
.pipe(newer(fonts.build))
.pipe(gulp.dest(fonts.build));
});
// JS Library settings
const jslib = {
src : dir.src + 'lib/js/**/*.js',
build : dir.build + 'lib/js/',
filename : 'js-libs.min.js'
};
// copy JS Library files
gulp.task('jslib', () => {
return gulp.src(jslib.src)
.pipe(newer(jslib.build))
.pipe(deporder())
.pipe(stripdebug())
.pipe(uglify())
.pipe(concat(jslib.filename))
.pipe(gulp.dest(jslib.build));
});
// CSS Library settings
const csslib = {
src : dir.src + 'lib/css/**/*',
build : dir.build + 'lib/css/',
processors: [
require('cssnano')
]
};
// copy CSS Library files
//.pipe(postcss(csslib.processors))
gulp.task('csslib', () => {
return gulp.src(csslib.src)
.pipe(newer(csslib.build))
.pipe(gulp.dest(csslib.build));
});
// CSS Admin Settings
const cssadmin = {
src : dir.src + 'admin/*',
build : dir.build + 'css/admin/',
processors: [
require('autoprefixer')({
browsers: ['last 2 versions', '> 2%']
}),
require('cssnano')
]
};
// copy CSS ADMIN files
//.pipe(postcss(csslib.processors))
gulp.task('cssadmin', () => {
return gulp.src(cssadmin.src)
.pipe(sass({outputStyle: 'compressed'}))
.pipe(postcss(cssadmin.processors))
.pipe(newer(cssadmin.build))
.pipe(gulp.dest(cssadmin.build))
});
// image settings
const images = {
src : dir.src + 'images/**/*',
build : dir.build + 'images/'
};
// image processing
gulp.task('images', () => {
return gulp.src(images.src)
.pipe(newer(images.build))
.pipe(imagemin())
.pipe(gulp.dest(images.build));
});
// // bootstrap library build settings
// const bootstrap = {
// src : dir.lib + 'bootstrap/scss/bootstrap.scss',
// watch : dir.lib + 'bootstrap/scss/**/*',
// build : dir.build + 'lib/bootstrap/',
// processors: [
// require('autoprefixer')({
// browsers: ['last 2 versions', '> 2%']
// }),
// require('postcss-flexbugs-fixes'),
// require('cssnano')
// ]
// };
// // create the bootstrap task set
// gulp.task('bootstrap', () => {
// return gulp.src(bootstrap.src)
// .pipe(sass())
// .pipe(postcss(bootstrap.processors))
// .pipe(gulp.dest(bootstrap.build))
// });
// CSS settings
var css = {
src : dir.src + 'sass/newstyles.sass',
watch : dir.src + 'sass/**/*',
build : dir.build + 'css/',
sassOpts: {
outputStyle : 'nested',
imagePath : images.build,
precision : 3,
errLogToConsole : true
},
processors: [
require('postcss-assets')({
loadPaths: ['images/'],
basePath: dir.build,
baseUrl: '/wp-content/themes/texas-timber-theme/'
}),
require('autoprefixer')({
browsers: ['last 2 versions', '> 2%']
}),
require('css-mqpacker'),
require('cssnano')
]
};
// CSS processing
gulp.task('css', ['images'], () => {
return gulp.src(css.src)
.pipe(sass(css.sassOpts))
.pipe(postcss(css.processors))
.pipe(gulp.dest(css.build))
.pipe(browsersync ? browsersync.reload({ stream: true }) : gutil.noop());
});
// JavaScript settings
const js = {
src : dir.src + 'js/**.js',
build : dir.build + 'js/',
filename : 'scripts.js'
};
// JavaScript processing
gulp.task('js', () => {
return gulp.src(js.src)
.pipe(deporder())// .pipe(stripdebug()).pipe(uglify())
.pipe(concat(js.filename))
.pipe(gulp.dest(js.build))
.pipe(browsersync ? browsersync.reload({ stream: true }) : gutil.noop());
});
// run all tasks
//gulp.task('build', ['php', 'jslib', 'csslib', 'bootstrap', 'css', 'js', 'fonts']);
gulp.task('build', ['css', 'cssadmin', 'jslib', 'js', 'fonts']);
// watch for file changes
gulp.task('watch', ['browsersync'], () => {
// PHP main changes
//gulp.watch(php.src, ['php'], browsersync ? browsersync.reload : {});
// image changes
// gulp.watch(images.src, ['images']);
// CSS changes in BOOTSTRAP
// gulp.watch(bootstrap.watch, ['bootstrap']);
// CSS changes
gulp.watch(css.watch, ['css'], browsersync ? browsersync.reload : {});
// font changes
gulp.watch(fonts.src, ['fonts']);
// JavaScript Library changes
gulp.watch(jslib.src, ['jslib']);
// CSS Library changes
// gulp.watch(jslib.src, ['csslib']);
// CSS Admin changes
gulp.watch(cssadmin.src, ['cssadmin']);
// JavaScript main changes
gulp.watch(js.src, ['js']);
});
// default task
gulp.task('default', ['build', 'watch']);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment