chore(demo): update demo app to use built 'ng2-sharebuttons' package …

…from `dist/` folder - add a gulp task `link` to create a symlink from 'ng2-sharebuttons' package to `dist/` folder - add a dependency to 'ng2-sharebuttons' in the demo project - add a `postinstall` hook to `demo/package.json` to automatically use the 'linked' version instead of the one from NPM - fix `baseUrl` in `demo/src/index.html` - fix logos links in HeaderComponent
Sathishchary · Jan 15, 2017 · 1b75ed8 · 1b75ed8
1 parent 2e0634a
commit 1b75ed8
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 34 deletions.
diff --git a/demo/package.json b/demo/package.json
@@ -8,7 +8,8 @@
     "lint": "tslint \"src/**/*.ts\"",
     "test": "ng test",
     "pree2e": "webdriver-manager update",
-    "e2e": "protractor"
+    "e2e": "protractor",
+    "postinstall": "npm link ng2-sharebuttons"
   },
   "private": true,
   "dependencies": {
@@ -20,9 +21,10 @@
     "@angular/platform-browser": "^2.3.1",
     "@angular/platform-browser-dynamic": "^2.3.1",
     "@angular/router": "^3.3.1",
-    "core-js": "^2.4.1",
     "animate.css": "^3.5.2",
+    "core-js": "^2.4.1",
     "font-awesome": "*",
+    "ng2-sharebuttons": "^1.1.5",
     "normalize.css": "*",
     "prismjs": "^1.5.1",
     "rxjs": "^5.0.1",
@@ -47,4 +49,4 @@
     "tslint": "^4.0.2",
     "typescript": "~2.0.3"
   }
-}
+}
diff --git a/demo/src/app/header/header.component.ts b/demo/src/app/header/header.component.ts
@@ -7,22 +7,19 @@ import { Component, OnInit } from '@angular/core';
 })
 export class HeaderComponent implements OnInit {
 
-  ngShareButtonLogo = prefixRepo('../../assets/img/logo.svg');
-  fbLogo = prefixRepo('../../assets/img/share/facebook.svg');
-  twttLogo = prefixRepo('../../assets/img/share/twitter.svg');
-  pintLogo = prefixRepo('../../assets/img/share/pinterest.svg');
-  stumbleLogo = prefixRepo('../../assets/img/share/stumbleupon.svg');
-  googleLogo = prefixRepo('../../assets/img/share/google-plus.svg');
-  tumblrLogo = prefixRepo('../../assets/img/share/tumblr.svg');
-  redditLogo = prefixRepo('../../assets/img/share/reddit.svg');
-  inLogo = prefixRepo('../../assets/img/share/linkedin.svg');
+  ngShareButtonLogo = '../../assets/img/logo.svg';
+  fbLogo = '../../assets/img/share/facebook.svg';
+  twttLogo = '../../assets/img/share/twitter.svg';
+  pintLogo = '../../assets/img/share/pinterest.svg';
+  stumbleLogo = '../../assets/img/share/stumbleupon.svg';
+  googleLogo = '../../assets/img/share/google-plus.svg';
+  tumblrLogo = '../../assets/img/share/tumblr.svg';
+  redditLogo = '../../assets/img/share/reddit.svg';
+  inLogo = '../../assets/img/share/linkedin.svg';
 
   constructor() { }
 
   ngOnInit() {
   }
 
 }
-var prefixRepo = (path) => {
-  return  'ng2-sharebuttons' + path;
-};
diff --git a/demo/src/index.html b/demo/src/index.html
@@ -4,7 +4,7 @@
 <head>
   <meta charset="utf-8">
   <title>Angular Share buttons</title>
-  <base href="/ng2-sharebuttons/">
+  <base href="/">
   <!--ng2-sharebuttons/-->
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
@@ -32,10 +32,10 @@
 
   <script>
     (function (i, s, o, g, r, a, m) {
-    i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
-      (i[r].q = i[r].q || []).push(arguments)
-    }, i[r].l = 1 * new Date(); a = s.createElement(o),
-      m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
+      i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
+        (i[r].q = i[r].q || []).push(arguments)
+      }, i[r].l = 1 * new Date(); a = s.createElement(o),
+        m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
     })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
     ga('create', 'UA-81405917-3', 'auto');
     ga('send', 'pageview');

diff --git a/gulpfile.js b/gulpfile.js
@@ -26,6 +26,7 @@ const stripInlineComments = require('postcss-strip-inline-comments');
 
 /** External command runner */
 const exec = require('child_process').exec;
+const process = require('process');
 
 /**OS Access */
 const os = require('os');
@@ -70,6 +71,20 @@ function startKarmaServer(isTddMode, done) {
     new karmaServer(config, done).start();
 }
 
+function execCallback(gulpDone) {
+    return (error, stdout, stderr) => {
+        if (stderr) {
+            gutil.log(gutil.colors.red(stderr));
+        }
+        if (stdout) {
+            gutil.log(gutil.colors.green(stdout));
+        }
+        // execute callback when its done 
+        if (gulpDone) {
+            gulpDone();
+        }
+    }
+}
 // Clean Tasks
 gulp.task('clean:dist', () => {
     return del(config.outputDir);
@@ -153,7 +168,7 @@ gulp.task('test:watch', (cb) => {
     startKarmaServer(true, cb);
 });
 
-// Prepare 'dist' folder publication to NPM
+// Prepare 'dist' folder for publication to NPM
 gulp.task('npm', ['compile-ts', 'test'], (cb) => {
     var pkgJson = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
     var targetPkgJson = {};
@@ -187,21 +202,25 @@ gulp.task('npm', ['compile-ts', 'test'], (cb) => {
 // Publish 'dist' folder to NPM
 gulp.task('publish', ['npm'], (done) => {
     // run npm publish terminal command to publish the 'dist' folder only
-    exec(`npm publish ${config.outputDir}`,
-        (error, stdout, stderr) => {
-            if (stderr) {
-                gutil.log(gutil.colors.red(stderr));
-            } else if (stdout) {
-                gutil.log(gutil.colors.green(stdout));
-            }
-            // execute callback when its done 
-            if (done) {
-                done();
-            }
-        }
-    );
+    exec(`npm publish ${config.outputDir}`, execCallback(done));
 });
 
+// Link 'dist' folder (create a local 'ng2-sharebuttons' package that symlinks to it)
+// This way, we can have the demo project declare a dependency on 'ng2-sharebuttons' (as it should)
+// and, thanks to 'npm link ng2-sharebuttons' on demo project, be sure to always use the latest built
+// version of the library ( which is in 'dist/' folder)
+gulp.task('link', ['npm'], (done) => {
+    try {
+
+        process.chdir(`${config.outputDir}`); // move to 'dist' folder
+        exec('npm link', execCallback(done)); // run npm link from there
+    }
+    catch (err) {
+        gutil.log(gutil.colors.red(`Cannot move to folder: ${config.outputDir}, error: ${err}`));
+    }
+});
+
+
 // Just build the 'dist' folder (without publishing it to NPM)
 gulp.task('build', ['npm']);