Download Node.js - https://nodejs.org/en Node v18.17.1
/*
* ------------------------------------------------------------------------------
* Gulpfile.js
* https://gulpjs.com/
* ------------------------------------------------------------------------------
*/
const gulp = require('gulp');
// const sourcemaps = require('gulp-sourcemaps');
const uglify = require('gulp-uglify');
const autoprefixer = require('gulp-autoprefixer');
const cleanCSS = require('gulp-clean-css');
const sass = require('gulp-dart-sass');
const rename = require('gulp-rename');
const sassGlob = require('gulp-sass-glob');
const browserify = require('browserify');
const babelify = require('babelify');
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');
const es = require('event-stream');
const paths = {
styles: {
scssInput: 'assets/uncompiled/scss/*.scss',
modules: 'components/**/**/*.scss',
cssInput: 'assets/uncompiled/css/*.css',
cssDest: 'assets/uncompiled/css/',
cssDestMin: 'assets/build/css/',
},
scripts: {
inputs: [
'./assets/uncompiled/js/page-home.js',
'./assets/uncompiled/js/page-submissions.js',
],
modules: 'assets/uncompiled/js/modules/*.js',
dest: 'assets/build/js/',
},
};
const sassOptions = {
outputStyle: 'expanded',
};
// * Compiles Sass and minifies CSS
function styles() {
return gulp
.src(paths.styles.scssInput)
.pipe(sassGlob())
.pipe(sass(sassOptions)).on('error', sass.logError)
.pipe(autoprefixer({
grid: true,
}))
.pipe(gulp.dest(paths.styles.cssDest))
.pipe(cleanCSS())
.pipe(rename({
suffix: '.min',
}))
.pipe(gulp.dest(paths.styles.cssDestMin));
}
exports.styles = styles;
// * Compresses Scripts
async function scripts() {
const tasks = await paths.scripts.inputs.map((entry) => {
return (
browserify({
entries: [entry],
debug: true,
})
.transform(babelify, {
presets: ['@babel/preset-env'],
})
.bundle()
.pipe(source(entry))
.pipe(buffer())
// .pipe(sourcemaps.init())
.pipe(uglify())
// .pipe(sourcemaps.write('./'))
.pipe(rename({
dirname: '',
extname: '.min.js',
}))
.pipe(gulp.dest(paths.scripts.dest))
);
});
return es.merge.apply(null, tasks);
}
exports.scripts = scripts;
// * Watch Task
function watch() {
gulp.watch(paths.styles.scssInput, styles).on('all', (event, path, stats) => {
console.log(`File ${path} was ${event}, running tasks...`);
});
gulp.watch(paths.styles.modules, styles).on('all', (event, path, stats) => {
console.log(`File ${path} was ${event}, running tasks...`);
});
gulp.watch(paths.scripts.inputs, scripts).on('all', (event, path, stats) => {
console.log(`File ${path} was ${event}, running tasks...`);
});
gulp.watch(paths.scripts.modules, scripts).on('all', (event, path, stats) => {
console.log(`File ${path} was ${event}, running tasks...`);
});
}
exports.watch = watch;
const build = gulp.parallel(styles, scripts, watch);
gulp.task('default', build);
{
"devDependencies": {
"@babel/core": "^7.4.4",
"@babel/preset-env": "^7.4.4",
"babelify": "^10.0.0",
"browserify": "^16.2.3",
"event-stream": "^4.0.1",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^6.1.0",
"gulp-clean-css": "^4.2.0",
"gulp-cli": "^2.2.0",
"gulp-concat": "^2.6.1",
"gulp-dart-sass": "^1.1.0",
"gulp-rename": "^1.4.0",
"gulp-sass-glob": "^1.0.9",
"gulp-sourcemaps": "^2.6.5",
"gulp-uglify": "^3.0.2",
"sass": "^1.64.2",
"vinyl-buffer": "^1.0.1",
"vinyl-source-stream": "^2.0.0"
}
}