kaniosrn-j
3/10/2017 - 10:51 PM
WordPress - Gulp
WordPress - Gulp
"use strict"
// Project configuration
// Project configuration
var project = 'mrtandcoffee', // Project name, used for build zip.
url = 'http://joeboo.dev.com/mrtandcoffe_wordpress/', // Local Development URL for BrowserSync. Change as-needed.
bower = './bower_components/', // Not truly using this yet, more or less playing right now. TO-DO Place in Dev branch
build = './buildtheme/', // Files that you want to package into a zip go here
buildInclude = [
// include common file types
'**/*.php',
'**/*.html',
'**/*.css',
'**/*.js',
'**/*.svg',
'**/*.ttf',
'**/*.otf',
'**/*.eot',
'**/*.woff',
'**/*.woff2',
// include specific files and folders
'screenshot.png',
// exclude files and folders
'!node_modules/**/*',
'!assets/bower_components/**/*',
'!style.css.map',
'!assets/js/custom/*',
'!assets/css/partials/*'
];
var gulp = require('gulp'),
browserSync = require('browser-sync'),
reload = browserSync.reload,
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-uglifycss'),
filter = require('gulp-filter'),
source = require('vinyl-source-stream'),
streamify = require('gulp-streamify'),
uglify = require('gulp-uglify'),
buffer = require('vinyl-buffer'),
notify = require('gulp-notify'),
rename = require('gulp-rename'),
imagemin = require('gulp-imagemin'),
newer = require('gulp-newer'),
cmq = require('gulp-combine-media-queries'),
runSequence = require('gulp-run-sequence'),
sass = require('gulp-sass'),
plugins = require('gulp-load-plugins')({ camelize: true }),
ignore = require('gulp-ignore'), // Helps with ignoring files and directories in our run tasks
rimraf = require('gulp-rimraf'), // Helps with removing files and directories in our run tasks
zip = require('gulp-zip'), // Using to zip up our packaged theme into a tasty zip file that can be installed in WordPress!
plumber = require('gulp-plumber'), // Helps prevent stream crashing on errors
cache = require('gulp-cache'),
sourcemaps = require('gulp-sourcemaps'),
concat = require('gulp-concat'),
browserify = require('browserify'),
strip = require('gulp-strip-comments'),
watch = require('gulp-watch');
//browserify = require('gulp-browserify'),
//browserify = require('browserify'),
gulp.task('browser-sync', function() {
var files = [
'**/*.php',
'**/*.{png,jpg,gif}'
];
browserSync.init(files, {
// Read here http://www.browsersync.io/docs/options/
proxy: url,
// port: 8080,
// Tunnel the Browsersync server through a random Public URL
// tunnel: true,
// Attempt to use the URL "http://my-private-site.localtunnel.me"
// tunnel: "ppress",
// Inject CSS changes
//injectChanges: true
});
});
/* Styles - Compile SCSS/SASS to css
/* Sass output styles: https://web-design-weekly.com/2014/06/15/different-sass-output-styles/
============================================================================================ */
gulp.task('styles', function () {
return gulp.src('./assets/css/*.scss')
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(sass({
errLogToConsole: false,
//outputStyle: 'compressed',
outputStyle: 'compact',
//outputStyle: 'nested',
// outputStyle: 'expanded',
precision: 10
}))
.pipe(sourcemaps.write({includeContent: false}))
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(autoprefixer('last 2 version', '> 1%', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(sourcemaps.write('.'))
.pipe(plumber.stop())
.pipe(gulp.dest('./'))
.pipe(filter('./*.css')) // Filtering stream to only css files
.pipe(cmq()) // Combines Media Queries
.pipe(reload({stream:true})) // Inject Styles when style file is created
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss({
maxLineLen: 80
}))
.pipe(strip())
.pipe(gulp.dest('./'))
.pipe(reload({stream:true})) // Inject Styles when min style file is created
.pipe(notify({ message: 'Styles task complete', onLast: true }))
});
gulp.task('browserifyVendorsJs', function() {
return browserify('./assets/js/vendor/vendor.js')
.bundle()
//Pass desired output filename to vinyl-source-stream
.pipe(source('vendors.min.js'))
.pipe(streamify(uglify()))
// Start piping stream to tasks!
.pipe(gulp.dest('./assets/js'))
.pipe(notify({ message: 'Vendor scripts task complete', onLast: true }));
});
gulp.task('browserifyscriptsJs', function() {
return browserify('./assets/js/custom/custom.js')
.bundle()
//Pass desired output filename to vinyl-source-stream
.pipe(source('custom.min.js'))
.pipe(streamify(uglify()))
// Start piping stream to tasks!
.pipe(gulp.dest('./assets/js'))
.pipe(notify({ message: 'Custom scripts task complete', onLast: true }));
});
gulp.task('images', function() {
// Add the newer pipe to pass through newer images only
return gulp.src(['./assets/img/raw/**/*.{png,jpg,gif}'])
.pipe(newer('./assets/img/'))
.pipe(rimraf({ force: true }))
.pipe(imagemin({ optimizationLevel: 7, progressive: true, interlaced: true }))
.pipe(gulp.dest('./assets/img/'))
.pipe( notify( { message: 'Images task complete', onLast: true } ) );
});
/**
* Clean gulp cache
*/
gulp.task('clear', function () {
cache.clearAll();
});
/**
* Clean tasks for zip
*
*/
gulp.task('cleanup', function() {
return gulp.src(['./assets/bower_components', '**/.sass-cache','**/.DS_Store'], { read: false }) // much faster
.pipe(ignore('node_modules/**')) //Example of a directory to ignore
.pipe(rimraf({ force: true }))
.pipe(notify({ message: 'Clean task complete', onLast: true }));
});
gulp.task('cleanupFinal', function() {
return gulp.src(['./assets/bower_components', '**/.sass-cache','**/.DS_Store'], { read: false }) // much faster
.pipe(ignore('node_modules/**')) //Example of a directory to ignore
.pipe(rimraf({ force: true }))
.pipe(notify({ message: 'Clean task complete', onLast: true }));
});
gulp.task('buildFiles', function() {
return gulp.src(buildInclude)
.pipe(gulp.dest(build))
.pipe(notify({ message: 'Copy from buildFiles complete', onLast: true }));
});
/**
* Images
*
* Look at src/images, optimize the images and send them to the appropriate place
*/
gulp.task('buildImages', function() {
return gulp.src(['assets/img/**/*', '!assets/images/raw/**'])
.pipe(gulp.dest(build+'assets/img/'))
.pipe(plugins.notify({ message: 'Images copied to buildTheme folder', onLast: true }));
});
/**
* Zipping build directory for distribution
*
* Taking the build folder, which has been cleaned, containing optimized files and zipping it up to send out as an installable theme
*/
gulp.task('buildZip', function () {
// return gulp.src([build+'/**/', './.jshintrc','./.bowerrc','./.gitignore' ])
return gulp.src(build+'/**/')
.pipe(zip(project+'.zip'))
.pipe(gulp.dest('./'))
.pipe(notify({ message: 'Zip task complete', onLast: true }));
});
// ==== TASKS ==== //
/**
* Gulp Default Task
*
* Compiles styles, fires-up browser sync, watches js and php files. Note browser sync task watches php files
*
*/
// Package Distributable Theme
gulp.task('build', function(callback) {
runSequence('styles',
'cleanup',
'browserifyVendorsJs',
'browserifyscriptsJs',
'buildFiles',
'buildImages',
'buildZip',
'cleanupFinal',
callback);
});
// Watch Task
// gulp.task('default', ['styles'], function () {
// // gulp.watch('.assets/img/raw/**/*', ['images']);
// gulp.watch('./assets/css/**/*.scss', ['styles', browserSync.reload]);
// // gulp.watch('./assets/js/**/*.js', ['browserifyscriptsJs', browserSync.reload]);
//
// });
//
// gulp.task('default', ['styles'], function () {
// gulp.watch('./assets/css/**/*.scss', ['styles']);
// });
gulp.task('default', ['styles','browser-sync','browserifyscriptsJs','browserifyVendorsJs'], function () {
gulp.watch('./assets/img/raw/**/*', ['images']);
gulp.watch('./assets/css/**/*.scss', ['styles', browserSync.reload]);
// gulp.watch('./assets/js/**/*.js', ['browserifyscriptsJs', browserSync.reload]);
gulp.watch('./assets/js/**/*.js', ['browserifyVendorsJs', browserSync.reload]);
});