Gulp prod

gulpfile.babel.js

@@ -7,18 +7,31 @@ import sass from 'gulp-sass';
 import sourcemaps from 'gulp-sourcemaps';
 import watchify from 'watchify';
 import notify from 'gulp-notify';
-import reload from 'browser-sync';
 import duration from 'gulp-duration';
 import change from 'gulp-change';
-import rename from 'gulp-rename';
 import runSequence from 'run-sequence';
+import clean from 'gulp-clean';
+import buffer from 'vinyl-buffer';
+import uglify from 'gulp-uglify';
+import cleanCSS from 'gulp-clean-css';
+import debug from 'gulp-debug';
+import mocha from 'gulp-mocha';
+//import rename from 'gulp-rename';
+//import reload from 'browser-sync';
+
 
 const opts = Object.assign({}, watchify.args, {
   entries: 'src/index.js',
-  debug: true,
 });
 
 gulp.task('watchify', () => {
+
+  console.log('NODE_ENV is', process.env.NODE_ENV);
+
+  opts.debug = !(process.env.NODE_ENV == 'production');
+
+  console.log('browserify debug mode is ', opts.debug);
+
   let bundler = watchify(browserify(opts));
   bundler.transform(babelify).on('update', rebundle);
   return rebundle();
@@ -28,35 +41,48 @@ gulp.task('watchify', () => {
     return bundler.bundle()
       .on('error', notify.onError())
       .pipe(source('bundle.js'))
+      .pipe(buffer())
+      .pipe(sourcemaps.init({ loadMaps: true }))
+      .pipe(sourcemaps.write('./'))
       .pipe(duration('rebuilding files'))
       .pipe(gulp.dest('./dist/js'));
   }
 });
 
-gulp.task('icomoon-variables', function() {
+gulp.task('icomoon-variables', function () {
   return gulp.src(['./icomoon/variables.scss'])
-    .pipe(change(function(content){
+    .pipe(change(function (content) {
       return content.replace('$icomoon-font-path: "fonts" !default;', '$icomoon-font-path: "./../fonts" !default;')
     }))
     .pipe(gulp.dest('./icomoon/'));
 });
 
-gulp.task('icomoon-fonts', function() {
+gulp.task('icomoon-fonts', function () {
   gulp.src('./icomoon/fonts/*')
     .pipe(gulp.dest('./dist/fonts'));
 });
 
 const scssPaths = ['./lib/**/*.scss', './scss/**/*.scss', './src/**/*.scss'];
-gulp.task('sass', function() {
-  gulp.src(scssPaths)
-    .pipe(sourcemaps.init())
-    .pipe(sass().on('error', notify.onError()))
-    .pipe(sourcemaps.write())
-    .pipe(gulp.dest('./dist/css'));
+gulp.task('sass', function () {
+  var piped = gulp.src(scssPaths);
+
+  if (process.env.NODE_ENV !== 'production') {
+    piped = piped.pipe(sourcemaps.init());
+  }
+
+  piped = piped.pipe(sass().on('error', notify.onError()));
+
+  if (process.env.NODE_ENV !== 'production') {
+    piped = piped.pipe(sourcemaps.write());
+  }
+
+  piped = piped.pipe(gulp.dest('./dist/css'));
+
+  return piped;
 });
 
-gulp.task('app-sass', function(callback){
-  runSequence('icomoon-variables','icomoon-fonts', 'sass', callback);
+gulp.task('app-sass', function (callback) {
+  runSequence('icomoon-variables', 'icomoon-fonts', 'sass', callback);
 });
 
 const imagePaths = ['./img/**'];
@@ -88,3 +114,68 @@ const scssPathsToWatch  = ['./lib/**/*.scss', './scss/**/*.scss', './src/**/*.sc
 gulp.task('default', ['watchify', 'app-sass'], function() {
   gulp.watch(scssPathsToWatch, ['app-sass']);
 });
+
+gulp.task('clean', function () {
+  gulp.src('./dist', { read: false })
+    .pipe(clean());
+});
+gulp.task('build', function () {
+
+  console.log('NODE_ENV is', process.env.NODE_ENV);
+
+  opts.debug = !(process.env.NODE_ENV == 'production');
+
+  console.log('browserify debug mode is ', opts.debug);
+
+  var bundler = browserify(opts)
+    .transform(babelify)
+    .bundle()
+    .pipe(source('bundle.js'));
+
+  if (process.env.NODE_ENV !== 'production') {
+
+    console.log('extracting source maps for dev mode');
+
+    bundler = bundler.pipe(buffer())
+      .pipe(sourcemaps.init({ loadMaps: true }))
+      .pipe(sourcemaps.write('./'));
+  }
+
+  if (process.env.NODE_ENV === 'production') {
+    console.log('uglifying');
+    bundler = bundler.pipe(buffer()).pipe(uglify());
+  }
+
+  bundler.pipe(duration('rebuilding files'))
+    .pipe(gulp.dest('./dist/js'));
+});
+
+//PRODUCTION
+gulp.task('minify-css', function () {
+  return gulp.src('./dist/css/*.css')
+    .pipe(debug({ title: 'Minifying css:' }))
+    .pipe(cleanCSS({ compatibility: 'ie8' }, function (details) {
+      console.log(details.name + ': ' + details.stats.originalSize);
+      console.log(details.name + ': ' + details.stats.minifiedSize);
+    }))
+    .pipe(gulp.dest('./dist/css'));
+});
+
+gulp.task('apply-prod-environment', function () {
+  //setting this value would make some changes in react code (https://facebook.github.io/react/downloads.html)
+  process.env.NODE_ENV = 'production';
+});
+
+gulp.task('unit-tests', function () {
+  //mocha src/test --reporter spec --compilers js:babel-register --recursive --watch
+  return gulp.src('./src/test/*.js')
+    .pipe(debug({ title: 'running tests:' }))
+    .pipe(mocha(
+      {
+        compilers: 'js:babel-register',
+      }));
+});
+
+gulp.task('deploy', function () {
+  return runSequence('apply-prod-environment', 'clean', 'build', 'app-sass', 'minify-css','unit-tests');
+});

package.json

@@ -16,14 +16,18 @@
     "gulp": "^3.9.1",
     "gulp-babel": "^6.1.2",
     "gulp-change": "^1.0.0",
+    "gulp-clean": "^0.3.2",
+    "gulp-clean-css": "^2.0.6",
+    "gulp-debug": "^2.1.2",
     "gulp-duration": "0.0.0",
+    "gulp-mocha": "^2.2.0",
     "gulp-notify": "^2.2.0",
     "gulp-rename": "^1.2.2",
     "gulp-sass": "^2.2.0",
     "gulp-sourcemaps": "^1.6.0",
+    "gulp-uglify": "^1.5.3",
     "lodash": "^4.0.0",
     "mocha": "^2.4.5",
-    "mongodb": "^2.1.18",
     "nock": "^7.2.2",
     "path-to-regexp": "^1.2.1",
     "photoswipe": "^4.1.1",
@@ -40,6 +44,7 @@
     "redux-thunk": "^1.0.3",
     "run-sequence": "^1.1.5",
     "sinon": "^1.17.3",
+    "vinyl-buffer": "^1.0.0",
     "vinyl-source-stream": "^1.1.0",
     "watchify": "^3.7.0",
     "winston": "^2.2.0"