Task

https://gulpjs.com/docs/en/getting-started/quick-start
npm i @pi-r/gulp

Note

Gulp is used as the reference implementation for a Task module.

Example configuration

CLI

squared.json

{
  "task": {
    "gulp": {
      "handler": "@pi-r/gulp",
      "settings": {
        "minify": "./gulpfile.js", // Executes task named "minify"
        "users": {
          "username": {
            "minify": "./username/gulpfile.js" // Overrides parent task "minify"
          }
        },
        "minify-css": {
          "path": "./gulpfile.css.js", // Required
          "tasks": ["lint", "minify"],
          "opts": ["--series", "--continue"] // CLI
        }
      }
    }
  }
}

Important

To use Gulp in a user directory requires a global installation. [1]

{
  "selector": "head > script:nth-of-type(1)",
  "type": "js",
  "tasks": [
    { "handler": "gulp", "task": "minify" }, // Execute tasks last before writing to destination
    { "handler": "gulp", "task": "beautify", "preceding": "true" }, // Execute tasks first before transformations
    {
      "handler": "gulp",
      "task": {
        "path": "../gulp/transform.js", // User defined uses file permissions
        "tasks": ["minify"],
        "opts": ["--verify"]
      }
    }
  ]
}

Example gulpfile.js

Renaming files with Gulp is not recommended since it will not appear in the output manifest. It is better to use the saveAs or filename properties in order for the references to be found when the asset is part of the document.

const gulp = require("gulp");
const uglify = require("gulp-uglify");

gulp.task("minify", () => {
  return gulp.src("*")
    .pipe(uglify())
    .pipe(gulp.dest("./"));
});

gulp.task("default", gulp.series("minify"));

Caution

src (temp) and dest (original) always read and write to the current directory.

data-chrome-tasks

Tasks can be performed immediately after the asset has been downloaded (preceding) and during finalization.

JSON

<script
  src="/common/util.js"
  data-chrome-tasks='[{ handler: "gulp", task: "minify" }, { handler: "gulp", task: "lint", preceding: "true" }]'>
</script>

handler : task : preceding? …+

<script src="/common/util.js" data-chrome-tasks="gulp:minify+gulp:lint:true"></script>