diff --git a/Gulpfile.js b/Gulpfile.js index a1fd9a6..8fe57f5 100644 --- a/Gulpfile.js +++ b/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,19 +42,35 @@ 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 @@ -59,7 +78,7 @@ 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']); + diff --git a/README.md b/README.md index cadf905..5f29b35 100644 --- a/README.md +++ b/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 ``` diff --git a/package.json b/package.json index 0c40bcd..3939a59 100644 --- 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" }, @@ -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" } diff --git a/public/index.html b/public/index.html index 3e21dda..1709f72 100644 --- a/public/index.html +++ b/public/index.html @@ -7,6 +7,6 @@
- +