Skip to content

Commit

Permalink
Merge pull request #3 from teambailey/Gulp4-migration
Browse files Browse the repository at this point in the history 
Gulp4 migration
  • Loading branch information
@teambailey
teambailey authored Feb 2, 2020
2 parents c808c1b + b1f98d3 commit 76d19cb
Show file tree
Hide file tree
Showing 4 changed files with 9,944 additions and 136 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
.idea
.DS_Store
*.scssc
.sass-cache
**/node_modules
Expand Down
267 changes: 135 additions & 132 deletions gulpfile.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
const gulp = require('gulp')
// NOTE: String Interpolation is spotty with some of the packages
// so for consistency use of string concatenation recommended

const { series, parallel, src, dest, watch } = require('gulp');
const $ = require('gulp-load-plugins')() // 1. gulp-{some-name} === someName; 2. {some-name} !== someName
const del = require('del')
const fse = require('fs-extra')
const runSequence = require('run-sequence')
const browserSync = require('browser-sync').create()
const reload = browserSync.reload

Expand All @@ -20,28 +22,12 @@ const variablesString = '// Colors\n$white: #ffffff;\n$black: #000000;'
const jsString = "$(() => {\n\tconsole.log('Its working!!')\n})"
const indexString = '<!DOCTYPE html>\n\n<html lang="en">\n\t<head>\n\t\t<meta http-equiv="content-type" content="text/html; charset=utf-8">\n\t\t<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">\n\t\t<title>Simple Base</title>\n\t\t<!-- css Build -->\n\t\t<!-- build:css css/styles.css -->\n\t\t<link rel="stylesheet" type="text/css" href="css/styles.css">\n\t\t<!-- endbuild -->\n\t\t<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc=" crossorigin="anonymous"></script>\n\t\t<!-- js Build -->\n\t\t<!-- build:js js/app.js -->\n\t\t<script type="text/javascript" src="js/app.js"></script>\n\t\t<!-- endbuild -->\n\t</head>\n\n\t<body>\n\t\t<h1>Sup bro! Let\'s get started</h1>\n\t</body>\n\n</html>'

gulp.task('constructor', () => {
fse.mkdirsSync(devDir + '/imgs')
fse.outputFileSync(devDir + '/js/app.js', jsString)
fse.outputFileSync(devDir + '/scss/styles.scss', stylesString)
fse.outputFileSync(devDir + '/scss/partials/_global.scss', globalSassString)
fse.outputFileSync(devDir + '/scss/partials/_variables.scss', variablesString)
// fse.outputFileSync(devDir + '/scss/partials/_mixins.scss')
fse.outputFileSync(devDir + '/index.html', indexString)
})

gulp.task('makie', (cb) => {
runSequence('clean:dev', 'constructor', cb)
})
// ---------------------
// --- Utility Tasks ---
// ---------------------

// Error reporter
function onBabelError (err) {
// For gulp-util users u can use a more colorfull variation
// util.log(util.colors.red('[Compilation Error]'));
// util.log(err.fileName + ( err.loc ? `( ${err.loc.line}, ${err.loc.column} ): ` : ': '));
// util.log(util.colors.red('error Babel: ' + err.message + '\n'));
// util.log(err.codeFrame);

console.log('[Compilation Error]')
console.log(err.fileName + (err.loc ? `( ${err.loc.line}, ${err.loc.column} ): ` : ': '))
console.log('error Babel: ' + err.message + '\n')
Expand All @@ -50,160 +36,177 @@ function onBabelError (err) {
this.emit('end')
}

// -------------------------------
// --- Clean Tasks ---
// -------------------------------

// Delete/Clean - Out with the Old
// PT: "Return it... ti nruteR"
gulp.task('clean:build', () => {
return del([buildDir])
})

gulp.task('clean:prod', () => {
return del([prodDir])
})

gulp.task('clean:dev', () => {
// Delete/Clean Tasks
const cleanDev = () => {
return del([devDir])
})

gulp.task('clean:build-images', () => {
}
const cleanProd = () => {
return del([prodDir])
}
const cleanBuild = () => {
return del([buildDir])
}
const cleanBuildImgs = () => {
return del([buildImgDir])
})

gulp.task('clean:opt-images', () => {
}
const cleanOtpImgs = () => {
return del([optImgDir])
})

// -------------------------------
// --- Development Build Tasks ---
// -------------------------------
}
const cleanSourceMaps = () => {
return del(['build/**/*.map'])
}

// Static Server - browserSync
gulp.task('serve', () => {
const serve = () => {
browserSync.init({
server: {
baseDir: buildDir
}
})
})
}

// ------------------------
// --- Constructor Task ---
// ------------------------

// The Contructor
const constructor = (cb) => {
fse.mkdirsSync(devDir + '/imgs')
fse.outputFileSync(devDir + '/js/app.js', jsString)
fse.outputFileSync(devDir + '/scss/styles.scss', stylesString)
fse.outputFileSync(devDir + '/scss/partials/_global.scss', globalSassString)
fse.outputFileSync(devDir + '/scss/partials/_variables.scss', variablesString)
// fse.outputFileSync(devDir + '/scss/partials/_mixins.scss')
fse.outputFileSync(devDir + '/index.html', indexString)
cb();
}

// -------------------------------
// --- Development Build Tasks ---
// -------------------------------

// CSS Build - Compile sass, prefix, minify, create source.map, browserSync
gulp.task('build:sass', () => {
gulp.src(devDir + '/scss/styles.scss')
const buildSass = () => {
return src(devDir + '/scss/styles.scss')
.pipe($.sourcemaps.init())
.pipe($.sass().on('error', $.sass.logError))
.pipe($.autoprefixer('last 3 versions'))
.pipe($.cleanCss())
.pipe($.sourcemaps.write('.'))
.pipe(gulp.dest(buildDir + '/css'))
.pipe(dest(buildDir + '/css'))
.pipe(reload({stream: true}))
})
}

// JS Build - Uglify, browserSync
gulp.task('build:js', () => {
gulp.src(devDir + '/js/**/*.js')
const buildJs = () => {
return src(devDir + '/js/**/*.js')
.pipe($.sourcemaps.init())
.pipe($.babel().on('error', onBabelError))
.pipe($.concat('app.js'))
.pipe($.sourcemaps.write('.'))
.pipe(gulp.dest(buildDir + '/js'))
.pipe(dest(buildDir + '/js'))
.pipe(reload({stream: true}))
})
}

// Copy to Build Dir - index.html
gulp.task('copy:index', () => {
gulp.src(devDir + '/index.html')
.pipe(gulp.dest(buildDir))
const copyIndex = () => {
return src(devDir + '/index.html')
.pipe(dest(buildDir))
.pipe(reload({stream: true}))
})
}

// Copy to Build Dir - Images
gulp.task('opt:images', ['clean:opt-images', 'clean:build-images'], (cb) => {
gulp.src(devDir + '/imgs/**/*')
const copyImgs = () => {
return src(devDir + '/imgs/*')
.pipe(dest(buildDir + '/imgs'))
.pipe(reload({stream: true}))
}

// Clean and Copy to Build Dir - Images
const cleanCopyImgs = series(cleanBuildImgs, copyImgs);

// Copy, and Optimize to Build Dir - Image
const buildOptImgs = (cb) => {
return src(devDir + '/imgs/**/*')
.pipe($.imagemin())
.pipe(gulp.dest(optImgDir))
.pipe(dest(optImgDir))
.on('end', () => {
cb()
})
})
}

// Copy to Build Dir - Images
gulp.task('copy:images', ['clean:build-images'], () => {
gulp.src(devDir + '/imgs/*')
.pipe(gulp.dest(buildDir + '/imgs'))
.pipe(reload({stream: true}))
})

// The Build - fully sequenced tasks will perform
// a development build
gulp.task('build:dev', (cb) => {
runSequence('clean:build', 'copy:index', 'copy:images', ['build:sass', 'build:js'], cb)
})

// Startup browserSync
gulp.task('browserSync', (cb) => {
runSequence('build:dev', 'serve', cb)
})

// The Default - Dev Build and Watchers. #friendsForever
gulp.task('default', ['browserSync'], () => {
gulp.watch(devDir + '/scss/**/*.scss', ['build:sass'])
gulp.watch(devDir + '/index.html', ['copy:index'])
gulp.watch(['src/imgs', 'src/imgs/**/*'], ['copy:images'])
gulp.watch(devDir + '/js/*.js', ['build:js'])
})
// Clean, Copy, and Optimize to Build Dir - Image
const OptImgs = series(cleanCopyImgs, buildOptImgs);

// Copy, and Optimize to Prod Dir - Image
const prodOptImgs = (cb) => {
return src(buildDir + '/imgs/**/*')
.pipe(dest(prodDir + '/imgs'))
.on('end', () => {
cb()
})
}

// Clean, Copy, and Optimize to Prod Dir - Image
const buildProdOtpImgs = series(OptImgs, prodOptImgs)

// Startup BrowserSync and Add Watchers
const watchers = () => {
serve();
watch(devDir + '/scss/**/*.scss', buildSass);
watch(devDir + '/js/*.js', buildJs);
watch(devDir + '/index.html', copyIndex);
watch(['src/imgs', 'src/imgs/**/*'], cleanCopyImgs);
}

// ------------------------------
// --- Production Build Tasks ---
// ------------------------------

// CSS Build Prod - Compile sass, prefix, minify, create source.map, browserSync
const buildProdSass = () => {
return src(devDir + '/scss/styles.scss')
.pipe($.sass().on('error', $.sass.logError))
.pipe($.autoprefixer('last 3 versions'))
.pipe($.cleanCss())
.pipe(dest(buildDir + '/css'))
}

// JS Build Prod - Uglify, browserSync
const buildProdJs = () => {
return src(devDir + '/js/**/*.js')
.pipe($.babel().on('error', onBabelError))
.pipe($.concat('app.js'))
.pipe(dest(buildDir + '/js'))
}

// Cache Busting - Adds a hash to the
// CSS and JS files so that dat cache can
// be busted. Also edits the index.html file
// so that the newly added hashs match the
// link tags. Sorcery
// ----------
// TODO fix this below
// need the timeout so that the index.html
// can be built completely
gulp.task('prod:usemin', (cb) => {
setTimeout(() => {
gulp.src(buildDir + '/index.html')
.pipe($.usemin({
css: [ $.rev() ],
js: [ $.uglify(), $.rev() ]
}))
.pipe(gulp.dest(prodDir))
.on('end', () => {
cb()
})
}, 1000)
})

// Copy to Images Prod Dir - Images
gulp.task('prod:images', ['opt:images'], (cb) => {
gulp.src(buildDir + '/imgs/**/*')
.pipe(gulp.dest(prodDir + '/imgs'))
.on('finish', () => {
// link tags
const cacheBuster = (cb) => {
return src(buildDir + '/index.html')
.pipe($.usemin({
css: [ $.rev() ],
js: [ $.uglify(), $.rev() ]
}))
.pipe(dest(prodDir))
.on('end', () => {
cb()
})
})

// Leeroy Jenkins - Final production build
gulp.task('build:prod', ['build:dev'], (cb) => {
runSequence('clean:prod', 'prod:images', 'prod:usemin', cb)
})

// This might be useful at some point
// -- Parses a json file or whatever i think
// -- That can be used for private keys and such
// ----------------------------------
// const fs = require('fs')
// const config = JSON.parse(fs.readFileSync('./config.json'))
// gulp.task('sup', () => {
// console.log(config.myvar)
// console.log(config.paths.myvar2)
// console.log(config.paths.myvar3)
// })
}

// The Dev Build - fully sequenced tasks will perform a development build
const buildDev = series(cleanBuild, copyIndex, cleanCopyImgs, parallel(buildSass, buildJs))
exports.buildDev = buildDev

// The Prod Build - fully sequenced tasks will perform a production build
const buildProd = series(cleanProd, cleanBuild, copyIndex, cleanCopyImgs, parallel(buildProdSass, buildProdJs), buildProdOtpImgs, cacheBuster)
exports.buildProd = buildProd

// Initial Contructor
exports.makie = series(cleanDev, constructor)

// The Default - Dev Build and Watchers
exports.default = series(buildDev, watchers)
Loading

0 comments on commit 76d19cb

Please sign in to comment.