Created
August 12, 2021 02:57
-
-
Save PabloPenia/0d78695c5177471d0d213a3fc741f39f to your computer and use it in GitHub Desktop.
Simple gulp configuration with Pug, SCSS, ES6 and BrowserSync.
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
'use strict'; | |
var gulp = require('gulp'); | |
var gutil = require('gulp-util'); | |
var sass = require('gulp-sass'); | |
var pug = require('gulp-pug'); | |
var babel = require('gulp-babel'); | |
var livereload = require('gulp-livereload'); | |
var zip = require('gulp-zip'); | |
var rev = require('gulp-rev'); | |
var del = require('del'); | |
var browserSync = require('browser-sync'); | |
var spa = require('browser-sync-spa'); | |
browserSync.use(spa()); | |
var paths = { | |
src: 'src', | |
dist: 'dist' | |
}; | |
var pugFiles = { | |
src: paths.src + '/views/**/!(_)*.pug', | |
dist: paths.dist, | |
watch: paths.src + '/views/**/*.pug' | |
} | |
var htmlFiles = { | |
watch: paths.dist + '/**/*.html' | |
} | |
var scssFiles = { | |
src: paths.src + '/scss/index.scss', | |
dist: paths.dist + '/css/', | |
watch: paths.src + '/scss/**/*.scss' | |
} | |
var jsFiles = { | |
src: paths.src + '/js/**/*.js', | |
dist: paths.dist + '/js', | |
watch: paths.src + '/js/**/*.js' | |
} | |
var assetsFiles = { | |
src: paths.src + '/assets/**/*.*', | |
dist: paths.dist, | |
watch: paths.src + '/assets/**/*.*' | |
} | |
var zipFiles = { | |
src: paths.dist + '/**/*.*', | |
dist: './zip/', | |
name: 'ov-theme.zip' | |
} | |
// Compiles pug | |
gulp.task('pug', function() { | |
gulp.src(pugFiles.src) | |
.pipe(pug({ | |
locals: {}, | |
pretty: true | |
})) | |
.pipe(gulp.dest(pugFiles.dist)) | |
}); | |
// Compiles SCSS | |
gulp.task('sass', function() { | |
return gulp.src(scssFiles.src) | |
.pipe(sass().on('error', sass.logError)) | |
.pipe(gulp.dest(scssFiles.dist)) | |
.pipe(browserSync.stream()); | |
}); | |
// Compiles Vanilla JS | |
gulp.task('js', () => { | |
return gulp.src(jsFiles.src) | |
.pipe(gulp.dest(jsFiles.dist)) | |
.pipe(browserSync.reload({ | |
stream: true | |
})); | |
}); | |
// Compiles ES6 JS | |
gulp.task('js:babel', () => { | |
return gulp.src(jsFiles.src) | |
.pipe(babel({ presets: ['es2015'] })) | |
.pipe(gulp.dest(jsFiles.dist)); | |
}); | |
// Inits Browser Sync server | |
function browserSyncServe(done) { | |
browserSync.init({ | |
ghostMode: true, | |
notify: false, | |
server: { | |
baseDir: paths.dist | |
}, | |
open: true | |
}); | |
done(); | |
} | |
// Simple timeout to deal with Pug compiling lag | |
function reloadBrowserSyncPug() { | |
setTimeout(reloadBrowserSync, 500); | |
} | |
// Reload Browser sync | |
function reloadBrowserSync() { | |
browserSync.reload(); | |
} | |
// Clean dist dir | |
function clean() { | |
// return del([paths.dist + '/**/*/*.*', paths.dist + '/*', paths.dist]); | |
} | |
// Watch Task | |
gulp.task('watch', [], function() { | |
gulp.watch(pugFiles.watch, ['pug', reloadBrowserSyncPug]); | |
gulp.watch(scssFiles.watch, ['sass']); | |
gulp.watch(jsFiles.watch, ['js']); | |
gulp.watch(assetsFiles.watch, ['moveAssets', reloadBrowserSyncPug]); | |
}); | |
// [npm run build] Default Task | |
gulp.task('default', ['clean', 'pug', 'sass', 'js', 'move']); | |
// [npm run build] Build Task | |
gulp.task('build', ['default']); | |
// [npm run serve] Serve Task | |
gulp.task('serve', ['default', 'watch', 'browsersync']); | |
// Browsersync Task | |
gulp.task('browsersync', browserSyncServe); | |
// Clean Task | |
gulp.task('clean', clean); | |
// Move assets task | |
gulp.task('moveassets', ['move']); | |
// Zip dist task | |
gulp.task('zip', () => { | |
return gulp.src(zipFiles.src) | |
.pipe(zip(zipFiles.name)) | |
.pipe(rev()) | |
.pipe(gulp.dest(zipFiles.dist)); | |
}); | |
// Move all assets task | |
gulp.task('move', () => { | |
return gulp.src(assetsFiles.src) | |
.pipe(gulp.dest(assetsFiles.dist)); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment