I am trying to use browserify to compile all js files.
The issue I am having is currently with: https://github.com/amsul/pickadate.js
In: https://github.com/amsul/pickadate.js/blob/master/lib/picker.date.js
It requires a relative path:
require('./picker.js')
I assume I will run into this issue again with other files.
Once all the js files get compiled and moved to my 'dest' directory this relative path is no longer correct.
Is there a way to overwrite this so it can get the right file?
Here is my full gulp task I am currently using:
gulp.task('js', function () {
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var globby = require('globby');
var through = require('through2');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var reactify = require('reactify');
// gulp expects tasks to return a stream, so we create one here.
var bundledStream = through();
bundledStream
// turns the output bundle stream into a stream containing
// the normal attributes gulp plugins expect.
.pipe(source('app.js'))
// the rest of the gulp task, as you would normally write it.
// here we're copying from the Browserify + Uglify2 recipe.
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
// Add gulp plugins to the pipeline here.
.pipe(uglify())
.on('error', gutil.log)
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./dest/js/'))
.pipe(connect.reload());
// "globby" replaces the normal "gulp.src" as Browserify
// creates it's own readable stream.
globby([
'./app/js/*.js',
'./app/js/materialize/**/*.js',
'./app/components/**/*.js'
], function(err, entries) {
// ensure any errors from globby are handled
if (err) {
bundledStream.emit('error', err);
return;
}
// create the Browserify instance.
var b = browserify({
entries: entries,
debug: true,
transform: [reactify]
});
var browser = browser({
});
// pipe the Browserify stream into the stream we created earlier
// this starts our gulp pipeline.
b.bundle().pipe(bundledStream);
});
// finally, we return the stream, so gulp knows when this task is done.
return bundledStream;
});
picker.js lives at: ./app/js/materialize/date_picker/picker.js
Which is the right location until I browserify and move it.
Related
Hi I'm looking to create a common bundle with dependencies shared by multiple pages and a page specific bundle for each page.
I can use this to create the multiple bundles:browserify-multiple-destination
But I need to create the common file with shared dependencies as to avoid duplication.
Is it possible to include factor-bundle to this task in order to separate common dependencies?
Browserify + Globs (multiple destination) Recipe
var gulp = require('gulp');
var browserify = require('browserify');
var gutil = require('gulp-util');
var tap = require('gulp-tap');
var buffer = require('gulp-buffer');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');
gulp.task('js', function () {
return gulp.src('src/**/*.js', {read: false}) // no need of reading file because browserify does.
// transform file objects using gulp-tap plugin
.pipe(tap(function (file) {
gutil.log('bundling ' + file.path);
// replace file contents with browserify's bundle stream
file.contents = browserify(file.path, {debug: true}).bundle();
}))
// transform streaming contents into buffer contents (because gulp-sourcemaps does not support streaming contents)
.pipe(buffer())
// load and init sourcemaps
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(uglify())
// write sourcemaps
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('dest'));
});
I'm working on a project that uses the following tools:
Gulp
Browserify
Babelify
Uglify
gulp-rename
gulp-sourcemaps
I'm able to generate the distribution file and it works correctly. The generated source map is not correct though. When I load it in Chrome, Chrome not able to map the distribution file to the source files. My problem is similar (but not the same) to this one. Unfortunately, this similar issue doesn't have an answer, thus it doesn't help me.
I've also tried to follow this recipe, but it doesn't fit my case.
This is the relevant code of my set up (gulpfile.js):
var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
gulp.task('build:dist', function() {
var browserifyInstance = browserify({
entries: 'src/module.js',
debug: true,
standalone: 'Module',
bundleExternal: false,
transform: [babelify]
});
return browserifyInstance
.bundle()
.pipe(source('module.js'))
.pipe(rename({
extname: '.min.js'
}))
.pipe(buffer())
.pipe(sourcemaps.init({
loadMaps: true
}))
.pipe(uglify())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('dist'));
});
How can I fix it?
I have a number of gulp tasks each residing in its own file (using the require-dir module) rather than a monolithic file.
I am using modules for configuration settings instead of json files (which I prefer for comments and for derived values).
To keep things simple here is an example setup with a single key I need to share/set between the gulp tasks.
/config/index.js
var config = {}
config.buildType = ''; // set this to either 'dev' or 'dist'
module.exports = config;
here is default task for which I want to set config.buildType to 'dev'
default.js
var gulp = require('gulp');
var config = require('../config/');
gulp.task('default', ['build'], function(cb) {
});
here is a deploy task for which I want to set buildType to 'dist'
deploy.js
var gulp = require('gulp');
var config = require('../config/');
gulp.task('deploy-s3', ['build'], function() {
});
here is a build task that I want to change based on buildType
build.js
var gulp = require('gulp');
var runSequence = require('run-sequence');
var config = require('../config/');
gulp.task('build', function(cb) {
console.log('in build',config.buildType);
if (config.buildType == 'dev') runSequence('clean',['sass',config.htmlGenerator], 'watch', cb);
if (config.buildType == 'dist') runSequence('clean',['sass',config.htmlGenerator], cb);
});
So here is the issue If I set config.buildType in default.js or deploy.js outside gulp.task then since they are all lumped into essentially one file by require-dir the value is simply whichever file was loaded last. If I set it inside the gulp.task function I am confused about about the timing/scope of that setting.
Update: Found this related issue https://github.com/gulpjs/gulp/issues/193. It was pointed out in this issue the task function starts after all the queued tasks so that means I can't set something inside the task function and expect it to be executed before the listed tasks (in my case 'build')
one poster made a task to set a parameter like this
gulp.task('set-dist', function () {
config.buildType = 'dist';
});
gulp.task('deploy', ['set-dist', 'build']);
So some advice..... do I go the way of this "hack" or is there some better way to do this??
(fyi, I am just a couple months into learning node/javascript on my own so my experience is limited)
You can use process.env to hold config attributes for your project. Check this.
In your case you can do:
var gulp = require('gulp');
var runSequence = require('run-sequence');
gulp.task('build', function(cb) {
if (process.env.NODE_ENV === 'development') {
runSequence('clean',['sass',config.htmlGenerator], 'watch', cb);
} else {
runSequence('clean',['sass',config.htmlGenerator], cb);
}
});
gulp build NODE_ENV=production for production
or gulp build NODE_ENV=development.
This will play nicely with existing CI tools like Travis.
Decided to go with this dropping the 'build' task altogether. It will hopefully work in some similar form after gulp 4.0 is released. It allows me to modify any setting before calling other tasks. Can use it with gulpif in tasks like my 'sass' task which is a pipe only task. Still wondering if there is a "better" way.
var gulp = require('gulp');
var config = require('../config/');
var runSequence = require('run-sequence');
gulp.task('default', function(cb) {
config.buildType='dev'
config.url = 'http://localhost:' + config.localport;
runSequence('clean',['sass',config.htmlGenerator],'watch', cb);
});
I am moving from the (working, but deprecated) gulp-browserify to the plain browserify module. My source tree looks like this:
projectdir
public
js
src
dist
My gulp task looks like the following:
var source = require('vinyl-source-stream');
gulp.task('js', ['clean'], function() {
// Browserify/bundle the JS.
bundler.bundle()
// log errors if they happen
.on('error', function(err) {
return notify().write(err);
})
.pipe(source('./public/js/src/index.js'))
.pipe(gulp.dest('./public/js/dist'));
});
However this writes out to public/js/dist/public/js/src/
which is obviously bad. However changin gulp.dest to read:
.pipe(gulp.dest('./public/js/dist'));
Writes outside my projects directory! ie:
~/Documents/dist/public/js/src/index.js
I've seen lots of gulp documentation using gulp.src, but I am not using gulp.src, I am using vinyl-source-stream
How can I make vinyl-source-stream output topublic/js/dist?
Ended up solving this on my own:
var bundler = watchify(browserify({
basedir: "./public/js/src"
}));
// Browserify our code
gulp.task('js', ['clean'], function() {
// Browserify/bundle the JS.
return bundler.bundle()
// log errors if they happen
.on('error', function(err) {
return notify().write(err);
})
.pipe(source('index.js'))
.pipe(gulp.dest('public/js/dist'));
});
Main thing to understand is that source uses browserify's basedir, whereas gulp.dest does not.
I have a library lib.js that I want to create from lib/a.js and lib/b.js and to be able to use it from a script client.js using var a = require('lib/a.js'); and that it works when I just include the compiled lib.js library before client.js (therefore, lib.js has to declare a require function that knows about lib/a.js)
I guess I have to use external and alias but I am not sure what is the proper way to do it
Also, is it possible to have a Gulp file that creates all the alias automatically for the folders in my library? eg. creates an alias for all the files in the lib/ dir?
Here are a couple of gulp tasks that would help to build your common lib.js and the client.js bundles separately.
Note that you have to tell browserify to b.require() lib/*.js when bundling lib.js, and you have to tell it to b.external() the libraries that will be loaded separately when bundling client.js
var path = require('path');
var gulp = require('gulp');
var browserify = require('browserify');
var concat = require('gulp-concat');
var transform = require('vinyl-transform');
gulp.task('build-lib', function () {
// use `vinyl-transform` to wrap around the regular ReadableStream returned by b.bundle();
// so that we can use it down a vinyl pipeline as a vinyl file object.
// `vinyl-transform` takes care of creating both streaming and buffered vinyl file objects.
var browserified = transform(function(filename) {
// basename, for eg: 'a.js'
var basename = path.basename(filename);
// define the exposed name that your client.js would use to require();
// for eg: require('lib/a.js'); // -> exposed name should be 'lib/a.js'
var expose = 'lib/' + basename;
return browserify(filename)
.require(filename, { expose: expose})
.bundle();
});
return gulp.src(['./lib/*.js'])
.pipe(browserified)
.pipe(concat('lib.js'))
.pipe(gulp.dest('./dist'));
});
gulp.task('build-client', function () {
var browserified = transform(function(filename) {
// filename = './client.js'
// let browserify know that lib/a.js and and lib/b.js are external files
// and will be loaded externally (in your case, by loading the bundled lib.js
// for eg: <script src='dist/lib.js'>)
return browserify(filename)
.external('lib/a.js')
.external('lib/b.js')
.bundle();
});
return gulp.src(['./client.js'])
.pipe(browserified)
.pipe(gulp.dest('./dist'));
});
gulp.task('default', ['build-lib', 'build-client']);
Are you looking for external requires?
To use with gulp-browserify, check the README
.on('prebundle', function(bundle) {
bundle.external('domready');
bundle.external('react');
})
Should work with bundle.require as well.