Тем самым посетитель сайта не ждёт пока под грузится CSS всей страницы
var config = require('../config');
if (!config.jsx) return;
var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var uglify = require('gulp-uglify');
var streamify = require('gulp-streamify');
var browserSync = require('browser-sync');
var handleErrors = require('../lib/handleErrors');
var path = require('path');
var devBuild = true;
var bundler = function (bundles, _sourceDir, _destinationDir) {
var makeBundle = function (bundle) {
var b = {};
b.name = bundle.name;
b.deps = bundle.deps;
b.src = path.join(_sourceDir, bundle.name + config.jsx.ext);
b.destDir = _destinationDir;
b.destFile = bundle.name + '.js';
return b;
};
var pack = [];
for (var i = 0; i < bundles.length; i++) {
pack.push(makeBundle(bundles[i]));
}
return pack;
};
var bundles = bundler(
config.jsx.bundles,
path.join(config.root.src, config.jsx.src), // source/jsx
path.join(config.root.build, config.jsx.build) // public/js
);
var jsxTask = function (cb) {
console.log('Run task: jsx');
var queue = bundles.length;
var handleQueue = function () {
if (queue) {
queue--;
if (queue === 0) {
console.log('Compiled all files. Reload.');
browserSync.reload();
cb();
}
}
};
var buildThis = function (bundle) {
var browserifyInstance = browserify({
cache : {},
debug : devBuild,
entries : bundle.src,
extensions : ['.jsx'],
fullPaths : devBuild,
packageCache: {}
});
var reBuild = function () {
console.log('rebuild:', bundle.src);
//noinspection JSUnresolvedFunction
browserifyInstance.transform('babelify', {presets: ['es2015', 'react']});
bundle.deps.forEach(function (dep) {
//noinspection JSUnresolvedFunction
browserifyInstance.external(dep);
});
//noinspection JSUnresolvedFunction
return browserifyInstance
.bundle()
.on('error', handleErrors)
.pipe(source(bundle.destFile))
.pipe(gulp.dest(bundle.destDir))
.on('end', handleQueue);
};
return reBuild();
};
bundles.forEach(buildThis);
};
gulp.task('jsx-vendors', function () {
var vendorsInstance = browserify({
debug : false,
require: config.jsx.commonDeps
});
//noinspection JSUnresolvedFunction
vendorsInstance.bundle()
.on('error', handleErrors)
.pipe(source('vendors.js'))
// .pipe(streamify(uglify()))
.pipe(gulp.dest(path.join(config.root.build, config.jsx.build)))
.on('end', function () {
console.log('Built vendors.js');
});
});
gulp.task('jsx', jsxTask);var _localDomain = 'super.project';
var _browsers = [];
var _src = 'source/';
var _build = 'public_html/';
module.exports = {
root: {
src : _src,
build: _build
},
watchableTasks: ['jsx', 'css', 'images', 'fonts'],
defaultTasks: ['jsx', 'jsx-vendors', 'css', 'images', 'fonts'],
jsx: {
src : 'jsx',
build : 'js',
extensions: ['jsx', 'js'],
ext : '.jsx',
commonDeps: ["react", "react-dom", 'highcharts', 'page'],
bundles : [{
name: "app",
deps: ["react", "react-dom", 'highcharts', 'page']
}]
},
// .... cut
// http://www.browsersync.io/docs/options/
browserSync: {
browser : _browsers,
notify : false,
startPath: '/',
proxy : _localDomain
}
};