Add production tasks

Rulox · Rulox · commit 5f8d2b66b3f4 · 2016-09-26T00:47:10.000-04:00
diff --git a/Gulpfile.js b/Gulpfile.js
@@ -17,12 +17,12 @@ var sourcemaps    = require('gulp-sourcemaps');
 
 // Static Server + watching scss/html files
 gulp.task('serve', ['sass', 'js'], function() {
-    browserSync.init({
-      server: './public'
-    });
-    gulp.watch('app/**/*.scss', ['sass']);
-    gulp.watch('app/**/*.js', ['js']);
-    gulp.watch('public/*.html').on('change', browserSync.reload);
+  browserSync.init({
+    server: './public'
+  });
+  gulp.watch('app/**/*.scss', ['sass']);
+  gulp.watch('app/**/*.js', ['js']);
+  gulp.watch('public/*.html').on('change', browserSync.reload);
 });
 
 // Run lint for sass
@@ -44,41 +44,41 @@ gulp.task('jslint', function() {
 
 // Min js files
 gulp.task('uglify', ['js'], function() {
-  gulp.src('./public/js/app.js')
-  .pipe(uglify())
-  .pipe(concat('app.min.js'))
-  .pipe(gulp.dest('./public/js'))
+  return gulp.src('./public/js/build.js')
+    .pipe(uglify())
+    .pipe(concat('build.js'))
+    .pipe(gulp.dest('./public/js'))
 });
 
 // Min css files
 gulp.task('minify-css', ['sass'], function() {
-  gulp.src('./public/css/main.css')
-  .pipe(cleanCSS())
-  .pipe(concat('main.min.css'))
-  .pipe(gulp.dest('./public/css'))
-})
+  return gulp.src('./public/css/main.css')
+    .pipe(cleanCSS())
+    .pipe(concat('main.css'))
+    .pipe(gulp.dest('./public/css'))
+});
 
 // Compile sass into CSS & auto-inject into browsers
 gulp.task('sass', ['stylelint'], function() {
-    return gulp.src('./app/main.scss')
-      .pipe(sass().on('error', sass.logError))
-      .pipe(autoprefixer({
-        browsers: ['last 2 versions'],
-        cascade: false
-      }))
-      .pipe(sourcemaps.init({ loadMaps: true }))
-      .pipe(sourcemaps.write('./'))
-      .pipe(gulp.dest('./public/css'))
-      .pipe(browserSync.stream())
-      .pipe(notify({message: 'CSS created!', onLast: true}));
+  return gulp.src('./app/main.scss')
+    .pipe(sass().on('error', sass.logError))
+    .pipe(autoprefixer({
+      browsers: ['last 2 versions'],
+      cascade: false
+    }))
+    .pipe(sourcemaps.init({ loadMaps: true }))
+    .pipe(sourcemaps.write('./'))
+    .pipe(gulp.dest('./public/css'))
+    .pipe(browserSync.stream())
+    .pipe(notify({message: 'CSS created!', onLast: true}));
 });
 
 // Transpile ES6 js (React app) into JS & auto-inject into browsers
 gulp.task('js', ['jslint'], function() {
     var bundler = browserify('./app/app.js').transform("babelify", {presets: ["es2015", "react"]});
     return bundler.bundle()
       .on('error', function(err) { console.error(err); this.emit('end'); })
-      .pipe(source('app.js'))
+      .pipe(source('build.js'))
       .pipe(buffer())
       .pipe(sourcemaps.init({ loadMaps: true }))
       .pipe(sourcemaps.write('./'))
@@ -87,5 +87,20 @@ gulp.task('js', ['jslint'], function() {
       .pipe(notify({message: 'JS bundle created!', onLast: true}));
 });
 
+// PRODUCTION
+gulp.task('set-prod-node-env', function() {
+  return process.env.NODE_ENV = 'production';
+});
+
+gulp.task('production', ['uglify', 'minify-css', 'set-prod-node-env']);
+
+// Start server without build
+gulp.task('start', ['production'], function() {
+  browserSync.init({
+    server: './public'
+  });
+});
+
 // Tasks
 gulp.task('default', ['serve']);
+
diff --git a/package.json b/package.json
@@ -4,7 +4,9 @@
   "description": "Basic Structure for React app following Atomic Design",
   "scripts": {
     "start": "gulp",
+    "start-server": "gulp start",
     "build-dev": "gulp js && gulp sass",
+    "build-prod": "gulp production",
     "js-lint": "gulp jslint",
     "sass-lint": "gulp stylelint"
   },
diff --git a/public/index.html b/public/index.html
@@ -7,6 +7,6 @@
 </head>
 <body>
     <div id="app"></div>
-    <script type="text/javascript" src="js/app.js"></script>
+    <script type="text/javascript" src="js/build.js"></script>
 </body>
 </html>
