gulpfile.js

/**
 * Copyright 2015 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.
 */

var gulp = require('gulp');
var del = require('del');
var file = require('gulp-file');
var gulpWatch = require('gulp-watch');
var fs = require('fs-extra');
var sourcemaps = require('gulp-sourcemaps');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var browserify = require('browserify');
var watchify = require('watchify');
var uglify = require('gulp-uglify');
var wrap = require('gulp-wrap');
var rename = require('gulp-rename');
var replace = require('gulp-replace');
var babel = require('babelify');
var postcss = require('postcss');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
require('./build-system/tasks');

// NOTE: see https://github.com/ai/browserslist#queries for `browsers` list
var cssprefixer = autoprefixer({
  browsers: [
    'last 5 ChromeAndroid versions',
    'last 5 iOS versions',
    'last 3 FirefoxAndroid versions',
    'last 5 Android versions',
    'last 2 ExplorerMobile versions',
    'last 2 OperaMobile versions',
    'last 2 OperaMini versions'
  ]
});

cssnano = cssnano({
  convertValues: false,
  zindex: false
});

// Used to e.g. references the ads binary from the runtime to get
// version lock.
var internalRuntimeVersion = new Date().getTime();

function buildExtensions(options) {
  // We pass watch further in to have browserify watch the built file
  // and update it if any of its required deps changed.
  // Each extension and version must be listed individually here.
  buildExtension('amp-anim', '0.1', false, options);
  buildExtension('amp-audio', '0.1', false, options);
  buildExtension('amp-carousel', '0.1', true, options);
  buildExtension('amp-fit-text', '0.1', true, options);
  buildExtension('amp-iframe', '0.1', false, options);
  buildExtension('amp-image-lightbox', '0.1', true, options);
  buildExtension('amp-instagram', '0.1', false, options);
  buildExtension('amp-lightbox', '0.1', false, options);
  /**
   * @deprecated `amp-slides` is deprecated and will be deleted before 1.0.
   * Please see {@link AmpCarousel} with `type=slides` attribute instead.
   */
  buildExtension('amp-slides', '0.1', false, options);
  buildExtension('amp-twitter', '0.1', false, options);
  buildExtension('amp-youtube', '0.1', false, options);
}

function clean(done) {
  del(['dist', 'dist.3p', 'build', 'examples.build'], done);
}

function polyfillsForTests() {
  compileJs('./src/', 'polyfills.js', './build/');
}

function compile(watch, shouldMinify) {
  compileCss();
  compileJs('./src/', 'amp.js', './dist', {
    minifiedName: 'v0.js',
    watch: watch,
    minify: shouldMinify,
    // If there is a sync JS error during initial load,
    // at least try to unhide the body.
    wrapper: 'try{<%= contents %>}catch(e){setTimeout(function(){' +
        'document.body.style.opacity=1},1000);throw e};'
  });
  compileJs('./3p/', 'integration.js', './dist.3p/' + internalRuntimeVersion, {
    minifiedName: 'f.js',
    watch: watch,
    minify: shouldMinify
  });
  thirdPartyBootstrap(watch, shouldMinify);
}


function compileCss() {
  console.info('Recompiling CSS.');
  return jsifyCssPromise('css/amp.css').then(function(css) {
    return gulp.src('css/**.css')
        .pipe(file('css.js', 'export const cssText = ' + css))
        .pipe(gulp.dest('build'));
  });
}

function jsifyCssPromise(filename) {
  var css = fs.readFileSync(filename, 'utf8');
  var transformers = [cssprefixer, cssnano];
  // Remove copyright comment. Crude hack to get our own copyright out
  // of the string.
  return postcss(transformers).process(css.toString())
      .then(function(result) {
        result.warnings().forEach(function(warn) {
          console.warn(warn.toString());
        });
      var css = result.css;
      return JSON.stringify(css + '\n/*# sourceURL=/' + filename + '*/');
    });
}

function watch() {
  gulpWatch('css/**/*.css', function() {
    compileCss();
  });
  buildExtensions({
    watch: true
  });
  buildExamples(true);
  return compile(true);
}

/**
 * Copies extensions from
 * extensions/$name/$version/$name.js
 * to
 * dist/v0/$name-$version.js
 *
 * Optionally copies the CSS at extensions/$name/$version/$name.css into the
 * JS file marked with $CSS$ as a third argument to the registerElement call.
 *
 * @param {string} name Name of the extension. Must be the sub directory in
 *     the extensions directory and the name of the JS and optional CSS file.
 * @param {string} version Version of the extension. Must be identical to
 *     the sub directory inside the extension directory
 * @param {boolean} hasCss Whether there is a CSS file for this extension.
 * @param {!Object} options
 * @return {!Object} Gulp object
 */
function buildExtension(name, version, hasCss, options) {
  options = options || {};
  console.log('Bundling ' + name);
  var path = 'extensions/' + name + '/' + version;
  var jsPath = path + '/' + name + '.js';
  // Building extensions is a 2 step process because of the renaming
  // and CSS inlining. This watcher watches the original file, copies
  // it to the destination and adds the CSS.
  if (options.watch) {
    // Do not set watchers agains when we get called by the watcher.
    var copy = Object.create(options);
    copy.watch = false;
    gulpWatch(path + '/*', function() {
      buildExtension(name, version, hasCss, copy);
    });
  }
  var js = fs.readFileSync(jsPath, 'utf8');
  if (hasCss) {
    return jsifyCssPromise(path + '/' + name + '.css').then(function(css) {
      console.assert(/\$CSS\$/.test(js),
          'Expected to find $CSS$ marker in extension JS: ' + jsPath);
      js = js.replace(/\$CSS\$/, css);
      return buildExtensionJs(js, path, name, version, options);
    });
  } else {
    return buildExtensionJs(js, path, name, version, options);
  }
}

function buildExtensionJs(js, path, name, version, options) {
  var builtName = name + '-' + version + '.max.js';
  var minifiedName = name + '-' + version + '.js';
  var latestName = name + '-latest.js';
  return gulp.src(path + '/*.js')
      .pipe(file(builtName, js))
      .pipe(gulp.dest('build/all/v0/'))
      .on('end', function() {
        compileJs('build/all/v0/', builtName, 'dist/v0/', {
          watch: options.watch,
          minify: options.minify,
          minifiedName: minifiedName,
          latestName: latestName,
          wrapper: '(window.AMP = window.AMP || [])' +
              '.push(function(AMP) {<%= contents %>\n});',
        });
      });
}

function build() {
  polyfillsForTests();
  buildExtensions();
  buildExamples(false);
  return compile();
}

gulp.task('css', compileCss);
gulp.task('extensions', buildExtensions);
gulp.task('clean', clean);
gulp.task('build', build);
gulp.task('watch', watch);
gulp.task('minify', function() {
  process.env.NODE_ENV = 'production';
  compile(false, true);
  buildExtensions({minify: true});
});

gulp.task('default', ['watch']);

function buildExamples(watch) {
  if (watch) {
    gulpWatch('examples/*.html', function() {
     buildExamples(false);
    });
  }

  // Also update test-example-validation.js
  buildExample('ads.amp.html');
  buildExample('article.amp.html');
  buildExample('article-metadata/json-ld.amp.html');
  buildExample('article-metadata/microdata.amp.html');
  buildExample('everything.amp.html');
  buildExample('instagram.amp.html');
  buildExample('released.amp.html');
  buildExample('twitter.amp.html');
}

/**
 * Copies an examples file to examples.build folder and changes all
 * JS references to local / minified copies.
 * @param {string} name HTML file in examples/
 */
function buildExample(name) {
  var input = 'examples/' + name;
  console.log('Processing ' + name);
  var html = fs.readFileSync(input, 'utf8');
  var max = html;
  max = max.replace(/\.js/g, '.max.js');
  max = max.replace('https://cdn.ampproject.org/v0.max.js', '../dist/amp.js');
  max = max.replace(/https:\/\/cdn.ampproject.org\/v0\//g, '../dist/v0/');
  gulp.src(input)
      .pipe(file(name.replace('.html', '.max.html'),max))
      .pipe(gulp.dest('examples.build/'));

  var min = max;
  min = min.replace(/\.max\.js/g, '.js');
  min = min.replace('../dist/amp.js', '../dist/v0.js');
  gulp.src(input)
      .pipe(file(name.replace('.html', '.min.html'), min))
      .pipe(gulp.dest('examples.build/'));
}

function thirdPartyBootstrap(watch, shouldMinify) {
  var input = '3p/frame.max.html';
  if (watch) {
    gulpWatch(input, function() {
      thirdPartyBootstrap(false);
    });
  }
  console.log('Processing ' + input);
  var html = fs.readFileSync(input, 'utf8');
  var min = html;
  min = min.replace(/\.\/integration\.js/g, './f.js');
  gulp.src(input)
      .pipe(file('frame.html', min))
      .pipe(gulp.dest('dist.3p/' + internalRuntimeVersion))
      .on('end', function() {
        var aliasToLatestBuild = 'dist.3p/current';
        if (shouldMinify) {
          aliasToLatestBuild += '-min';
        }
        if (fs.existsSync(aliasToLatestBuild)) {
          fs.unlinkSync(aliasToLatestBuild);
        }
        fs.symlinkSync(
            './' + internalRuntimeVersion,
            aliasToLatestBuild,
            'dir');
      });
}


function compileJs(srcDir, srcFilename, destDir, options) {
  options = options || {};
  var bundler = browserify(srcDir + srcFilename, { debug: true })
      .transform(babel);
  if (options.watch) {
    bundler = watchify(bundler);
  }

  var wrapper = options.wrapper || '<%= contents %>';

  function rebundle() {
    bundler.bundle()
      .on('error', function(err) { console.error(err); this.emit('end'); })
      .pipe(source(srcFilename))
      .pipe(buffer())
      .pipe(replace(/\$internalRuntimeVersion\$/g, internalRuntimeVersion))
      .pipe(wrap(wrapper))
      .pipe(sourcemaps.init({ loadMaps: true }))
      .pipe(sourcemaps.write('./'))
      .pipe(gulp.dest(destDir));
  }

  if (options.watch) {
    bundler.on('update', function() {
      console.log('-> bundling ' + srcDir + '...');
      rebundle();
    });
  }

  function minify() {
    console.log('Minifying ' + srcFilename);
    bundler.bundle()
      .on('error', function(err) { console.error(err); this.emit('end'); })
      .pipe(source(srcFilename))
      .pipe(buffer())
      .pipe(replace(/\$internalRuntimeVersion\$/g, internalRuntimeVersion))
      .pipe(sourcemaps.init({ loadMaps: true }))
      .pipe(wrap(wrapper))
      .pipe(uglify({
        preserveComments: 'some'
      }))
      .pipe(rename(options.minifiedName))
      .pipe(sourcemaps.write('./'))
      .pipe(gulp.dest(destDir))
      .on('end', function() {
        fs.writeFileSync(destDir + '/version.txt', internalRuntimeVersion);
        if (options.latestName) {
          fs.copySync(
              destDir + '/' + options.minifiedName,
              destDir + '/' + options.latestName);
        }
      });
  }

  if (options.minify) {
    minify();
  } else {
    rebundle();
  }
}