I use this browserify task to bundle my javascript:
gulp.task('browserify', function(done) {
var files = globby.sync(local.jsBundles);
return merge(files.map(function(file) {
return browserify({
entries: file,
debug: true
}).transform(babelify, {presets: ["env", "react"]})
.bundle()
.on('error', function(e) {
console.log(gutil.colors.bgBlack('[Error while bundling]'));
console.log(gutil.colors.gray(e.message));
this.emit('end');
})
.pipe(source(path.basename(file, '.js') + '.js'))
.pipe(buffer())
.pipe(uglify())
.pipe(sourcemaps.write())
.pipe(gulp.dest(local.jsDist + '/bundles'))
})).on('end', done);
});
This works very well for me; But it takes about 18 seconds to finish, even though I am only bundling 6 files. I realize that browserify also follows the imports from the react packages. Several solutions I could find suggested working with watchify, but I couldn't get it to work on my task. Could anyone help me with this and tell what I am doing wrong here?
Related
My project's setup uses a combination of python's Flask on the backend which serves a fairly simple javascript React webpage using gulp.
Whether I'm debugging frontend code through Chrome or Firefox, I have to do a hard refresh multiple times before the changes make it to the browser. I see the gulp console log Finished 'transform' after N ms after each save, which leads me to believe it's the browsers fault.
I am not a front end engineer so I'm wondering what more experienced devs use. Hitting Cmd+Shift+R 5-20 times after each save is a little mind bogglingly inefficient.
current gulpfile.js:
'use strict';
var gulp = require('gulp'),
browserify = require('browserify'),
size = require('gulp-size'),
del = require('del'),
babelify = require('babelify'),
source = require('vinyl-source-stream'),
gutil = require('gulp-util');
var compiled_dir = './static/scripts/jsc';
var js_dir = './static/scripts/js';
function handle_error(err) {
gutil.log(err.message);
gutil.beep();
return process.exit(2);
}
gulp.task('transform', function () {
browserify({ entries: js_dir + '/main.js', debug: true })
.transform(babelify)
.bundle()
.on('error', handle_error)
.pipe(source('main.js'))
.pipe(gulp.dest(compiled_dir));
browserify({ entries: js_dir + '/userMgmt.js', debug: true })
.transform(babelify)
.bundle()
.on('error', handle_error)
.pipe(source('userMgmt.js'))
.pipe(gulp.dest(compiled_dir));
});
gulp.task('clean', function (cb) {
del([compiled_dir], cb);
});
gulp.task('default', ['clean'], function () {
gulp.start('transform');
gulp.watch(js_dir + "/*", ['transform']);
});
Method 1: Use this gulp-cache package to disable cache in development mode.
This will work:
var gulp = require('gulp');
var usemin = require('gulp-usemin');
var cache = require('gulp-cache');
gulp.task('default', function () {
return gulp.src('src/index.html')
.pipe(gulp.task('clear', function (done) {
return cache.clearAll(done);
});)
.pipe(usemin({
js: []
}))
.pipe(gulp.dest('dist'));
});
If you don't know how to use it, please update your question with gulp config file, I will configure you that.
Method 2: Configure your watcher.
$ npm install browser-sync --save-dev
var browserSync = require('browser-sync').create();
gulp.watch(['./**/*.{scss,css,html,py,js}'], ['clearCache', browserSync.reload]);
gulp.task('clearCache', function (done) {
return cache.clearAll(done);
});
I have multiple files for test case in a folder and I want to run only one file, how can I do this?
Now I am giving like this:
'test/**/*.spec.js' in karma.conf.js
and the following code is in gulpfile.js-
gulp.task('test', function (done) {
new Server({
configFile: __dirname + '/karma.conf.js',
singleRun: true
}, function () {
done();
}).start();
});
Here, test is my folder where all test case js files are present.
How can I specify one js file?
Along with configFile you specify the options that will overwrite the ones from config file (e.g. singleRun).
So it has to be
gulp.task('test', function (done) {
new Server({
configFile: __dirname + '/karma.conf.js',
files: ['test/some.spec.js'],
singleRun: true
}, function () {
done();
}).start();
});
For this worked like a charm:
gulp test --specs path/file.spec
you can also use fit and fdescribe in order to run single testcase along with config mentioned, above
When I run gulp I get an "updating!" and "updated!" log after saving main.js but there's no bundle ever built
gulpfile.js:
var watchify = require('watchify');
var reactify = require('reactify');
var concat = require('gulp-concat');
var util = require('gulp-util');
gulp.task('browserify', function() {
var bundler = browserify({
entries: ['./dist/main.js'], // Only need initial file, browserify finds the deps
transform: [reactify], // We want to convert JSX to normal javascript
debug: true, // Gives us sourcemapping
cache: {}, packageCache: {}, fullPaths: true // Requirement of watchify
});
var watcher = watchify(bundler);
return watcher
.on('update', function () { // When any files update
var updateStart = Date.now();
console.log('Updating!');
watcher.bundle() // Create new bundle that uses the cache for high performance
.pipe(source('main.js'))
.on('error', util.log)
// This is where you add uglifying etc.
.pipe(gulp.dest('/build/'));
console.log('Updated!', (Date.now() - updateStart) + 'ms');
})
.on('error', util.log)
.bundle() // Create the initial bundle when starting the task
.pipe(source('main.js'))
.pipe(gulp.dest('/build/'))
.on('error', util.log);
});
// I added this so that you see how to run two watch tasks
gulp.task('css', function () {
gulp.watch('styles/**/*.css', function () {
return gulp.src('styles/**/*.css')
.pipe(concat('main.css'))
.pipe(gulp.dest('build/'));
});
});
// Just running the two tasks
gulp.task('default', ['browserify', 'css']);
My file structure is
/build
/dist
-index.html
-main.js
/node_modules
/styles
gulpfile.js
I am not finding any errors and I am completely lost at this point. I've tried changing directories around and reloading everything but nothing works.
Update lines that contain gulp.dest('/build/') to gulp.dest(__dirname + '/build/'). Currently your file located at drive_root_dir/build/main.js
here's my gulp file
var gulp = require('gulp')
var browserify = require('browserify')
var source = require('vinyl-source-stream')
var reactify = require('reactify')
var rename = require('gulp-rename')
gulp.task('js', function() {
var b = browserify({
entries: ['./lib/test.js', './lib/app.jsx'],
transform: [reactify],
extensions: ['.js','.jsx'],
debug: false,
cache: {},
packageCache: {},
fullPaths: false
});
function build(file) {
return b
.external('jquery')
.plugin('minifyify', {
map: false
})
.bundle()
.pipe(source('main.js'))
// Add .min.js to the end of each optimized file
.pipe(gulp.dest('./js/'));
};
build();
});
gulp.task('watch', function() {
gulp.watch("lib/*.jsx", ["js"])
})
gulp.task('default', ['js', 'watch']);
purpose is to convert all jsx to 1 js file.
Is my gulpfile production ready?
Also, how can I simplify the line:
entries: ['./lib/test.js', './lib/app.jsx'],
so that browserify handles all js files in lib/ directory?
If you want some pro-level gulpfiles, check https://github.com/greypants/gulp-starter and the 2.0 branch: https://github.com/greypants/gulp-starter/tree/2.0 . The guy has some nice tricks up his sleeves.
Generally speaking, it's a good practice to go the gulp.src way, see this answer: https://stackoverflow.com/a/25319817/5229638
I have the following gulp task (originally from this blog):
var path = {
MAIN_JSX: './myapp/app/jsx/main.js',
APP_DIR: 'myapp/app',
APP_JS: 'app.js',
};
gulp.task('watch', function() {
var watcher = watchify(browserify({
entries: [path.MAIN_JSX],
transform: [reactify],
debug: true,
cache: {}, packageCache: {}, fullPaths: true
}));
return watcher.on('update', function () {
watcher
.bundle()
.on('error', function(err) {
console.log(err.message)
this.end();
})
.pipe(source(path.APP_JS))
.pipe(gulp.dest(path.APP_DIR));
console.log('Updated on ' + (new Date().toString()));
})
.bundle()
.on('error', function(err) {
console.log(err.message)
this.end();
})
.pipe(source(path.APP_JS))
.pipe(gulp.dest(path.APP_DIR));
});
gulp.task('default', ['watch']);
The task runs first time I issue gulp command; and then first time I update main.js file. After that it doesn't run at all. What's wrong here?
There was a lot of discussion about this problem here on Github.
Though it sounds like there may be a number of things going on to cause this issue, I followed the same tutorial on Ubuntu 14.04 and what worked for me was to use Watchify's polling feature:
var watcher = watchify(..., {poll: true});
From the discussion on Github it sounds like this worked for some people but not others.