|
'use strict'; |
|
const |
|
|
|
/* * * * * * * * * |
|
* REQUIRES |
|
* * * * * * * * */ |
|
|
|
// Require npm modules |
|
babelify = require('babelify'), |
|
browserify = require('browserify'), |
|
browserSync = require('browser-sync'), |
|
buffer = require('vinyl-buffer'), |
|
console = require('better-console'), |
|
del = require('del'), |
|
mergeStream = require('merge-stream'), |
|
runSequence = require('run-sequence'), |
|
source = require('vinyl-source-stream'), |
|
tsify = require('tsify'), |
|
watchify = require('watchify'), |
|
|
|
{ src, dest, watch, series, parallel } = require('gulp'), |
|
autoprefixer = require('gulp-autoprefixer'), |
|
changed = require('gulp-changed'), |
|
cleanCSS = require('gulp-clean-css'), |
|
concatCSS = require('gulp-concat-css'), |
|
debug = require('gulp-debug'), |
|
dedupe = require('gulp-dedupe'), |
|
extReplace = require('gulp-ext-replace'), |
|
filter = require('gulp-filter'), |
|
flatten = require('gulp-flatten'), |
|
imagemin = require('gulp-imagemin'), |
|
less = require('gulp-less'), |
|
log = require('gulplog'), |
|
plumber = require('gulp-plumber'), |
|
rename = require('gulp-rename'), |
|
replace = require('gulp-replace'), |
|
scss = require('gulp-scss'), |
|
|
|
/******************************************************************************/ |
|
|
|
/* * * * * * * * * |
|
* TASK VARS |
|
* * * * * * * * */ |
|
|
|
// restorable filetype filters |
|
filters = { |
|
less: filter('**/*.less', {restore: true}), |
|
scss: filter('**/*.scss', {restore: true}), |
|
ts: filter('**/*.ts', {restore: true}) |
|
}, |
|
|
|
// browser-sync proxy url |
|
bsProxy = 'http://stellaproductions.zodiac/wp', |
|
|
|
// src & dest paths |
|
srcPath = './src/', |
|
distPath = './dist/', |
|
paths = { |
|
src: { |
|
fonts: srcPath+'fonts/**/*', |
|
images: srcPath+'img/**/*', |
|
scripts: srcPath+'scripts/', |
|
styles: srcPath+'styles/', |
|
themes: srcPath+'semantic/src/themes/**/*' |
|
}, |
|
dist: { |
|
clean: distPath+'**/*', |
|
css: distPath+'css/', |
|
fonts: distPath+'fonts/', |
|
images: distPath+'images/', |
|
js: distPath+'js/', |
|
themes: distPath+'themes/' |
|
} |
|
}, |
|
paths.src.css = paths.src.styles+'css/', |
|
paths.src.less = paths.src.styles+'less/main.less', |
|
paths.src.scss = paths.src.styles+'scss/main.scss', |
|
paths.src.ts = paths.src.scripts+'ts/main.ts', |
|
paths.watch = { |
|
build: ['./gulpfile.js', './package.json'], |
|
fonts: [paths.src.fonts], |
|
images: [paths.src.images], |
|
styles: [srcPath+'styles/**/*',srcPath+'semantic/**'] |
|
} |
|
|
|
// JS Browserify Bundler |
|
bundler = browserify({ |
|
cache: {}, |
|
packageCache: {}, |
|
entries: [paths.src.ts], |
|
debug: true, |
|
extensions: ['.ts'], |
|
fulPaths: true |
|
}).plugin(tsify, {target:'es6'}).transform(babelify) |
|
; |
|
|
|
/******************************************************************************/ |
|
|
|
/* * * * * * * * * |
|
* TASK FUNCTIONS |
|
* * * * * * * * */ |
|
|
|
function clean(cb) { |
|
console.log('cleaning destination folder'); |
|
return del(paths.dist.clean); |
|
cb(); |
|
} |
|
|
|
function fonts(cb) { |
|
console.log('building fonts'); |
|
return src(paths.src.fonts) |
|
.pipe(plumber()) |
|
.pipe(debug()) |
|
.pipe(flatten()) |
|
.pipe(dedupe()) |
|
.pipe(dest(paths.dist.fonts)) |
|
.pipe(browserSync.stream()) |
|
; |
|
cb(); |
|
} |
|
|
|
function images(cb) { |
|
console.log('building images'); |
|
return src(paths.src.images) |
|
.pipe(plumber()) |
|
.pipe(debug()) |
|
.pipe(flatten()) |
|
.pipe(dedupe()) |
|
.pipe(imagemin()) |
|
.pipe(dest(paths.dist.images)) |
|
.pipe(browserSync.stream()) |
|
; |
|
cb(); |
|
} |
|
|
|
function themes(cb) { |
|
console.log('moving semantic ui themes'); |
|
|
|
return src(paths.src.themes) |
|
.pipe(plumber()) |
|
.pipe(debug()) |
|
.pipe(dest(paths.dist.themes)) |
|
.pipe(browserSync.stream()) |
|
; |
|
cb(); |
|
} |
|
|
|
const assets = parallel(fonts, images, themes); |
|
|
|
function scripts(cb) { |
|
|
|
return bundler |
|
.bundle() |
|
.pipe(source('scripts.js')) |
|
.pipe(buffer()) |
|
.pipe(dest(paths.dist.js)) |
|
.pipe(browserSync.stream()) |
|
; |
|
cb(); |
|
} |
|
|
|
function lessStyles(cb) { |
|
console.log('building styles'); |
|
return src(paths.src.less) |
|
.pipe(plumber()) |
|
.pipe(debug()) |
|
.pipe(less()) |
|
.pipe(replace('../../themes/default/', '../themes/default/')) |
|
.pipe(rename('less.css')) |
|
.pipe(dest(paths.src.css)) |
|
; |
|
cb(); |
|
} |
|
|
|
function scssStyles(cb) { |
|
return src(path.src.scss) |
|
.pipe(plumber()) |
|
.pipe(debug()) |
|
.pipe(scss()) |
|
.pipe(rename('scss.css')) |
|
.pipe(dest(paths.src.css)) |
|
; |
|
cb(); |
|
} |
|
|
|
function cssStyles(cb) { |
|
return src(paths.src.css+'**/*.css') |
|
.pipe(plumber()) |
|
.pipe(debug()) |
|
.pipe(concat('styles.css')) |
|
.pipe(autoprefixer()) |
|
.pipe(dest(paths.dist.css)) |
|
.pipe(cleanCSS()) |
|
.pipe(extReplace('.min.css')) |
|
.pipe(dest(paths.dist.css)) |
|
.pipe(browserSync.stream()) |
|
} |
|
|
|
const styles = series( |
|
parallel(lessStyles,scssStyles), |
|
cssStyles |
|
); |
|
|
|
const build = parallel(assets, scripts, styles); |
|
|
|
const cleanBuild = series(clean, build); |
|
|
|
function watchJS() { |
|
let watcher = watchify(bundler); |
|
return watcher |
|
.on('error', log.error) |
|
.on('update', () => { |
|
watcher.bundle() |
|
.pipe(source('scripts.js')) |
|
.pipe(buffer()) |
|
.pipe(dest(paths.dist.js)) |
|
.pipe(browserSync.stream()); |
|
}) |
|
.bundle() |
|
.pipe(source('scripts.js')) |
|
.pipe(dest(paths.dist.js)) |
|
; |
|
} |
|
|
|
function watchSrc() { |
|
console.log('watching source files for changes') |
|
browserSync.init({ |
|
files: ['*'], |
|
proxy: bsProxy, |
|
snippetOptions: { |
|
whitelist: ['/wp-admin/admin-ajax.php'], |
|
blacklist: ['/wp-admin/**'] |
|
} |
|
}); |
|
watch(paths.watch.fonts , fonts); |
|
watch(paths.watch.images, images); |
|
watch(paths.watch.styles, styles); |
|
watch(paths.watch.build , build); |
|
} |
|
|
|
const wacthAll = parallel(watchJS,watchSrc); |
|
|
|
const defTask = series(clean, build, watchAll); |
|
|
|
exports.clean = clean; |
|
exports.fonts = fonts; |
|
exports.images = images; |
|
exports.themes = themes; |
|
exports.assets = assets; |
|
exports.scripts = scripts; |
|
exports.styles = styles; |
|
exports.build = build; |
|
exports.cbuild = cleanBuild; |
|
exports.watch = watchAll; |
|
exports.default = defTask; |
