Merge pull request #81 from NerdCats/prod-build

fixes #73
NerdCats · Jun 23, 2016 · 433ef96 · 433ef96
2 parents 5dbd0ab + 241b6be
commit 433ef96
Show file tree

Hide file tree

Showing 5 changed files with 141 additions and 19 deletions.
diff --git a/.gitignore b/.gitignore
@@ -7,3 +7,6 @@ tests/**/*.js.map
 dist/
 npm-debug.log
 typings/
+tmp/
+outfile.js
+prod
diff --git a/gulpfile.js b/gulpfile.js
@@ -5,14 +5,20 @@ const del = require('del');
 const runSequence = require('run-sequence');
 const minimist = require('minimist');
 var args = minimist(process.argv.slice(2));
+var systemBuilder = require('systemjs-builder');
+var useref = require('gulp-useref');
+var gulpif = require('gulp-if');
+var cssnano = require('gulp-cssnano');
+var rev = require('gulp-rev');
+var revReplace = require('gulp-rev-replace');
 
 // Loading typescript requirements
 const typescript = require('gulp-typescript');
 const tscConfig = require('./tsconfig.json');
 const sourcemaps = require('gulp-sourcemaps');
 const tslint = require('gulp-tslint');
 var watch = require('gulp-watch');
-
+var inject = require('gulp-inject');
 // npm
 var install = require("gulp-install");
 
@@ -26,6 +32,16 @@ gulp.task('clean', function (cb) {
     });
 });
 
+/**
+ * Remove prod directory.
+ */
+gulp.task('clean:prod', function (cb) {
+    del(["prod"]).then(function (paths) {
+        console.log('Deleted files and folders:\n', paths.join('\n'));
+        cb();
+    });
+});
+
 /**
  * Compile TypeScript sources and create sourcemaps in build directory.
  */
@@ -120,7 +136,7 @@ gulp.task('watch-ts', function () {
 
 
 /**
- * The build script
+ * The development build script
  */
 
 gulp.task('build', function (callback) {
@@ -130,6 +146,87 @@ gulp.task('build', function (callback) {
         callback);
 });
 
+/**
+ * The system-js builder build script
+ */
+
+gulp.task('build-systemjs', function (done) {
+    var builder = new systemBuilder("./dist", "systemjs.config.js");
+
+    builder.buildStatic('app/main.js', 'prod/app/bundle.js', {
+        normalize: true,
+        minify: true,
+        mangle: true,
+        runtime: false,
+        globalDefs: { DEBUG: false, ENV: 'production' }
+    }
+    )
+        .then(function () {
+            console.log('Build complete');
+            done();
+        })
+        .catch(function (ex) {
+            console.log('error', ex);
+            done('Build failed.');
+        });
+});
+
+/**
+ * The production asset move script
+ */
+gulp.task('build:prod-asset', function (done) {
+
+    gulp.src(['app/**/*.html'], { base: './' })
+        .pipe(gulp.dest('prod/'));
+
+    gulp.src(['*.css'], { base: './' })
+        .pipe(cssnano())
+        .pipe(gulp.dest('prod/'));
+
+    gulp.src('app/**/*.css', { base: './' })
+        .pipe(cssnano())
+        .pipe(gulp.dest('prod/'));
+
+    gulp.src('assets/' + '**/*.*', { base: './' })
+        .pipe(gulp.dest('prod/'));
+
+    gulp.src(['dist/lib/font-awesome/fonts/*.*'])
+        .pipe(gulp.dest('prod/fonts'));
+
+    gulp.src('dist/index.html')
+        .pipe(useref())
+        .pipe(gulpif('*.css', cssnano()))
+        .pipe(gulpif('!*.html', rev()))
+        .pipe(revReplace())
+        .pipe(gulp.dest('prod/'))
+        .on('finish', done);
+});
+
+gulp.task('build:inject-index', function (done) {
+    var bundleSources = gulp.src('./prod/app/bundle.js', { read: false });
+    gulp.src('./prod/index.html')
+        .pipe(inject(bundleSources, {ignorePath: 'prod'}))
+        .pipe(gulp.dest('prod/'))
+        .on('finish', done);
+});
+
+/**
+ * The production build script
+ */
+
+gulp.task('build:prod', function (callback) {
+    runSequence('clean',
+        'clean:prod',
+        'compile',
+        'copy:libs',
+        'copy:assets',
+        'build-systemjs',
+        'build:prod-asset',
+        'build:inject-index',
+        callback);
+});
+
+
 /**
  * The deploy script
  */

diff --git a/index.html b/index.html
@@ -11,6 +11,8 @@
     <link rel="shortcut icon" href="assets/img/favicon.png">
     <title>Loading ..</title>
 
+    <!-- build:js assets/lib.js -->
+
     <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
     <script src="lib/systemjs/dist/system-polyfills.js"></script>
@@ -19,7 +21,15 @@
     <script src="lib/reflect-metadata/Reflect.js"></script>
     <script src="lib/systemjs/dist/system.src.js"></script>
 
+    <!-- Jquery for bootstrap js -->
+    <script src="lib/jquery/dist/jquery.min.js"></script>
+    <!-- bootstrap js -->
+    <script src="lib/bootstrap/dist/js/bootstrap.js"></script>
+
+    <script src="assets/pace/pace.js"></script>
+    <!-- endbuild -->
 
+    <!-- build:css assets/bundle.css -->
     <!-- Fonts from Google Fonts -->
     <link href='http://fonts.googleapis.com/css?family=Roboto:300,400,900' rel='stylesheet' type='text/css'>
     <!-- Bootstrap core CSS -->
@@ -29,33 +39,31 @@
     <!-- RDash CSS -->
     <link rel="stylesheet" href="lib/rdash-ui/dist/css/rdash.css">
 
-    <!-- Jquery for bootstrap js -->
-    <script src="lib/jquery/dist/jquery.min.js"></script>
-    <!-- bootstrap js -->
-    <script src="lib/bootstrap/dist/js/bootstrap.js"></script>
-
     <!--The css files right now we are using -->
     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="app/shared/forms.css">
 
-    <!--Loading pace -->
-    <script src="assets/pace/pace.js"></script>
     <link href="assets/pace/pace.css" rel="stylesheet" />
-  </head>
 
-  <!--Display the application -->
-  <body>
-    <webcat>Loading...</webcat>
-  </body>
-    <!-- Jquery for Bootstrap -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
-    <!-- Bootstrap js for bootstrap -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
+    <!-- endbuild -->
 
+    <!-- inject:js -->
+    <!-- endinject -->
+
+    <!-- build:remove -->
     <!-- Configure SystemJS -->
     <script src="systemjs.config.js"></script>
     <script>
       System.import('app').catch(function(err){ console.error(err);  });
     </script>
+     <!-- endbuild -->
+
+  </head>
+
+  <!--Display the application -->
+  <body>
+    <webcat>Loading...</webcat>
+  </body>
+
 </html>
 
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
     "build": "gulp build",
     "prestart": "npm run build",
     "start": "concurrently --kill-others \"gulp watch\" \"gulp watch-ts\" \"lite-server\"",
+    "prod": "gulp build:prod && lite-server -c prod-bs-config.json",
     "lite": "lite-server",
     "postinstall": "typings install",
     "tsc": "tsc",
@@ -28,6 +29,7 @@
     "bootstrap": "^3.3.6",
     "es6-shim": "^0.35.0",
     "font-awesome": "^4.6.3",
+    "gulp-rev-replace": "^0.4.3",
     "jquery": "^2.2.3",
     "moment": "^2.13.0",
     "ng2-bootstrap": "^1.0.16",
@@ -43,22 +45,27 @@
     "concurrently": "^2.0.0",
     "del": "^2.1.0",
     "gulp": "^3.9.0",
+    "gulp-cssnano": "^2.1.2",
     "gulp-debug": "^2.1.2",
+    "gulp-if": "^2.0.1",
     "gulp-inject": "^4.1.0",
     "gulp-install": "^0.6.0",
+    "gulp-rev": "^7.1.0",
     "gulp-rimraf": "^0.2.0",
     "gulp-sourcemaps": "^1.6.0",
     "gulp-tslint": "^5.0.0",
     "gulp-typescript": "^2.8.0",
+    "gulp-useref": "^3.1.0",
     "gulp-util": "^3.0.7",
     "gulp-watch": "^4.3.6",
     "jasmine-core": "^2.4.1",
     "lite-server": "^2.2.0",
     "minimist": "^1.2.0",
     "run-sequence": "^1.2.1",
+    "systemjs-builder": "^0.15.23",
     "tslint": "^3.10.2",
     "typescript": "^1.8.10",
     "typings": "^0.8.1",
     "vinyl-ftp": "^0.4.5"
   }
-}
+}
diff --git a/prod-bs-config.json b/prod-bs-config.json
@@ -0,0 +1,7 @@
+{
+  "server": {
+    "baseDir": [
+      "./prod"
+    ]
+  }
+}