Merge pull request #23 from Rulox/develop

Release

Author: Rulox

Gulpfile.js

@@ -1,5 +1,8 @@
 var gulp          = require('gulp');
 var eslint        = require('gulp-eslint');
+var uglify        = require('gulp-uglify');
+var concat        = require('gulp-concat');
+var cleanCSS      = require('gulp-clean-css');
 var gulpStyleLint = require('gulp-stylelint');
 var browserSync   = require('browser-sync').create();
 var sass          = require('gulp-sass');
@@ -14,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
@@ -39,27 +42,43 @@ gulp.task('jslint', function() {
     .pipe(eslint.format());
 });
 
+// Min js files
+gulp.task('uglify', ['js'], function() {
+  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() {
+  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('./'))
@@ -68,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']);
+

README.md

@@ -19,6 +19,7 @@ web server in your machine that automatically updates the code and the styles wh
 
 * ES6 to JS Transpile
 * SASS to CSS
+* React Router	
 * Auto watcher for JS and SCSS files
 * Atomic design project structure
 * Launch server that updates itself every time we change a file with browsersync
@@ -27,7 +28,6 @@ web server in your machine that automatically updates the code and the styles wh
 
 ## TODO List
 * Tests
-* Production build (minification, etc)
 
 ## Requirements
 * nodejs v5.*
@@ -113,6 +113,16 @@ npm run build-dev
 ```
 1. Build CSS and JS from sources but does not start browsersync server.
 
+```bash
+npm run build-prod
+```
+1. Build CSS and JS minified and ready for production but does not start browsersync server.
+
+```bash
+npm run start-server
+```
+1. Run the server serving the `/public` folder using browsersync.
+
 ```bash
 npm run js-lint
 ```

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"
   },
@@ -42,11 +44,14 @@
     "eslint-plugin-jsx-a11y": "^2.2.2",
     "eslint-plugin-react": "^6.3.0",
     "gulp-autoprefixer": "^3.1.1",
+    "gulp-clean-css": "^2.0.12",
+    "gulp-concat": "^2.6.0",
     "gulp-eslint": "^3.0.1",
     "gulp-notify": "^2.2.0",
     "gulp-sass": "^2.3.2",
     "gulp-sourcemaps": "^1.6.0",
     "gulp-stylelint": "^3.2.0",
+    "gulp-uglify": "^2.0.0",
     "vinyl-buffer": "^1.0.0",
     "vinyl-source-stream": "^1.1.0"
   }

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>