build: zipper revival (#3319)

Author: Foxandxss

gulpfile.js

@@ -46,7 +46,7 @@ var LIVE_EXAMPLES_PATH = path.join(RESOURCES_PATH, 'live-examples');
 var STYLES_SOURCE_PATH = path.join(TOOLS_PATH, 'styles-builder/less');
 
 var docShredder = require(path.resolve(TOOLS_PATH, 'doc-shredder/doc-shredder'));
-var exampleZipper = require(path.resolve(TOOLS_PATH, '_example-zipper/exampleZipper'));
+var ExampleZipper = require(path.resolve(TOOLS_PATH, 'example-zipper/exampleZipper'));
 var regularPlunker = require(path.resolve(TOOLS_PATH, 'plunker-builder/regularPlunker'));
 var embeddedPlunker = require(path.resolve(TOOLS_PATH, 'plunker-builder/embeddedPlunker'));
 var fsUtils = require(path.resolve(TOOLS_PATH, 'fs-utils/fsUtils'));
@@ -572,9 +572,7 @@ gulp.task('build-and-serve', ['build-docs'], function (cb) {
   watchAndSync({localFiles: true}, cb);
 });
 
-gulp.task('build-docs', ['build-devguide-docs', 'build-api-docs', 'build-plunkers']);
-// Stop zipping examples Feb 28, 2016
-//gulp.task('build-docs', ['build-devguide-docs', 'build-api-docs', 'build-plunkers', '_zip-examples']);
+gulp.task('build-docs', ['build-devguide-docs', 'build-api-docs', 'build-plunkers', '_zip-examples']);
 
 gulp.task('build-api-docs', ['build-js-api-docs', 'build-ts-api-docs']);
 
@@ -787,8 +785,8 @@ gulp.task('_shred-clean-api', function(cb) {
 });
 
 gulp.task('_zip-examples', function() {
-  exampleZipper.zipExamples(_devguideShredOptions.examplesDir, _devguideShredOptions.zipDir);
-  exampleZipper.zipExamples(_apiShredOptions.examplesDir, _apiShredOptions.zipDir);
+  new ExampleZipper(_devguideShredOptions.examplesDir, _devguideShredOptions.zipDir);
+  // exampleZipper.zipExamples(_apiShredOptions.examplesDir, _apiShredOptions.zipDir);
 });
 
 

public/docs/_examples/cli-quickstart/ts/zipper.json

@@ -0,0 +1,10 @@
+{
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[0-9].*",
+    ".angular-cli.json",
+    "protractor.conf.js"
+  ],
+  "removeSystemJsConfig": true
+}

public/docs/_examples/package.json

@@ -4,9 +4,31 @@
   "private": true,
   "description": "Master package.json, the superset of all dependencies for all of the _example package.json files. See _boilerplate/package.json for example npm scripts.",
   "scripts": {
-    "http-server": "http-server",
-    "protractor": "protractor",
-    "webdriver:update": "webdriver-manager update --standalone false --gecko false"
+    "build": "tsc -p src/",
+    "build:watch": "tsc -p src/ -w",
+    "build:e2e": "tsc -p e2e/",
+    "serve": "lite-server -c=bs-config.json",
+    "prestart": "npm run build",
+    "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
+    "protractor": "protractor protractor.config.js",
+    "pretest": "npm run build",
+    "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
+    "pretest:once": "npm run build",
+    "test:once": "karma start karma.conf.js --single-run",
+    "lint": "tslint ./src/**/*.ts -t verbose",
+
+    "build:upgrade": "tsc",
+    "serve:upgrade": "http-server",
+    "build:cli": "ng build --no-progress",
+    "serve:cli": "http-server dist/",
+    "build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js",
+    "serve:aot": "lite-server -c bs-config.aot.json",
+    "start:webpack": "webpack-dev-server --inline --progress --port 8080",
+    "test:webpack": "karma start karma.webpack.conf.js",
+    "build:webpack": "rimraf dist && webpack --config config/webpack.prod.js --bail",
+    "build:babel": "babel src -d src --extensions \".es6\" --source-maps",
+    "copy-dist-files": "node ./copy-dist-files.js",
+    "i18n": "ng-xi18n"
   },
   "keywords": [],
   "author": "",

public/docs/_examples/webpack/ts/zipper.json

@@ -0,0 +1,11 @@
+{
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[0-9].*",
+    "config/**/*",
+    "webpack.config.js",
+    "karma.webpack.conf.js"
+  ],
+  "removeSystemJsConfig": true
+}

public/docs/ts/latest/cli-quickstart.jade

@@ -23,6 +23,7 @@ include _util-fns
   3. [Serve](#serve) the application
   4. [Edit](#first-component) the application
 
+  And you can also <a href="/resources/zips/cli-quickstart/cli-quickstart.zip">download the example.</a>
 
 .l-main-section
 h2#devenv Step 1. Set up the Development Environment

public/docs/ts/latest/guide/change-log.jade

@@ -5,6 +5,10 @@ block includes
   The Angular documentation is a living document with continuous improvements.
   This log calls attention to recent significant changes.
 
+  ## NEW: Downloadable examples for each guide (2017-02-28)
+  Now you can download the sample code for any guide and run it locally.
+  Look for the new download links next to the "live example" links.
+
   ## Template Syntax/Structural Directives: refreshed (2017-02-06)
   The [_Template-Syntax_](template-syntax.html) and [_Structural Directives_](structural-directives.html)
   guides were significantly revised for clarity, accuracy, and current recommended practices.

public/docs/ts/latest/guide/index.jade

@@ -72,11 +72,14 @@ table(width="100%")
   You can reuse these snippets in your applications.
 
   Look for a link to a running version of that sample, often near the top of the page,
-  such as this <live-example name="architecture"></live-example> from the [Architecture](architecture.html) page.
+  such as this <live-example nodownload name="architecture"></live-example> from the [Architecture](architecture.html) page.
   <span if-docs="ts">
   The link launches a browser-based, code editor where you can inspect, modify, save, and download the code.
   </span>
 
+  Alternatively, you can run the example locally, next to those `live-example` links you have a <a href="/resources/zips/architecture/architecture.zip">download link</a>.
+  Just download, unzip, run `npm install` to install the dependencies and run it with `npm start`.
+
   ## Reference pages
 
   * The [Cheat Sheet](cheatsheet.html) lists Angular syntax for common scenarios.

public/docs/ts/latest/guide/webpack.jade

@@ -32,7 +32,9 @@ style.
   [Trying it out](#try)
 
   [Conclusions](#conclusions)
-    
+
+  You can also <a href="/resources/zips/webpack/webpack.zip">download the final result.</a>
+
 .l-main-section
 <a id="what-is-webpack"></a>
 :marked

public/docs/ts/latest/quickstart.jade

@@ -10,7 +10,7 @@ block includes
 block qs-src-online-and-local
   .l-sub-section
     :marked
-      Try this **<live-example>QuickStart example on Plunker</live-example>** without installing anything.
+      Try this **<live-example noDownload>QuickStart example on Plunker</live-example>** without installing anything.
       Try it locally with the [***QuickStart seed***](guide/setup.html "Setup for local development with the QuickStart seed")
       and prepare for development of a real Angular application.
 

public/resources/js/directives/live-example.js

@@ -56,11 +56,12 @@ angularIO.directive('liveExample', ['$location', function ($location) {
 
   function span(text) { return '<span>' + text + '</span>'; }
 
-  function embeddedTemplate(src, img) {
+  function embeddedTemplate(src, img, zipHref) {
     return '<div ng-if="embeddedShow">' +
         '<iframe frameborder="0" width="100%" height="100%" src="' + src + '"></iframe>' +
       '</div>' +
-      '<img ng-click="toggleEmbedded()" ng-if="!embeddedShow" src="' + img + '" alt="plunker">';
+      '<img ng-click="toggleEmbedded()" ng-if="!embeddedShow" src="' + img + '" alt="plunker">' +
+      '<p>You can also <a href="' + zipHref +'">download this example.</p>';
   }
 
   return {
@@ -72,24 +73,29 @@ angularIO.directive('liveExample', ['$location', function ($location) {
       if (attrs['title'] == undefined) { tElement[0].setAttribute('title', text); } // set default title (tooltip)
       var ex = attrs.name || NgIoUtil.getExampleName($location);
       var embedded = attrs.hasOwnProperty('embedded');
+      var noDownload = attrs.hasOwnProperty('nodownload') || attrs.hasOwnProperty('noDownload');
       var flatStyle = attrs.hasOwnProperty('flatstyle') || attrs.hasOwnProperty('flatStyle');
       var embeddedStyle = embedded || attrs.hasOwnProperty('embeddedstyle') || attrs.hasOwnProperty('embeddedStyle');
       var plnkr = (embeddedStyle || !flatStyle) ? 'eplnkr' : 'plnkr';
+      var zipHref = ex;
       var imageBase  = '/resources/images/';
       var defaultImg = 'plunker/placeholder.png';
 
       if (attrs.plnkr) {
         plnkr = attrs.plnkr + '.' + plnkr;
+        zipHref = attrs.plnkr + '.' + zipHref;
       }
 
       var isForDart = attrs.lang === 'dart' || NgIoUtil.isDoc($location, 'dart');
       var isForJs = attrs.lang === 'js' || NgIoUtil.isDoc($location, 'js');
       var exLang = isForDart ? 'dart' : isForJs ? 'js' : 'ts';
 
+      zipHref = '/resources/zips/' + ex + '/' + zipHref + '.zip';
+
       if (embedded && !isForDart) {
         href = '/resources/live-examples/' + ex + '/' + exLang + '/' + plnkr + '.html';
         img = imageBase + (attrs.img || defaultImg);
-        template = embeddedTemplate(href, img);
+        template = embeddedTemplate(href, img, zipHref);
       } else {
         var href = isForDart
           ? 'http://angular-examples.github.io/' + ex
@@ -98,6 +104,10 @@ angularIO.directive('liveExample', ['$location', function ($location) {
         // Link to live example.
         var template = a(text, { href: href, target: '_blank' });
 
+        if (!noDownload) {
+          template += ' / ' + a('downloadable example', { href: zipHref, target: '_blank' });
+        }
+
         // The hosted example and sources are in different locations for Dart.
         // Also show link to sources for Dart, unless noSource is specified.
         if (isForDart && !attrs.hasOwnProperty('nosource')) {