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!)"