Initial commit

README.md

@@ -0,0 +1,3 @@
+# LSM Gulp Sample
+
+See gulpfile.js.

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
+    }));
+}))