Last active
October 10, 2017 22:06
-
-
Save oquirozm/33279d54565bb023f4745370f4be01c4 to your computer and use it in GitHub Desktop.
Gulp setup for WordPress Theme Development
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
// Gulp.js configuration | |
'use strict'; | |
const | |
// source and build folders | |
gulp = require('gulp'), | |
gutil = require('gulp-util'), | |
sass = require('gulp-sass'), | |
postcss = require('gulp-postcss'), | |
deporder = require('gulp-deporder'), | |
concat = require('gulp-concat'), | |
uglify = require('gulp-uglify'), | |
babel = require('gulp-babel'), | |
plumber = require('gulp-plumber'), | |
notify = require('gulp-notify') | |
; | |
// Paths | |
const paths = { | |
dist : './dist' | |
} | |
// JavaScript settings | |
const js = { | |
src : 'js/**/*', | |
filename : 'scripts.js' | |
} | |
// CSS settings | |
var css = { | |
watch : 'sass/**/*.scss', | |
sassOpts : { | |
outputStyle : 'nested', | |
precision : 3, | |
errLogToConsole : true | |
}, | |
processors : [ | |
require('autoprefixer')({ | |
browsers: ['last 2 versions', '> 2%'] | |
}), | |
require('css-mqpacker'), | |
require('cssnano') | |
] | |
} | |
var syncOptions = { | |
proxy : 'therodgarband.dev', | |
open : false, | |
notify : true, | |
ghostMode : false, | |
ui: { | |
port: 3000 | |
} | |
}; | |
// Plumber + Notify setup | |
var plumberErrorHandler = { | |
errorHandler : notify.onError({ | |
title: 'Gulp', | |
message : 'Error: <%= error.message %>' | |
}) | |
}; | |
// Browser-sync | |
var browsersync = false; | |
const filesToWatch = ['./**/*.php', './**/*.twig']; | |
const filesToIgnore = ['!./vendor/*', '!./node_modules/*', '!./bower_components/*']; | |
// CSS processing | |
gulp.task('css', () => { | |
return gulp.src(css.watch) | |
.pipe(plumber(plumberErrorHandler)) | |
.pipe(sass(css.sassOpts)) | |
.pipe(postcss(css.processors)) | |
.pipe(gulp.dest(paths.dist)) | |
.pipe(browsersync ? browsersync.reload({ stream: true }) : gutil.noop() ); | |
}); | |
// JavaScript processing | |
gulp.task('js', () => { | |
return gulp.src(js.src) | |
.pipe(deporder()) | |
.pipe(babel({ | |
presets: ['es2015'] | |
})) | |
.pipe(concat(js.filename)) | |
//.pipe(stripdebug()) // activate if ready to deploy to production. | |
.pipe(uglify()) | |
.pipe(gulp.dest(paths.dist)) | |
.pipe(browsersync ? browsersync.reload({stream: true}) : gutil.noop() ); | |
}); | |
gulp.task('build', ['css', 'js']); | |
// Browsersync options | |
// the proxy and ui is set for vagrant scotchbox development', | |
gulp.task('browsersync', () => { | |
if (browsersync === false) { | |
browsersync = require('browser-sync').create(); | |
browsersync.init(syncOptions); | |
} | |
}); | |
gulp.task('watch', ['browsersync'], () => { | |
// page changes | |
gulp.watch(filesToWatch.concat(filesToIgnore), browsersync ? browsersync.reload : {}); | |
// css changes | |
gulp.watch(css.watch, ['css']); | |
// javascript changes | |
gulp.watch(js.src, ['js']); | |
}); | |
gulp.task('default', ['build', 'watch']); |
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
{ | |
"name": "", | |
"version": "0.1.0", | |
"main": "gulpfile.js", | |
"author": "YOUR NAME HERE", | |
"devDependencies": { | |
"autoprefixer": "^7.1.5", | |
"babel-core": "^6.26.0", | |
"browser-sync": "^2.18.13", | |
"css-mqpacker": "^6.0.1", | |
"cssnano": "^3.10.0", | |
"gulp": "^3.9.1", | |
"gulp-babel": "^7.0.0", | |
"gulp-concat": "^2.6.1", | |
"gulp-deporder": "^1.1.0", | |
"gulp-notify": "^3.0.0", | |
"gulp-plumber": "^1.1.0", | |
"gulp-postcss": "^7.0.0", | |
"gulp-sass": "^3.1.0", | |
"gulp-sourcemaps": "^2.6.1", | |
"gulp-uglify": "^3.0.0", | |
"gulp-util": "^3.0.8" | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment