Merge pull request #23 from Rulox/develop

Release

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>