add deployment

Author: sonicoder86

.gitignore

@@ -1,4 +1,4 @@
-build
+dist
 .idea
 node_modules
 npm-debug.log

Procfile

@@ -0,0 +1 @@
+web: node server/index.js

gulpfile.js

@@ -1,101 +1,42 @@
 'use strict';
-
 let gulp = require('gulp');
-let watch = require('gulp-watch');
-let util = require('gulp-util');
-let webpack = require('webpack');
-let nodemon = require('gulp-nodemon');
 let runSequence = require('run-sequence');
-let del = require('del');
-let miniLr = require('mini-lr');
-
-let webPackConfig = require('./webpack.config');
-
-let sourceFolder = 'client';
 
-let source = [
-  'client/**/*.{html,css}', '!**/app/**',
-  'node_modules/todomvc-common/base.css'
-];
-let destinationFolder = 'build';
-let liveReload = miniLr();
-
-function notifyChanged(files) {
-  liveReload.changed({
-    body: {
-      files: files
-    }
-  });
-}
-
-gulp.task('server-start', function () {
-  return nodemon({
-    script: 'server/index.js',
-    watch: ['server'],
-    ignore: ['node_modules/**'],
-    ext: 'js html',
-    env: {
-      'NODE_ENV': 'development'
-    }
-  });
-});
-
-gulp.task('livereload', function() {
-  liveReload.listen(35729);
-});
-
-gulp.task('client-copy', function() {
-  let clientWatch = watch(source, {verbose: true});
-  clientWatch.on('change', function(fileName) {
-    notifyChanged([fileName]);
-  });
-
-  gulp.src(source, {})
-    .pipe(clientWatch)
-    .pipe(gulp.dest(destinationFolder));
-});
+let clientCopyTask = require('./tasks/client_copy');
+let clientBuildTask = require('./tasks/client_build');
+let liveReloadTask = require('./tasks/livereload');
+let serverStartTask = require('./tasks/server_start');
+let serverCopyTask = require('./tasks/server_copy');
+let generalCopyTask = require('./tasks/general_copy');
+let cleanTask = require('./tasks/clean');
 
-gulp.task('client-build', function(callback) {
-  let webpackBuild = webpack(webPackConfig);
-  let firstRun = true;
+gulp.task('server-start', serverStartTask());
+gulp.task('server-copy-dist', serverCopyTask());
 
-  webpackBuild.watch({ aggregateTimeout: 100 }, function(err, stats) {
-    if(err) {
-      throw new util.PluginError("webpack:error", err);
-    }
+gulp.task('general-copy-dist', generalCopyTask());
 
-    let statistics = stats.toJson({
-      children: false,
-      source: false,
-      modules: false,
-      chunkModules: false
-    });
+gulp.task('livereload', liveReloadTask());
 
-    let elapsedTime = Math.round(statistics.time / 10) / 100;
+gulp.task('client-copy', clientCopyTask(false, liveReloadTask.notifyChanged));
+gulp.task('client-copy-dist', clientCopyTask(true));
+gulp.task('client-build', clientBuildTask(false, liveReloadTask.notifyChanged));
+gulp.task('client-build-dist', clientBuildTask(true));
 
-    if (firstRun) {
-      callback();
-      firstRun = false;
-    }
-    else {
-      util.log(`webpack:build ${elapsedTime} s`);
+gulp.task('clean', cleanTask());
 
-      notifyChanged(
-        statistics.assets.map((file) => file.name)
-      );
-    }
-  });
-});
-
-gulp.task('clean', function() {
-  return del([destinationFolder]);
-});
-
-gulp.task('start', function(callback) {
+gulp.task('serve', function(callback) {
   runSequence(
     'clean',
     ['client-build', 'client-copy', 'livereload'],
     'server-start',
     callback
   )
 });
+
+gulp.task('dist', function(callback) {
+  runSequence(
+    'clean',
+    ['client-build-dist', 'client-copy-dist', 'server-copy-dist', 'general-copy-dist'],
+    callback
+  )
+});

package.json

@@ -17,11 +17,10 @@
   "license": "ISC",
   "keywords": [
     "angular2",
-    "es6",
-    "webpack",
+    "todomvc",
     "gulp"
   ],
-  "description": "A skeleton Angular2 ES6 application built with Babel, Webpack, Gulp",
+  "description": "TodoMVC application built with Angular 2 ES6.",
   "engines": {
     "node": "4.2.4"
   },
@@ -43,6 +42,7 @@
     "es6-promise": "^3.0.2",
     "es6-shim": "^0.33.13",
     "gulp": "^3.9.0",
+    "gulp-delete-lines": "0.0.7",
     "gulp-nodemon": "^2.0.4",
     "gulp-util": "^3.0.7",
     "gulp-watch": "^4.3.5",

readme.md

@@ -18,10 +18,24 @@ git clone https://github.com/blacksonic/angular2-es6-todomvc.git
 cd angular2-es6-todomvc
 npm install
 
-npm start
-# or use it with Gulp
 gulp start
 
 ```
 
 Open it in your browser [http://localhost:9000](http://localhost:9000).
+
+### Deployment (to Heroku)
+
+```bash
+
+gulp dist
+
+cd dist
+git init
+git add -A .
+git commit -m "Deploy #1" && echo Committed
+git push -f git@heroku.com:angular2-es6-todomvc.git master
+
+```
+
+Check out the [deployed version](https://angular2-es6-todomvc.herokuapp.com/).

server/config.js

@@ -0,0 +1,10 @@
+'use strict';
+let path = require('path');
+let environment = process.env.NODE_ENV || 'production';
+
+let localStaticPath = environment == 'production' ? '../client' : '../dist/client';
+module.exports = {
+  env: environment,
+  port: process.env.PORT || 9000,
+  staticPath: path.resolve(__dirname, localStaticPath)
+};

server/index.js

@@ -1,13 +1,11 @@
 'use strict';
-
 let koa = require('koa');
 let staticServe = require('koa-static');
-let path = require('path');
+let config = require('./config');
 
-let port = 9000;
 let app = koa();
 
-app.use(staticServe(path.resolve(__dirname + '/../build')));
+app.use(staticServe(config.staticPath));
 
-app.listen(port);
-console.log(`Listening on port ${port}`);
+app.listen(config.port);
+console.log(`Listening on port ${config.port}`);

tasks/clean.js

@@ -0,0 +1,9 @@
+'use strict';
+let del = require('del');
+let config = require('./config').build;
+
+module.exports = function() {
+  return function() {
+    return del([config.destination]);
+  };
+};

tasks/client_build.js

@@ -0,0 +1,52 @@
+'use strict';
+let gulp = require('gulp');
+let webpack = require('webpack');
+let util = require('gulp-util');
+let config = require('./config').client;
+
+module.exports = function(singleRun, callback) {
+  return function(cb) {
+    let webpackConfig = singleRun ? require('./config/webpack.dist') : require('./config/webpack');
+    let webpackBuild = webpack(webpackConfig);
+    let firstRun = true;
+
+    let callbackOnBuild = function(err, stats) {
+      if (err) {
+        throw new util.PluginError("webpack:error", err);
+      }
+
+      let statistics = stats.toJson({
+        children: false,
+        source: false,
+        modules: false,
+        chunkModules: false
+      });
+
+      let elapsedTime = Math.round(statistics.time / 10) / 100;
+
+      if (singleRun) {
+        cb();
+      }
+      else {
+        if (firstRun) {
+          cb();
+          firstRun = false;
+        }
+        else {
+          util.log(`webpack:build ${elapsedTime} s`);
+
+          callback(
+            statistics.assets.map((file) => file.name)
+          );
+        }
+      }
+    };
+
+    if (singleRun) {
+      webpackBuild.run(callbackOnBuild);
+    }
+    else {
+      webpackBuild.watch({ aggregateTimeout: 100 }, callbackOnBuild);
+    }
+  }
+};

tasks/client_copy.js

@@ -0,0 +1,32 @@
+'use strict';
+let gulp = require('gulp');
+let watch = require('gulp-watch');
+let deleteLines = require('gulp-delete-lines');
+let config = require('./config').client;
+
+module.exports = function(singleRun, callback) {
+  return function() {
+    let gulpStream = gulp.src(config.source);
+
+    if (!singleRun) {
+      let clientWatch = watch(config.source, {verbose: true});
+
+      if (callback) {
+        clientWatch.on('change', function(fileName) {
+          callback([fileName]);
+        });
+      }
+
+      gulpStream.pipe(clientWatch);
+    }
+    else {
+      gulpStream.pipe(deleteLines({
+        'filters': [
+          /livereload/i
+        ]
+      }));
+    }
+
+    return gulpStream.pipe(gulp.dest(config.destination));
+  }
+};

tasks/config/index.js

@@ -0,0 +1,22 @@
+'use strict';
+
+module.exports = {
+  client: {
+    source: ['client/**/*.{html,css}', '!**/app/**', 'node_modules/todomvc-common/base.css'],
+    destination: 'dist/client'
+  },
+  server: {
+    source: ['server/**/*.{js,json}', '!server/**/*.spec.*'],
+    destination: 'dist/server'
+  },
+  general: {
+    source: ['package.json', 'Procfile'],
+    destination: 'dist'
+  },
+  liveReload: {
+    port: 35729
+  },
+  build: {
+    destination: 'dist'
+  }
+};

tasks/config/webpack.dist.js

@@ -0,0 +1,12 @@
+'use strict';
+let webpack = require('webpack');
+let config = require('./webpack');
+
+config.plugins = [
+  new webpack.optimize.UglifyJsPlugin({
+    mangle: false,
+    comments: false
+  })
+];
+
+module.exports = config;

webpack.config.js renamed to tasks/config/webpack.js

@@ -1,19 +1,20 @@
 'use strict';
 let path = require('path');
+let config = require('./index').client;
 
 module.exports = {
   entry: {
     boot: './client/boot.js'
   },
   output: {
-    path: path.resolve(__dirname, './build'),
+    path: path.resolve(__dirname, '../../', config.destination),
     filename: '[name].js'
   },
   module: {
     loaders: [
       {
         test: /\.js$/,
-        loader: 'babel-loader',
+        loader: 'babel',
         exclude: /node_modules/,
         query: {
           presets: ['es2015'],
@@ -27,7 +28,7 @@ module.exports = {
       },
       {
         test: /\.html$/,
-        loader: "html-loader"
+        loader: "html?minimize=false"
       }
     ]
   },
@@ -38,4 +39,4 @@ module.exports = {
   },
 
   devtool: 'source-map'
-};
+};

tasks/general_copy.js

@@ -0,0 +1,10 @@
+'use strict';
+let gulp = require('gulp');
+let config = require('./config').general;
+
+module.exports = function() {
+  return function() {
+    return gulp.src(config.source)
+      .pipe(gulp.dest(config.destination));
+  }
+};