🏗 Replace gulp with the amp task runner (#33315)

.circleci/install_dependencies.sh

@@ -31,9 +31,6 @@ export NVM_DIR="/opt/circleci/.nvm"
 echo $(GREEN "Installing Node LTS...")
 nvm install 'lts/*'
 
-echo $(GREEN "Installing gulp-cli...")
-npm install --global gulp-cli
-
 echo $(GREEN "Installing dependencies...")
 npm ci
 

.eslintrc.js

@@ -307,7 +307,13 @@ module.exports = {
       },
     },
     {
-      'files': ['babel.config.js', '**/.eslintrc.js', 'package-scripts.js'],
+      'files': [
+        '**/.eslintrc.js',
+        'amp.js',
+        'babel.config.js',
+        'gulp-deprecated.js',
+        'package-scripts.js',
+      ],
       'globals': {
         'module': false,
         'process': false,

.github/ISSUE_TEMPLATE/release-tracking-issue.md

@@ -27,7 +27,7 @@ up to date:
 - Add any updates that may be of interest to the community (such as delays) as
   comments on this issue, including after the release is promoted to Stable (and, in some cases, LTS).
 
-Note: remove the backticks (``) from the link. They are there to allow the template file for this issue to pass `gulp check-links`.
+Note: remove the backticks (``) from the link. They are there to allow the template file for this issue to pass `amp check-links`.
 -->
 
 This issue tracks release `[<RELEASE_NUMBER>](https://github.com/ampproject/amphtml/releases/tag/<RELEASE_NUMBER>)`. See what's new compared to stable `[here](https://github.com/ampproject/amphtml/compare/<LATEST_STABLE_RELEASE_NUMBER>...<RELEASE_NUMBER>)`.

.github/workflows/install_dependencies.sh

@@ -32,9 +32,6 @@ fi
 echo $(GREEN "Enabling log coloring...")
 echo "FORCE_COLOR=1" >> $GITHUB_ENV
 
-echo $(GREEN "Installing gulp-cli...")
-npm install --global gulp-cli
-
 echo $(GREEN "Installing dependencies...")
 npm ci
 

.github/workflows/sweep-experiments.yml

@@ -1,4 +1,4 @@
-# Executes `gulp sweep-experiments` on a schedule.
+# Executes `amp sweep-experiments` on a schedule.
 # If experiments are swept, a PR is created.
 
 name: Sweep Experiments
@@ -25,9 +25,6 @@ jobs:
       - name: Set Up Environment
         run: sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}
 
-      - name: Install Gulp CLI
-        run: npm install --global --force gulp-cli
-
       - name: Install Dependencies
         run: npm ci
 
@@ -37,7 +34,7 @@ jobs:
           git config --global user.name "${GITHUB_ACTOR}"
           git config --global user.email "${GITHUB_ACTOR}@users.noreply.github.com"
 
-          gulp sweep-experiments
+          amp sweep-experiments
 
           title=$(git log -1 --format=%s)
           title="${title//'%'/'%25'}"

.lando.yml

@@ -15,8 +15,8 @@
 # 5. You should then be able to access <https://amphtml.lando.site> in your browser.
 # 6. If using the Local AMP Chrome Extension, open the popup and configure the Base URL to be https://amphtml.lando.site/
 #
-# Now instead of running `gulp` commands directly, you instead run `lando gulp`. Additionally, some of the common gulp
-# commands have shortcuts, so you can run `lando watch` instead of `lando gulp build --watch`. For a full list of the
+# Now instead of running `amp` commands directly, you instead run `lando amp`. Additionally, some of the common amp
+# commands have shortcuts, so you can run `lando watch` instead of `lando amp build --watch`. For a full list of the
 # shortcuts run `lando help`.
 #
 # For details on the file format, see <https://docs.lando.dev/config/lando.html>.
@@ -31,47 +31,46 @@ services:
       - apt-get update && apt-get install -y openjdk-8-jdk && apt-get install -y ant && apt-get clean
       - apt-get install -y openjdk-7-jre protobuf-compiler python2.7 python-protobuf
     build:
-      - npm install --global gulp-cli
       - npm install
     run_as_root:
       - echo "127.0.0.1 amphtml.lndo.site" >> /etc/hosts
-    command: cd /app && gulp serve --port=80 --host=0.0.0.0
+    command: cd /app && amp serve --port=80 --host=0.0.0.0
 
 tooling:
-  gulp:
+  amp:
     service: appserver
-    cmd: 'gulp'
+    cmd: 'amp'
   watch:
     service: appserver
-    cmd: 'gulp build --watch'
+    cmd: 'amp build --watch'
     description: 'Builds unminified code, watches for changes in files, re-builds when detected'
   watch-minified:
     service: appserver
-    cmd: 'gulp dist --watch'
+    cmd: 'amp dist --watch'
     description: 'Builds minified code, watches for changes in files, re-builds when detected'
   lint:
     service: appserver
-    cmd: 'gulp lint'
+    cmd: 'amp lint'
     description: 'Validates against Google Closure Linter'
   check-types:
     service: appserver
-    cmd: 'gulp check-types'
+    cmd: 'amp check-types'
     description: 'Check source code for JS type errors'
   dist:
     service: appserver
-    cmd: 'gulp dist'
+    cmd: 'amp dist'
     description: 'Build production binaries'
   unit:
     service: appserver
-    cmd: 'gulp unit'
+    cmd: 'amp unit'
     description: 'Run unit tests'
   integration:
     service: appserver
-    cmd: 'gulp integration'
+    cmd: 'amp integration'
     description: 'Run integration tests'
   e2e:
     service: appserver
-    cmd: 'gulp e2e'
+    cmd: 'amp e2e'
     description: 'Runs e2e tests'
 
 proxy:

.renovaterc.json

@@ -16,7 +16,7 @@
     "<details>",
     "<summary>How to resolve breaking changes</summary>",
     "This PR may introduce breaking changes that require manual intervention. In such cases, you will need to check out this branch, fix the cause of the breakage, and commit the fix to ensure a green CI build. To check out and update this PR, follow the steps below:",
-    "```sh\n# Check out the PR branch (these steps are from GitHub)\ngit checkout -b renovate-bot-{{{branchName}}} master\ngit pull https://github.com/renovate-bot/amphtml.git {{{branchName}}}\n\n# Directly make fixes and commit them\ngulp lint --fix # For lint errors in JS files\ngulp prettify --fix # For prettier errors in non-JS files\n# Edit source code in case of new compiler warnings / errors\n\n# Push the changes to the branch\ngit push git@github.com:renovate-bot/amphtml.git renovate-bot-{{{branchName}}}:{{{branchName}}}\n```",
+    "```sh\n# Check out the PR branch (these steps are from GitHub)\ngit checkout -b renovate-bot-{{{branchName}}} master\ngit pull https://github.com/renovate-bot/amphtml.git {{{branchName}}}\n\n# Directly make fixes and commit them\namp lint --fix # For lint errors in JS files\namp prettify --fix # For prettier errors in non-JS files\n# Edit source code in case of new compiler warnings / errors\n\n# Push the changes to the branch\ngit push git@github.com:renovate-bot/amphtml.git renovate-bot-{{{branchName}}}:{{{branchName}}}\n```",
     "</details>"
   ],
 

3p/beopinion.js

@@ -107,7 +107,7 @@ function getBeOpinionAsyncInit(global, accountId) {
           });
       },
     });
-    global.BeOpinionSDK['watch'](); // global.BeOpinionSDK.watch() fails 'gulp check-types' validation
+    global.BeOpinionSDK['watch'](); // global.BeOpinionSDK.watch() fails 'amp check-types' validation
   };
 }
 

CONTRIBUTING.md

@@ -10,7 +10,7 @@ How would you like to help?
   (Do not remove or edit this comment.)
 
   This table-of-contents is automatically generated. To generate it, run:
-    gulp markdown-toc --fix
+    amp markdown-toc --fix
 -->
 
 <!-- {"maxdepth": 1} -->

OWNERS

@@ -21,7 +21,7 @@
       owners: [{name: '*'}],
     },
     {
-      pattern: '{.*,gulpfile.js}',
+      pattern: '{.*,amp.js,gulp-deprecated.js}',
       owners: [{name: 'ampproject/wg-infra'}],
     },
     {

ads/README.md

@@ -8,7 +8,7 @@ This guide provides details for ad networks to create an `amp-ad` integration fo
   (Do not remove or edit this comment.)
 
   This table-of-contents is automatically generated. To generate it, run:
-    gulp markdown-toc --fix
+    amp markdown-toc --fix
 -->
 
 <!-- {"maxdepth": 2} -->
@@ -352,7 +352,7 @@ If you're adding support for a new third-party ad service, changes to the follow
 
 To verify the examples that you have put in `/examples/ads.amp.html`:
 
-1. Start a local gulp web server by running command `gulp`.
+1. Start a local amp web server by running command `amp`.
 2. Visit `http://localhost:8000/examples/ads.amp.html?type=yournetwork` in your browser to make sure the examples load ads.
 
 Please consider having the example consistently load a fake ad (with ad targeting disabled). Not only will it be a more confident example for publishers to follow, but also allows the AMP team to catch any regression bug during AMP releases.
@@ -366,14 +366,14 @@ Please verify your ad is fully functioning, for example, by clicking on an ad. W
 Please make sure your changes pass the tests:
 
 ```sh
-gulp unit --watch --nobuild --files=test/unit/{test-ads-config.js,test-integration.js}
+amp unit --watch --nobuild --files=test/unit/{test-ads-config.js,test-integration.js}
 ```
 
 If you have non-trivial logic in `/ads/yournetwork.js`, adding a unit test at `/test/unit/ads/test-yournetwork.js` is highly recommended.
 
 ### Lint and type-check
 
-To speed up the review process, please run `gulp lint` and `gulp check-types`, then fix errors, if any, before sending out the PR.
+To speed up the review process, please run `amp lint` and `amp check-types`, then fix errors, if any, before sending out the PR.
 
 ### Other tips
 

ads/google/a4a/docs/Network-Impl-Guide.md

@@ -13,7 +13,7 @@ be given preferential rendering.
   (Do not remove or edit this comment.)
 
   This table-of-contents is automatically generated. To generate it, run:
-    gulp markdown-toc --fix
+    amp markdown-toc --fix
 -->
 
 -   [Background](#background)

gulpfile.js → amp.js

@@ -1,5 +1,6 @@
+#!/usr/bin/env node
 /**
- * Copyright 2019 The AMP HTML Authors. All Rights Reserved.
+ * Copyright 2021 The AMP HTML Authors. All Rights Reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -14,100 +15,33 @@
  * limitations under the License.
  */
 
-/* global require, process */
-
-const argv = require('minimist')(process.argv.slice(2));
-const gulp = require('gulp');
-const {cyan, red} = require('kleur/colors');
-const {isCiBuild} = require('./build-system/common/ci');
-const {log} = require('./build-system/common/logging');
-
-/**
- * Helper that creates the tasks in AMP's toolchain based on what's being done:
- * - If `gulp --tasks` has been invoked, eagerly load all task functions so we
- *   can print detailed information about their names, flags, usage, etc.
- * - If a single gulp task has been invoked, create a wrapper that lazily loads
- *   individual task functions from their source files. After that, check the
- *   flag usage for the current task and load only those source file(s) used by
- *   the task that was invoked.
- * @param {string} taskName
- * @param {string} taskFuncName
- * @param {string} taskSourceFileName
- */
-function createTask(taskName, taskFuncName, taskSourceFileName) {
-  const isGulpTasks = argv._.length == 0 && argv.tasks == true; // gulp --tasks
-  const taskSourceFilePath = `./build-system/tasks/${taskSourceFileName}`;
-  if (isGulpTasks) {
-    const taskFunc = require(taskSourceFilePath)[taskFuncName];
-    gulp.task(taskName, taskFunc);
-  } else {
-    gulp.task(taskName, (callback) => {
-      const taskFunc = require(taskSourceFilePath)[taskFuncName];
-      checkFlags(taskName, taskFunc, callback);
-      return taskFunc(callback);
-    });
-  }
-}
+const {
+  createTask,
+  finalizeRunner,
+} = require('./build-system/tasks/amp-task-runner');
 
 /**
- * Checks if the flags passed in to a task are valid.
- * @param {string} name
- * @param {function} taskFunc
- * @param {function} callback
- */
-function checkFlags(name, taskFunc, callback) {
-  const validFlags = taskFunc.flags ? Object.keys(taskFunc.flags) : [];
-  if (isCiBuild()) {
-    validFlags.push('color'); // Used to enable log coloring during CI.
-  }
-  const usedFlags = Object.keys(argv).slice(1); // Skip the '_' argument
-  const invalidFlags = [];
-  usedFlags.forEach((flag) => {
-    if (!validFlags.includes(flag)) {
-      invalidFlags.push(`--${flag}`);
-    }
-  });
-  if (invalidFlags.length > 0) {
-    log(
-      red('ERROR:'),
-      'Found invalid flags for',
-      cyan(`gulp ${name}`) + ':',
-      cyan(invalidFlags.join(', '))
-    );
-    log('For detailed usage information, run', cyan('gulp --tasks') + '.');
-    if (validFlags.length > 0) {
-      log('Valid flags for', cyan(`gulp ${name}`) + ':');
-      validFlags.forEach((key) => {
-        log(cyan(`\t--${key}`) + `: ${taskFunc.flags[key]}`);
-      });
-    }
-    const reason = new Error('Found invalid flags');
-    reason.showStack = false;
-    callback(reason);
-  }
-}
-
-/**
- * All the gulp tasks. Keep this list alphabetized.
+ * All the AMP tasks. Keep this list alphabetized.
  *
  * The three params used below are:
- * 1. Name of the gulp task to be invoked E.g. gulp default
+ * 1. Name of the amp task to be invoked E.g. amp default
  * 2. Name of the function in the source file. E.g. defaultTask()
  * 3. Basename of the source file in build-system/tasks/. E.g. build-system/tasks/default-task.js
  */
-
-createTask('analytics-vendor-configs','analyticsVendorConfigs','analytics-vendor-configs'); // prettier-ignore
+createTask('analytics-vendor-configs', 'analyticsVendorConfigs', 'analytics-vendor-configs'); // prettier-ignore
 createTask('ava', 'ava', 'ava');
 createTask('babel-plugin-tests', 'babelPluginTests', 'babel-plugin-tests');
 createTask('build', 'build', 'build');
 createTask('bundle-size', 'bundleSize', 'bundle-size');
 createTask('caches-json', 'cachesJson', 'caches-json');
+createTask('check-analytics-vendors-list', 'checkAnalyticsVendorsList', 'check-analytics-vendors-list'); // prettier-ignore
 createTask('check-exact-versions', 'checkExactVersions','check-exact-versions'); // prettier-ignore
 createTask('check-links', 'checkLinks', 'check-links');
 createTask('check-owners', 'checkOwners', 'check-owners');
 createTask('check-renovate-config','checkRenovateConfig','check-renovate-config'); // prettier-ignore
 createTask('check-sourcemaps', 'checkSourcemaps', 'check-sourcemaps');
 createTask('check-types', 'checkTypes', 'check-types');
+createTask('check-video-interface-list', 'checkVideoInterfaceList', 'check-video-interface-list'); // prettier-ignore
 createTask('cherry-pick', 'cherryPick', 'cherry-pick');
 createTask('clean', 'clean', 'clean');
 createTask('codecov-upload', 'codecovUpload', 'codecov-upload');
@@ -141,14 +75,9 @@ createTask('unit', 'unit', 'unit');
 createTask('update-packages', 'updatePackages', 'update-packages');
 createTask('validator', 'validator', 'validator');
 createTask('validator-webui', 'validatorWebui', 'validator');
-createTask(
-  'check-video-interface-list',
-  'checkVideoInterfaceList',
-  'check-video-interface-list'
-);
-createTask(
-  'check-analytics-vendors-list',
-  'checkAnalyticsVendorsList',
-  'check-analytics-vendors-list'
-);
 createTask('visual-diff', 'visualDiff', 'visual-diff');
+
+/**
+ * Finalize the task runner after all tasks have been created.
+ */
+finalizeRunner();

build-system/babel-config/dep-check-config.js

@@ -16,7 +16,7 @@
 'use strict';
 
 /**
- * Gets the config for babel transforms run during `gulp dep-check`.
+ * Gets the config for babel transforms run during `amp dep-check`.
  *
  * @return {!Object}
  */

build-system/babel-config/eslint-config.js

@@ -16,7 +16,7 @@
 'use strict';
 
 /**
- * Gets the config for babel transforms run during `gulp lint`.
+ * Gets the config for babel transforms run during `amp lint`.
  *
  * @return {!Object}
  */

build-system/babel-config/post-closure-config.js

@@ -18,7 +18,7 @@
 const argv = require('minimist')(process.argv.slice(2));
 
 /**
- * Gets the config for post-closure babel transforms run during `gulp dist --esm`.
+ * Gets the config for post-closure babel transforms run during `amp dist --esm`.
  *
  * @return {!Object}
  */

build-system/babel-config/pre-closure-config.js

@@ -19,7 +19,7 @@ const argv = require('minimist')(process.argv.slice(2));
 const {getReplacePlugin} = require('./helpers');
 
 /**
- * Gets the config for pre-closure babel transforms run during `gulp dist`.
+ * Gets the config for pre-closure babel transforms run during `amp dist`.
  *
  * @return {!Object}
  */