diff --git a/gulp/tasks/js.js b/gulp/tasks/js.js index 4c66cc37..0bccf7d1 100644 --- a/gulp/tasks/js.js +++ b/gulp/tasks/js.js @@ -1,77 +1,85 @@ -var gulp = require('gulp'); -var uglify = require('gulp-uglify'); -var source = require('vinyl-source-stream'); -var buffer = require('vinyl-buffer'); -var rename = require('gulp-rename'); -var watchify = require('watchify'); -var browserify = require('browserify'); -var babelify = require('babelify'); -var gutil = require('gulp-util'); -var chalk = require('chalk'); -var config = require('../config'); +var gulp = require('gulp'); +var uglify = require('gulp-uglify'); +var source = require('vinyl-source-stream'); +var buffer = require('vinyl-buffer'); +var rename = require('gulp-rename'); +var watchify = require('watchify'); +var browserify = require('browserify'); +var resolutions = require('browserify-resolutions'); +var babelify = require('babelify'); +var gutil = require('gulp-util'); +var chalk = require('chalk'); +var _ = require('lodash'); +var config = require('../config'); function getBundler(isDev) { - var bundler = browserify({ - entries: [config.src + 'App.jsx'], - extensions: ['.js', '.jsx'], - debug: isDev, - cache: {}, // for watchify - packageCache: {}, // for watchify - fullPaths: true // for watchify + var opts = _.assign({}, watchify.args, { + entries: [config.src + 'App.jsx'], + extensions: ['.js', '.jsx'], + debug: isDev, + fullPaths: isDev }); - bundler.transform(babelify, { - presets: ['es2015', 'react'] - }); - - return bundler; + return browserify(opts) + .plugin(resolutions, [ + 'react', + 'mozaik', + 'lodash', + 'react-mixin', + 'convict', + 'd3', + 'classnames', + 'bluebird', + 'moment' + ]) + .transform(babelify, { presets: ['es2015', 'react'] }) + ; } -gulp.task('watch:js', function () { - var watcher = watchify(getBundler(true)); - - return watcher - .on('error', gutil.log.bind(gutil, 'Browserify Error')) - .on('update', function () { - watcher.bundle() - .pipe(source('mozaik.js')) - .pipe(gulp.dest(config.dest)) - .pipe(buffer()) - .pipe(uglify()) - .pipe(rename({suffix: '.min'})) - .pipe(gulp.dest(config.dest)) - ; - - gutil.log(chalk.green('Updated JavaScript sources')); +function bundle(bundler, isDev) { + var b = bundler + .bundle() + .on('error', function (err) { + gutil.log(chalk.red(err)); }) - .bundle() // Create the initial bundle when starting the task .pipe(source('mozaik.js')) - .pipe(gulp.dest(config.dest)) .pipe(buffer()) - .pipe(uglify()) - .pipe(rename({ suffix: '.min'})) .pipe(gulp.dest(config.dest)) ; -}); -gulp.task('watch:js:dev', function () { + if (!isDev) { + b = b + .pipe(uglify()) + .pipe(rename({ suffix: '.min' })) + .pipe(gulp.dest(config.dest)) + ; + } + + return b; +} + +function getWatcher(isDev) { var watcher = watchify(getBundler(true)); return watcher - .on('error', gutil.log.bind(gutil, 'Browserify Error')) - .on('update', function () { - watcher.bundle() - .pipe(source('mozaik.js')) - .pipe(buffer()) - .pipe(gulp.dest(config.dest)) - ; + .on('log', gutil.log) + .on('update', function (files) { + gutil.log(chalk.yellow('Updated JavaScript sources, changes in:')); + files.forEach(function (file) { + gutil.log('- ' + file); + }); - gutil.log(chalk.green('Updated JavaScript sources [dev]')); + return bundle(watcher, isDev); + }) + ; +} + +gulp.task('watch:js', function () { + return bundle(getWatcher(true), true) + .on('end', function () { + gutil.log(chalk.yellow('watch:js watcher ready')); }) - .bundle() // Create the initial bundle when starting the task - .pipe(source('mozaik.js')) - .pipe(gulp.dest(config.dest)) ; }); @@ -85,8 +93,14 @@ gulp.task('js:dev', function () { }); -gulp.task('js', ['js:dev'], function () { - return gulp.src(config.dest + '/mozaik.js') +gulp.task('js', function () { + process.env.NODE_ENV = 'production'; + + return getBundler(false) + .bundle() + .pipe(source('mozaik.js')) + .pipe(gulp.dest(config.dest)) + .pipe(buffer()) .pipe(uglify()) .pipe(rename({ suffix: '.min' })) .pipe(gulp.dest(config.dest)) diff --git a/gulp/tasks/watch.js b/gulp/tasks/watch.js index 8714ad12..c1f94447 100644 --- a/gulp/tasks/watch.js +++ b/gulp/tasks/watch.js @@ -2,29 +2,16 @@ var gulp = require('gulp'); var path = require('path'); var config = require('../config'); -function stylesWatcher(devMode) { - var appConfig = require(path.join(config.root, 'config.js')); - var theme = appConfig.theme; - var task = devMode ? 'styles:dev' : 'styles'; - - return gulp.watch([ - config.root + path.join('config.js'), // config for `theme` property - config.mozaikSrc + path.join('styl', '**', '*'), // mozaïk base styles - config.mozaikSrc + path.join('themes', '**', '*'), // mozaïk themes - config.root + path.join('themes', '**', '*'), // custom themes - config.root + path.join('node_modules', 'mozaik-ext-*', 'styl', '**', '*') // extensions styles - ], [task]); -} - -gulp.task('watch:styles:dev', function () { - return stylesWatcher(true); -}); - gulp.task('watch:styles', function () { - return stylesWatcher(false); + return gulp.watch([ + config.root + path.join('config.js'), // config for `theme` property + config.mozaikSrc + path.join('styl', '**', '*'), // mozaïk base styles + config.mozaikSrc + path.join('themes', '**', '*'), // mozaïk themes + config.root + path.join('themes', '**', '*'), // custom themes + config.root + path.join('node_modules', 'mozaik-ext-*', 'styl', '**', '*') // extensions styles + ], ['styles:dev']); }); -gulp.task('watch:dev', ['watch:styles:dev', 'watch:js:dev']); -gulp.task('watch', ['watch:styles', 'watch:js']); \ No newline at end of file +gulp.task('watch', ['watch:styles', 'watch:js']); diff --git a/package.json b/package.json index 6c12b0cc..49221d0b 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "dependencies": { "bluebird": "3.3.5", "browserify": "13.0.0", + "browserify-resolutions": "1.0.6", "chalk": "1.1.3", "classnames": "2.2.3", "d3": "3.5.16",