🏗♻️ Split gulpfile.js into separate files

build-system/compile/closure-compile.js

@@ -17,11 +17,9 @@
 
 const closureCompiler = require('google-closure-compiler');
 const colors = require('ansi-colors');
+const {closureNailgunPort} = require('../tasks/nailgun');
 const {highlight} = require('cli-highlight');
 
-// Also used in gulpfile.js
-const NAILGUN_PORT = '2114';
-
 let compilerErrors = '';
 
 /**
@@ -82,7 +80,7 @@ exports.gulpClosureCompile = function(compilerOptions) {
  if (process.platform == 'darwin' || process.platform == 'linux') {
  compilerOptions = [
  '--nailgun-port',
- NAILGUN_PORT,
+ closureNailgunPort,
  'org.ampproject.AmpCommandLineRunner',
  '--',
  ].concat(compilerOptions);

build-system/tasks/build.js

@@ -0,0 +1,104 @@
+/**
+ * Copyright 2019 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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const $$ = require('gulp-load-plugins')();
+const gulp = $$.help(require('gulp'));
+const {
+ buildAlp,
+ buildExaminer,
+ buildWebWorker,
+ compile,
+ compileJs,
+ printConfigHelp,
+ printNobuildHelp,
+} = require('./helpers');
+const {buildExtensions} = require('./extension-helpers');
+const {compileCss} = require('./css');
+const {createCtrlcHandler, exitCtrlcHandler} = require('../ctrlcHandler');
+const {isTravisBuild} = require('../travis');
+const {parseExtensionFlags} = require('./extension-helpers');
+
+const maybeUpdatePackages = isTravisBuild() ? [] : ['update-packages'];
+
+/**
+ * Enables watching for file changes in css, extensions.
+ * @return {!Promise}
+ */
+function watch() {
+ const handlerProcess = createCtrlcHandler('watch');
+ return performBuild(true).then(() => exitCtrlcHandler(handlerProcess));
+}
+
+/**
+ * Main build
+ * @return {!Promise}
+ */
+function build() {
+ const handlerProcess = createCtrlcHandler('build');
+ return performBuild().then(() => exitCtrlcHandler(handlerProcess));
+}
+
+/**
+ * Performs the build steps for gulp build and gulp watch
+ * @param {boolean} watch
+ * @return {!Promise}
+ */
+function performBuild(watch) {
+ process.env.NODE_ENV = 'development';
+ printNobuildHelp();
+ printConfigHelp(watch ? 'gulp watch' : 'gulp build');
+ parseExtensionFlags();
+ return compileCss(watch).then(() => {
+ return Promise.all([
+ polyfillsForTests(),
+ buildAlp({watch}),
+ buildExaminer({watch}),
+ buildWebWorker({watch}),
+ buildExtensions({bundleOnlyIfListedInFiles: !watch, watch}),
+ compile(watch),
+ ]);
+ });
+}
+
+/**
+ * Compile the polyfills script and drop it in the build folder
+ * @return {!Promise}
+ */
+function polyfillsForTests() {
+ return compileJs('./src/', 'polyfills.js', './build/');
+}
+
+/* eslint "google-camelcase/google-camelcase": 0 */
+
+gulp.task('build', 'Builds the AMP library', maybeUpdatePackages, build, {
+ options: {
+ config: ' Sets the runtime\'s AMP_CONFIG to one of "prod" or "canary"',
+ extensions: ' Builds only the listed extensions.',
+ extensions_from: ' Builds only the extensions from the listed AMP(s).',
+ noextensions: ' Builds with no extensions.',
+ },
+});
+gulp.task('watch', 'Watches for changes in files, re-builds when detected',
+ maybeUpdatePackages, watch, {
+ options: {
+ with_inabox: ' Also watch and build the amp-inabox.js binary.',
+ with_shadow: ' Also watch and build the amp-shadow.js binary.',
+ extensions: ' Watches and builds only the listed extensions.',
+ extensions_from: ' Watches and builds only the extensions from the ' +
+ 'listed AMP(s).',
+ noextensions: ' Watches and builds with no extensions.',
+ },
+ });

build-system/tasks/check-types.js

@@ -0,0 +1,111 @@
+/**
+ * Copyright 2019 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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const $$ = require('gulp-load-plugins')();
+const gulp = $$.help(require('gulp'));
+const log = require('fancy-log');
+const {cleanupBuildDir, closureCompile} = require('../compile/compile');
+const {closureNailgunPort, startNailgunServer, stopNailgunServer} = require('./nailgun');
+const {compileCss} = require('./css');
+const {createCtrlcHandler, exitCtrlcHandler} = require('../ctrlcHandler');
+const {extensions, maybeInitializeExtensions} = require('./extension-helpers');
+const {isTravisBuild} = require('../travis');
+
+const maybeUpdatePackages = isTravisBuild() ? [] : ['update-packages'];
+
+/**
+ * Dedicated type check path.
+ * @return {!Promise}
+ */
+function checkTypes() {
+ const handlerProcess = createCtrlcHandler('check-types');
+ process.env.NODE_ENV = 'production';
+ cleanupBuildDir();
+ maybeInitializeExtensions();
+ // Disabled to improve type check performance, since this provides
+ // little incremental value.
+ /*buildExperiments({
+ minify: true,
+ checkTypes: true,
+ preventRemoveAndMakeDir: true,
+ });*/
+ const compileSrcs = [
+ './src/amp.js',
+ './src/amp-shadow.js',
+ './src/inabox/amp-inabox.js',
+ './ads/alp/install-alp.js',
+ './ads/inabox/inabox-host.js',
+ './src/web-worker/web-worker.js',
+ ];
+ const extensionValues = Object.keys(extensions).map(function(key) {
+ return extensions[key];
+ });
+ const extensionSrcs = extensionValues.filter(function(extension) {
+ return !extension.noTypeCheck;
+ }).map(function(extension) {
+ return './extensions/' + extension.name + '/' +
+ extension.version + '/' + extension.name + '.js';
+ }).sort();
+ return compileCss()
+ .then(async() => {
+ await startNailgunServer(closureNailgunPort, /* detached */ false);
+ })
+ .then(() => {
+ if (!isTravisBuild()) {
+ log('Checking types...');
+ }
+ return Promise.all([
+ closureCompile(compileSrcs.concat(extensionSrcs), './dist',
+ 'check-types.js', {
+ include3pDirectories: true,
+ includePolyfills: true,
+ extraGlobs: ['src/inabox/*.js'],
+ typeCheckOnly: true,
+ }),
+ // Type check 3p/ads code.
+ closureCompile(['./3p/integration.js'], './dist',
+ 'integration-check-types.js', {
+ externs: ['ads/ads.extern.js'],
+ include3pDirectories: true,
+ includePolyfills: true,
+ typeCheckOnly: true,
+ }),
+ closureCompile(['./3p/ampcontext-lib.js'], './dist',
+ 'ampcontext-check-types.js', {
+ externs: ['ads/ads.extern.js'],
+ include3pDirectories: true,
+ includePolyfills: true,
+ typeCheckOnly: true,
+ }),
+ closureCompile(['./3p/iframe-transport-client-lib.js'], './dist',
+ 'iframe-transport-client-check-types.js', {
+ externs: ['ads/ads.extern.js'],
+ include3pDirectories: true,
+ includePolyfills: true,
+ typeCheckOnly: true,
+ }),
+ ]);
+ }).then(() => {
+ if (isTravisBuild()) {
+ // New line after all the compilation progress dots on Travis.
+ console.log('\n');
+ }
+ }).then(async() => {
+ await stopNailgunServer(closureNailgunPort);
+ }).then(() => exitCtrlcHandler(handlerProcess));
+}
+
+gulp.task('check-types', 'Check JS types', maybeUpdatePackages, checkTypes);

build-system/tasks/css.js

@@ -0,0 +1,125 @@
+/**
+ * Copyright 2019 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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+const $$ = require('gulp-load-plugins')();
+const fs = require('fs-extra');
+const gulp = $$.help(require('gulp'));
+const {
+ endBuildStep,
+ mkdirSync,
+ printNobuildHelp,
+ toPromise,
+} = require('./helpers');
+const {buildExtensions, extensions} = require('./extension-helpers');
+const {isTravisBuild} = require('../travis');
+const {jsifyCssAsync} = require('./jsify-css');
+
+const maybeUpdatePackages = isTravisBuild() ? [] : ['update-packages'];
+
+/**
+ * Entry point for 'gulp css'
+ * @return {!Promise}
+ */
+function css() {
+ printNobuildHelp();
+ return compileCss();
+}
+
+const cssEntryPoints = [
+ {
+ path: 'amp.css',
+ outJs: 'css.js',
+ outCss: 'v0.css',
+ },
+ {
+ path: 'video-autoplay.css',
+ outJs: 'video-autoplay.css.js',
+ outCss: 'video-autoplay.css',
+ },
+];
+
+/**
+ * Compile all the css and drop in the build folder
+ * @param {boolean} watch
+ * @param {boolean=} opt_compileAll
+ * @return {!Promise}
+ */
+function compileCss(watch, opt_compileAll) {
+ if (watch) {
+ $$.watch('css/**/*.css', function() {
+ compileCss();
+ });
+ }
+
+ /**
+ * Writes CSS to build folder
+ *
+ * @param {string} css
+ * @param {string} originalCssFilename
+ * @param {string} jsFilename
+ * @param {string} cssFilename
+ * @return {Promise}
+ */
+ function writeCss(css, originalCssFilename, jsFilename, cssFilename) {
+ return toPromise(gulp.src(`css/${originalCssFilename}`)
+ .pipe($$.file(jsFilename, 'export const cssText = ' +
+ JSON.stringify(css)))
+ .pipe(gulp.dest('build'))
+ .on('end', function() {
+ mkdirSync('build');
+ mkdirSync('build/css');
+ fs.writeFileSync(`build/css/${cssFilename}`, css);
+ }));
+ }
+
+ /**
+ * @param {string} path
+ * @param {string} outJs
+ * @param {string} outCss
+ */
+ function writeCssEntryPoint(path, outJs, outCss) {
+ const startTime = Date.now();
+
+ return jsifyCssAsync(`css/${path}`)
+ .then(css => writeCss(css, path, outJs, outCss))
+ .then(() => {
+ endBuildStep('Recompiled CSS in', path, startTime);
+ });
+ }
+
+ // Used by `gulp test --local-changes` to map CSS files to JS files.
+ fs.writeFileSync('EXTENSIONS_CSS_MAP', JSON.stringify(extensions));
+
+
+ let promise = Promise.resolve();
+
+ cssEntryPoints.forEach(entryPoint => {
+ const {path, outJs, outCss} = entryPoint;
+ promise = promise.then(() => writeCssEntryPoint(path, outJs, outCss));
+ });
+
+ return promise.then(() => buildExtensions({
+ bundleOnlyIfListedInFiles: false,
+ compileOnlyCss: true,
+ compileAll: opt_compileAll,
+ }));
+}
+
+exports.compileCss = compileCss;
+exports.cssEntryPoints = cssEntryPoints;
+
+gulp.task('css', 'Recompile css to build directory', maybeUpdatePackages, css);