Separate vendor bundle

This commit is contained in:
Ken-Håvard Lieng 2015-06-08 00:11:03 +02:00
parent 3d20edd960
commit d11ad72f03
5 changed files with 66 additions and 29 deletions

File diff suppressed because one or more lines are too long

View File

@ -1,6 +1,7 @@
var exec = require('child_process').exec; var exec = require('child_process').exec;
var gulp = require('gulp'); var gulp = require('gulp');
var gutil = require('gulp-util');
var gulpif = require('gulp-if'); var gulpif = require('gulp-if');
var minifyHTML = require('gulp-minify-html'); var minifyHTML = require('gulp-minify-html');
var minifyCSS = require('gulp-minify-css'); var minifyCSS = require('gulp-minify-css');
@ -15,6 +16,7 @@ var streamify = require('gulp-streamify');
var babelify = require('babelify'); var babelify = require('babelify');
var strictify = require('strictify'); var strictify = require('strictify');
var watchify = require('watchify'); var watchify = require('watchify');
var merge = require('merge-stream');
var argv = require('yargs') var argv = require('yargs')
.alias('p', 'production') .alias('p', 'production')
@ -24,6 +26,8 @@ if (argv.production) {
process.env['NODE_ENV'] = 'production'; process.env['NODE_ENV'] = 'production';
} }
var deps = Object.keys(require('./package.json').dependencies);
gulp.task('html', function() { gulp.task('html', function() {
return gulp.src('src/*.html') return gulp.src('src/*.html')
.pipe(minifyHTML()) .pipe(minifyHTML())
@ -43,36 +47,42 @@ gulp.task('js', function() {
}); });
function js(watch) { function js(watch) {
var bundler, rebundle; var bundler = browserify('./src/js/app.js', {
bundler = browserify('./src/js/app.js', {
debug: !argv.production, debug: !argv.production,
transform: [babelify, strictify],
cache: {}, cache: {},
packageCache: {}, packageCache: {},
fullPaths: watch fullPaths: watch
}); });
if (watch) { bundler.external(deps);
bundler = watchify(bundler);
}
bundler var rebundle = function() {
.transform(babelify) return bundler.bundle()
.transform(strictify); .on('error', gutil.log)
rebundle = function() {
var stream = bundler.bundle();
stream.on('error', console.log);
return stream
.pipe(source('bundle.js')) .pipe(source('bundle.js'))
.pipe(gulpif(argv.production, streamify(uglify()))) .pipe(gulpif(argv.production, streamify(uglify())))
.pipe(gulp.dest('dist')); .pipe(gulp.dest('dist'));
}; };
bundler.on('time', function(time) { if (watch) {
console.log('JS bundle: ' + time + ' ms'); bundler = watchify(bundler);
bundler.on('update', rebundle);
bundler.on('log', gutil.log);
}
var vendorBundler = browserify({
debug: !argv.production,
require: deps
}); });
bundler.on('update', rebundle);
return rebundle(); var vendor = vendorBundler.bundle()
.on('error', gutil.log)
.pipe(source('vendor.js'))
.pipe(gulpif(argv.production, streamify(uglify())))
.pipe(gulp.dest('dist'));
return merge(rebundle(), vendor);
} }
gulp.task('lint', function() { gulp.task('lint', function() {
@ -110,7 +120,7 @@ gulp.task('bindata', ['gzip', 'config'], function(cb) {
bindata(cb); bindata(cb);
}); });
gulp.task('gzip:watch', function() { gulp.task('gzip:watch', ['lint'], function() {
return gulp.src('dist/**/*.{html,css,js}') return gulp.src('dist/**/*.{html,css,js}')
.pipe(gzip()) .pipe(gzip())
.pipe(gulp.dest('dist/gz')); .pipe(gulp.dest('dist/gz'));

View File

@ -12,13 +12,15 @@
"gulp": "~3.8.10", "gulp": "~3.8.10",
"gulp-autoprefixer": "2.2.0", "gulp-autoprefixer": "2.2.0",
"gulp-concat": "~2.5.2", "gulp-concat": "~2.5.2",
"gulp-eslint": "^0.12.0", "gulp-eslint": "0.13.2",
"gulp-gzip": "0.0.8", "gulp-gzip": "0.0.8",
"gulp-if": "~1.2.5", "gulp-if": "~1.2.5",
"gulp-minify-css": "1.1.1", "gulp-minify-css": "1.1.1",
"gulp-minify-html": "1.0.2", "gulp-minify-html": "1.0.2",
"gulp-streamify": "0.0.5", "gulp-streamify": "0.0.5",
"gulp-uglify": "1.2.0", "gulp-uglify": "1.2.0",
"gulp-util": "^3.0.5",
"merge-stream": "^0.1.7",
"reactify": "^1.1.1", "reactify": "^1.1.1",
"strictify": "~0.2.0", "strictify": "~0.2.0",
"vinyl-source-stream": "~1.0.0", "vinyl-source-stream": "~1.0.0",

View File

@ -10,6 +10,7 @@
<link href="bundle.css" rel="stylesheet"> <link href="bundle.css" rel="stylesheet">
</head> </head>
<body> <body>
<script src="vendor.js"></script>
<script src="bundle.js"></script> <script src="bundle.js"></script>
</body> </body>
</html> </html>

View File

@ -13,6 +13,7 @@ import (
) )
var files = []File{ var files = []File{
File{"vendor.js", "text/javascript"},
File{"bundle.js", "text/javascript"}, File{"bundle.js", "text/javascript"},
File{"bundle.css", "text/css"}, File{"bundle.css", "text/css"},
File{"font/fontello.woff", "application/font-woff"}, File{"font/fontello.woff", "application/font-woff"},