// Defining requirements var gulp = require('gulp'); var plumber = require('gulp-plumber'); var sass = require('gulp-sass'); var babel = require('gulp-babel'); var postcss = require('gulp-postcss'); var touch = require('gulp-touch-fd'); var rename = require('gulp-rename'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var imagemin = require('gulp-imagemin'); var sourcemaps = require('gulp-sourcemaps'); var browserSync = require('browser-sync').create(); var del = require('del'); var cleanCSS = require('gulp-clean-css'); var replace = require('gulp-replace'); var autoprefixer = require('autoprefixer'); // Configuration file to keep your code DRY var cfg = require('./gulpconfig.json'); var paths = cfg.paths; // Run: // gulp sass // Compiles SCSS files in CSS gulp.task('sass', function () { var stream = gulp .src(paths.sass + '/*.scss') .pipe( plumber({ errorHandler: function (err) { console.log(err); this.emit('end'); } }) ) .pipe(sourcemaps.init({ loadMaps: true })) .pipe(sass({ errLogToConsole: true })) .pipe(postcss([autoprefixer()])) .pipe(sourcemaps.write(undefined, { sourceRoot: null })) .pipe(gulp.dest(paths.css)) .pipe(touch()); return stream; }); // Run: // gulp watch // Starts watcher. Watcher runs gulp sass task on changes gulp.task('watch', function () { gulp.watch([`${paths.sass}/**/*.scss`, `${paths.sass}/*.scss`], gulp.series('styles')); gulp.watch( [ `${paths.dev}/js/**/*.js`, 'js/**/*.js', '!js/theme.js', '!js/theme.min.js' ], gulp.series('scripts') ); //Inside the watch task. gulp.watch(`${paths.imgsrc}/**`, gulp.series('imagemin-watch')); }); // Run: // gulp imagemin // Running image optimizing task gulp.task('imagemin', function () { gulp .src(`${paths.imgsrc}/**`) .pipe(imagemin()) .pipe(gulp.dest(paths.img)); }); /** * Ensures the 'imagemin' task is complete before reloading browsers * @verbose */ gulp.task( 'imagemin-watch', gulp.series('imagemin', function () { browserSync.reload(); }) ); gulp.task('minifycss', function () { return gulp .src([ `${paths.css}/custom-editor-style.css`, `${paths.css}/theme.css`, ]) .pipe(sourcemaps.init({ loadMaps: true })) .pipe(cleanCSS({ compatibility: '*' })) .pipe( plumber({ errorHandler: function (err) { console.log(err); this.emit('end'); } }) ) .pipe(rename({ suffix: '.min' })) .pipe(sourcemaps.write('./')) .pipe(gulp.dest(paths.css)) .pipe(touch()); }); /** * Delete minified CSS files and their maps */ gulp.task('cleancss', function () { return del(paths.css + '/*.min.css*'); }); gulp.task('styles', function (callback) { gulp.series('sass', 'minifycss')(callback); }); // Run: // gulp browser-sync // Starts browser-sync task for starting the server. gulp.task('browser-sync', function () { browserSync.init(cfg.browserSyncWatchFiles, cfg.browserSyncOptions); }); // Run: // gulp scripts. // Uglifies and concat all JS files into one gulp.task('scripts', function () { var scripts = [ // Start - All BS4 stuff `${paths.dev}/js/bootstrap4/bootstrap.bundle.js`, `${paths.dev}/js/themejs/*.js`, // End - All BS4 stuff `${paths.dev}/js/skip-link-focus-fix.js`, // Adding currently empty javascript file to add on for your own themesĀ“ customizations // Please add any customizations to this .js file only! `${paths.dev}/js/custom-javascript.js` ]; gulp .src(scripts, { allowEmpty: true }) .pipe(babel({ presets: ['@babel/preset-env'] })) .pipe(concat('theme.min.js')) .pipe(uglify()) .pipe(gulp.dest(paths.js)); return gulp .src(scripts, { allowEmpty: true }) .pipe(babel()) .pipe(concat('theme.js')) .pipe(gulp.dest(paths.js)); }); // Deleting any file inside the /src folder gulp.task('clean-source', function () { return del(['src/**/*']); }); // Run: // gulp watch-bs // Starts watcher with browser-sync. Browser-sync reloads page automatically on your browser gulp.task('watch-bs', gulp.parallel('browser-sync', 'watch')); // Run: // gulp copy-assets. // Copy all needed dependency assets files from node_modules to theme's /js, /scss and /fonts folder. Run this task after npm update ////////////////// All Bootstrap SASS Assets ///////////////////////// gulp.task('copy-assets', function (done) { ////////////////// All Bootstrap 4 Assets ///////////////////////// // Copy all JS files var stream = gulp .src(`${paths.node}/bootstrap/dist/js/**/*.js`) .pipe(gulp.dest(`${paths.dev}/js/bootstrap4`)); // Copy all Bootstrap SCSS files gulp .src(`${paths.node}/bootstrap/scss/**/*.scss`) .pipe(gulp.dest(`${paths.dev}/sass/bootstrap4`)); ////////////////// End Bootstrap 4 Assets ///////////////////////// // Copy all Font Awesome Fonts gulp .src(`${paths.node}/font-awesome/fonts/**/*.{ttf,woff,woff2,eot,svg}`) .pipe(gulp.dest('./fonts')); // Copy all Font Awesome SCSS files gulp .src(`${paths.node}/font-awesome/scss/*.scss`) .pipe(gulp.dest(`${paths.dev}/sass/fontawesome`)); // _s SCSS files gulp .src(`${paths.node}/undescores-for-npm/sass/media/*.scss`) .pipe(gulp.dest(`${paths.dev}/sass/underscores`)); // _s JS files into /src/js gulp .src(`${paths.node}/undescores-for-npm/js/skip-link-focus-fix.js`) .pipe(gulp.dest(`${paths.dev}/js`)); done(); }); // Deleting the files distributed by the copy-assets task gulp.task('clean-vendor-assets', function () { return del([ `${paths.dev}/js/bootstrap4/**`, `${paths.dev}/sass/bootstrap4/**`, './fonts/*wesome*.{ttf,woff,woff2,eot,svg}', `${paths.dev}/sass/fontawesome/**`, `${paths.dev}/sass/underscores/**`, `${paths.dev}/js/skip-link-focus-fix.js`, `${paths.js}/**/skip-link-focus-fix.js`, `${paths.js}/**/popper.min.js`, `${paths.js}/**/popper.js`, paths.vendor !== '' ? paths.js + paths.vendor + '/**' : '' ]); }); // Deleting any file inside the /dist folder gulp.task('clean-dist', function () { return del([paths.dist + '/**']); }); // Run // gulp dist // Copies the files to the /dist folder for distribution as simple theme gulp.task( 'dist', gulp.series(['clean-dist'], function () { return gulp .src( [ '**/*', `!${paths.node}`, `!${paths.node}/**`, `!${paths.dev}`, `!${paths.dev}/**`, `!${paths.dist}`, `!${paths.dist}/**`, `!${paths.distprod}`, `!${paths.distprod}/**`, `!${paths.sass}`, `!${paths.sass}/**`, `!${paths.composer}`, `!${paths.composer}/**`, '!readme.txt', '!README.md', '!*.+(json|js|lock|xml)', '!CHANGELOG.md', ], { buffer: true } ) .pipe( replace( '/js/jquery.slim.min.js', '/js' + paths.vendor + '/jquery.slim.min.js', { skipBinary: true } ) ) .pipe( replace('/js/popper.min.js', '/js' + paths.vendor + '/popper.min.js', { skipBinary: true }) ) .pipe( replace( '/js/skip-link-focus-fix.js', '/js' + paths.vendor + '/skip-link-focus-fix.js', { skipBinary: true } ) ) .pipe(gulp.dest(paths.dist)) .pipe(touch()); }) ); // Deleting any file inside the /dist-product folder gulp.task('clean-dist-product', function () { return del([paths.distprod + '/**']); }); // Run // gulp dist-product // Copies the files to the /dist-prod folder for distribution as theme with all assets gulp.task( 'dist-product', gulp.series(['clean-dist-product'], function () { return gulp .src([ '**/*', `!${paths.node}`, `!${paths.node}/**`, `!${paths.composer}`, `!${paths.composer}/**`, `!${paths.dist}`, `!${paths.dist}/**`, `!${paths.distprod}`, `!${paths.distprod}/**`, ]) .pipe(gulp.dest(paths.distprod)) .pipe(touch()); }) ); // Run // gulp compile // Compiles the styles and scripts and runs the dist task gulp.task('compile', gulp.series('styles', 'scripts', 'dist')); // Run: // gulp // Starts watcher (default task) gulp.task('default', gulp.series('watch'));