From efad3b0e5362c920ac24daa46dee90b6be151d63 Mon Sep 17 00:00:00 2001 From: Serving One 22 Date: Fri, 23 Feb 2024 16:52:40 -0800 Subject: [PATCH] Initial commit --- README.md | 3 ++ gulpfile.js | 89 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 92 insertions(+) create mode 100644 README.md create mode 100644 gulpfile.js diff --git a/README.md b/README.md new file mode 100644 index 0000000..e9bf917 --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# LSM Gulp Sample + +See gulpfile.js. \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..74fad5d --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,89 @@ +import 'dotenv/config'; +import gulp from 'gulp'; +import gulpIf from 'gulp-if'; +import * as dartSass from 'sass-embedded'; +import gulpSass from 'gulp-sass'; +import concat from 'gulp-concat'; +import { deleteAsync } from 'del'; +import sourcemaps from 'gulp-sourcemaps'; +import rollup from '@rollup/stream'; +import source from 'vinyl-source-stream'; +import buffer from 'vinyl-buffer'; +import browserSync from 'browser-sync'; + +const sass = gulpSass(dartSass); +// console.log(process.env) // uncomment this line to check your environment variables + +/** + * DEFINE FUNCTIONS FOR GULP +*/ +// set mode; create .env file for this and set NODE_ENV to development or production +const IS_DEV = process.env.NODE_ENV === "development"; +const copySrc = ['./src/**', '!./src/js/**', './uploads/*.json', '!./src/style/**', '!./src/index.js']; + +// delete all files in public folder +function clean() { + // delete everything inside of public, but do not delete the folder itself + return deleteAsync(['./public/**', '!./public'], { force: true }); +} + +// handle scss files +function styles() { + // specify source files to process + return gulp.src(['./src/style/*.scss', '!./src/styles/_*']) + // concatenate all source files + .pipe(concat('styles.scss')) + // change scss into css + .pipe(sass().on('error', sass.logError)) + // save result to public + .pipe(gulp.dest('./public')) + // send to browsersync if development mode + .pipe(gulpIf(IS_DEV, browserSync.stream())); +}; + +// handle js files +function scripts() { + // init rollup module handler + return rollup({ + input: './src/index.js', + output: { format: 'cjs' }, + }) + // define final output file name + .pipe(source('app.js')) + // if dev mode, create buffer for sourcemaps (optional) + .pipe(gulpIf(IS_DEV, buffer())) + // if dev mode, create sourcemaps (optional) + .pipe(gulpIf(IS_DEV, sourcemaps.write('.'))) + // write output to public folder + .pipe(gulp.dest('./public')); +}; + +// copy files over which need no processing +function copyFiles() { + // define source files + return gulp.src(copySrc) + // write output + .pipe(gulp.dest('./public')); +}; + +/** + * REGISTER PUBLIC TASKS + * can be called from npm (package.json) +*/ + +// default build task +gulp.task('default', gulp.series(clean, gulp.parallel(styles, scripts, copyFiles))); +// default run task +gulp.task('watch', gulp.series(clean, gulp.parallel(styles, scripts, copyFiles), function() { + // start browsersync server + browserSync.init({ + server: "./public" // define what folder browsersync will serve + }); + // watch and handle scss changes, will inject to browser, no need for reload + gulp.watch('./src/style/*.scss', styles); + // watch and handle html and js file changes, will reload browser + gulp.watch(['./src/*.html', './src/**/*.js'], gulp.series(clean, gulp.parallel(styles, scripts, copyFiles), function(done) { + browserSync.reload(); + done(); // need to call this callback to signal async completion; otherwise, this task will never end + })); +})) \ No newline at end of file