diff --git a/gulpfile.babel.js b/gulpfile.babel.js index 64e7cb6..f37b9b9 100644 --- a/gulpfile.babel.js +++ b/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'); +}); \ No newline at end of file diff --git a/package.json b/package.json index d7fc8b5..83f8f38 100644 --- a/package.json +++ b/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"