@das.laboratory/gulp-plugin-interactive

gulp-plugin-interactive

BigGulp makes building interactive projects, SCORM packages, uploading and live-link generation a lot easier.

The following commands are available to you through @das.laboratory/gulp-plugin-interactive on npm.

Available commands

Note: you can always list the available tasks by running gulp --tasks.

The following table lists all available commands (tasks) you can run with gulp <command> and the submodules it runs behind the scenes:

Command	Runs these submodules:
buildOnly	start, setFilePermissions, copyAll, compileSASS, joinUserefBlocks, doNotRevAllFiles, scormify, zipSCORM
build	buildOnly + commitProject, upload, makelive
putOnline	zipSCORM, upload, makelive
makelive	makelive
upload	upload
setup	setup
zip	zipSCORM

I left out submodules that don't contribute to the actual output, like cleaning up temp files or show terminal messages, etc.

Descriptions

Here is a description of what each of these submodules does:

Module	Description
start	sets up the project (checks for interactive.json file and asks for info if not available, etc.)
setFilePermissions	sets file permissions of 755 to all files in ./src
copyAll	copies all files from ./src to ./tmp folder (except .scss, .css, .js, .md, .map, package.json, LICENSE files)
compileSASS	compiles all .scss files in ./src/css and its subfolders and saves resulting .css file(s) to ./src/css
joinUserefBlocks	joins all files marked in index.html with build:css and build:js comments (if the current file happens to be interactive.min.js it will run it through babel and add 'INTERACTIVE BUILD ON...' message) and puts them into ./tmp
doNotRevAllFiles	shortcut to avoid 'revAllFiles' (which doesn't quite work yet but would add checksums to the name of the files, making cache problems a thing of the past) and instead simply copies all files from ./tmp to ./build
scormify	uses handlebars.js to make SCORM manifest file with list of files in ./build folder and adds schema files (removing old ones from ./build without asking)
zipSCORM	zips the build folder and names the archive according to the data in interactive.json file
commitProject	checks the local repository and if uncommitted files are found will commit them for you
upload	uploads the zipfile into a folder on the server that's named according to the project info found in interactive.json
makelive	runs a script on the server that unzips the project, turns off SCORM and video-seeking on and returns a live-link URL
setup	asks for details about the project that are used for building the final package

Modules

Modules actually used by the tasks

As we can see, not many modules actually use gulp. Time to say goodbye to gulp?

Files	Type	Gulp	Description
./index.js	MAIN	yes	gulpfile.js
./modules/all.js	MODULE	yes	does the main building job
./modules/cli-style.js	MODULE		helpers for CLI stuff
./modules/css.js	MODULE	yes	transpile SCSS/CSS
./modules/git-commit.js	MODULE		commit project
./modules/interactive-data-parser.js	MODULE		parse interactive.json
./modules/makelive.js	MODULE		run makelive on server
./modules/scormify.js	MODULE		add SCORM templates to output
./modules/setup.js	MODULE		setup project
./modules/upload.js	MODULE		upload project to server
./modules/utils.js	MODULE		helpers for CLI stuff
./modules/wait-for-it.js	MODULE		add delay between tasks
./modules/data/languages.js	DATA		language options for setup
./modules/data/output-options.js	DATA		output options for setup

Modules not used by the tasks or experimental stuff

Files	Type	Gulp	Description
./modules/examples/boxes.js	PLAYGROUND		testing boxes
./modules/examples/lines.js	PLAYGROUND		testing lines
./modules/chmod.js	MODULE		set files permissions
./modules/js.js	MODULE	yes	insert date into built interactive.js
./modules/prefixer.js	MODULE	yes	prefix urls
./modules/quality-assurance.js	MODULE		test project for potential problems
./modules/server.js	MODULE	yes	watch/serve/reload project
./modules/weird-emoji-tests.mjs	MODULE		who knows

Notes on converting to ESM

Interesting articles:

• Invoking the Gulp tool programmatically
• How to build a TypeScript library with Vite

Running gulp programmatically from node script

A proof of concept can be found in ./vite-library-test. It works just fine!

But this is the gist of it:

gulpfile.js:

import gulp from 'gulp';

export const two = () => Promise.resolve(11);
export const one = gulp.series(two, () => Promise.resolve(5));

index.js:

import { one, two } from './gulpfile.js';

const resultOne = one();
const resultTwo = two();

console.log('result one: ', resultOne); // result one:  undefined
console.log('result two: ', resultTwo); // result two:  Promise { 11 }

Note: resultOne is undefined because one() is a gulp series.

This comment explains it:

"series and parallel don't return results because they have nothing to return. When invoking, you pass a callback function that passes the errors and results.

prelim(function (err, results) {
	console.log(err, results);
});

Btw, all of this is documented in the dependencies (https://github.com/gulpjs/bach in this case) but haven't been surfaced to the 4.0 docs yet (always looking for people to help!)"