Modify gulp file to run customized browserify command - node.js

I would like to use gulp to run a custom browserify command whenever a js file (function.js) is modified.
The browserify command that I want to run is;
$ browserify function.js --standalone function > bundle.js
I am using this gulpfile.js as sample.
https://github.com/gulpjs/gulp/blob/master/docs/recipes/fast-browserify-builds-with-watchify.md
How do I modify this gulpfile to run the customized browserify command?
'use strict';
var watchify = require('watchify');
var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var gutil = require('gulp-util');
var sourcemaps = require('gulp-sourcemaps');
var assign = require('lodash.assign');
// add custom browserify options here
var customOpts = {
entries: ['./src/index.js'],
debug: true
};
var opts = assign({}, watchify.args, customOpts);
var b = watchify(browserify(opts));
// add transformations here
// i.e. b.transform(coffeeify);
gulp.task('js', bundle); // so you can run `gulp js` to build the file
b.on('update', bundle); // on any dep update, runs the bundler
b.on('log', gutil.log); // output build logs to terminal
function bundle() {
return b.bundle()
// log errors if they happen
.on('error', gutil.log.bind(gutil, 'Browserify Error'))
.pipe(source('bundle.js'))
// optional, remove if you don't need to buffer file contents
.pipe(buffer())
// optional, remove if you dont want sourcemaps
.pipe(sourcemaps.init({loadMaps: true})) // loads map from browserify file
// Add transformation tasks to the pipeline here.
.pipe(sourcemaps.write('./')) // writes .map file
.pipe(gulp.dest('./dist'));
}
I am using node.js v6.9 on webstorm.

The command you want to run is;
$ browserify function.js --standalone function > bundle.js
Based on this, the modified code is;
// add custom browserify options here
var customOpts = {
entries: ['./function.js'],
standalone: 'function',
};
Simply add one more property to customOpts for the --standalone parameter. The rest of the code remains the same.

Related

Reuseable configuration file for gulp

I want to ask a question about importing js file into another js file and use it in gulp. You can see my gulp.config file and gulpfile. when i try to run gulp task which is vet i am getting error like this ;
[00:06:21] Using gulpfile ~\pluralsight-gulp-master\gulpfile.js
[00:06:21] Starting 'vet'...
[00:06:21] 'vet' errored after 13 ms
[00:06:21] Error: Invalid glob argument: undefined
at Gulp.src (C:\Users\Altan\pluralsight-gulp-master\node_modules\vinyl-fs\li
b\src\index.js:20:11)
gulp.config.js
module.exports = function(){
var config = {
//all js to vet
alljs: [
'./src/**/*.js',
'./*.js'
]
};
return config;
};
gulpfile.js
var gulp = require ('gulp');
var jscs = require ('gulp-jscs');
var jshint = require ('gulp-jshint');
var util = require ('gulp-util');
var gulpprint = require ('gulp-print').default;
var gulpif = require ('gulp-if');
var args = require ('yargs').argv;
var config= require('./gulp.config');
gulp.task('vet',done=>{
gulp
.src(config.alljs)
.pipe(gulpif(args.verbose,gulpprint()))
.pipe(gulpprint())
.pipe(jscs())
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish',{verbose:true}));
done();
});
you are returning a function from gulp.config.js
when you require it, it should be
require('./gulp.config')()

require is not defined error on gulp-concat

I want to uglify and combine my js files with gulp. Here is my code
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var pump = require('pump');
var gutil = require('gulp-util');
gutil.env.type = 'production';
gulp.task('uglify', function (cb) {
return gulp.src([
'pure/modernizr.js',
'pure/horizon.js'
])
.pipe(gutil.env.type === 'production' ? uglify() : gutil.noop())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest("ugly"));
});
var sourcemaps = require("gulp-sourcemaps");
var concat = require("gulp-concat-js");
gulp.task("concat", function () {
return gulp.src([
'ugly/modernizr.js',
'ugly/horizon.js'
])
.pipe(sourcemaps.init())
.pipe(concat({
"target": "concatenated.js", // Name to concatenate to
"entry": "./main.js" // Entrypoint for the application, main module
// The `./` part is important! The path is relative to
// whatever gulp decides is the base-path, in this
// example that is `./lib`
}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest("pure/"));
});
I end up with some code enclosing my js files from obfuscator stating:
//// THIS FILE IS CONCATENATED WITH gulp-obfuscator-js
When I include this in code, it throws require is not defined, I surf around the web and found one similar question. But that answer is also not clear for me. I believe that I miss some small thing here, since I am new to gulp.
The issue here is I have used gulp-concat-js which obfuscate your js. I should have used gulp-concat. May help someone.

gulp-concat throws exception 'file.isNull(), index.js:39 TypeError: file.isNull is not a function

I am attempting to compile react (.jsx), coffeescript (.coffee), and vanilla javascript (.js) files using gulp to package all of the resulting .js files into one file, app.js, which gets loaded into my index.html page. I am generating a stream for each compilation type and using merge-stream to collect the contents of the 3 feeder streams into a single stream, which I am passing to gulp-concat to create app.js.
I am getting an exception from gulp-concat, index.js, line 39, letting me know that 'file' is not a function. Here is my entire gulpfile.js, the reference to gulp-concat is near the bottom of this section.
var browserify = require('browserify');
var coffee = require('gulp-coffee');
var concat = require('gulp-concat');
var gulp = require('gulp');
var gutil = require('gulp-util');
var mergeStream = require('merge-stream');
var reactify = require('reactify');
var sass = require('gulp-sass');
var source = require('vinyl-source-stream');
gulp.task('javascript', function(){
// convert .jsx files to .js, collecting them in a stream
var b = browserify();
b.transform(reactify); // use the reactify transform
b.add('./jsx-transforms.js');
jsxStream = b.bundle();
if (gutil.isStream(jsxStream)) {
gutil.log("jsxStream is a stream");
} else {gulp-concatgulp
gutil.log("jsxStream is not a stream");
}
merged = mergeStream(jsxStream);
if (gutil.isStream(merged)) {
gutil.log("merged is a stream");
} else {
gutil.log("merged is not a stream");
}
// collect all .js files in a stream
jsStream = gulp.src(['./client/**/*.js','./common/**/*.js']);
if (gutil.isStream(jsStream)) {
gutil.log("jsStream is a stream");
} else {
gutil.log("jsStream is not a stream");
}
merged.add(jsStream);
// compile all .coffee file to .js, collect in a stream
coffeeStream = gulp.src(['./client/**/*.coffee','./common/**/*.coffee'])
.pipe(coffee({bare: true}).on('error', gutil.log));
if (gutil.isStream(coffeeStream)) {
gutil.log("coffeeStream is a stream");
} else {
gutil.log("coffeeStream is not a stream");
}
merged.add(coffeeStream);
// concatenate all of the .js files into ./build/app.js
merged
.pipe(concat('app.js'))
.pipe(gulp.dest('./build'));
});
gulp.task('styles', function() {
gulp.src('./client/assets/stylesheets/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(concat('app.css'))
.pipe(gulp.dest('./build'));
});
gulp.task('default', ['javascript', 'styles']);
I have used gulp-concat before, but never hit this problem before.
Gulp streams are a very particular sort of stream: they are Node streams in object mode containing vinyl file objects. If your stream comes from somewhere other than gulp.src(), such as from the browserify API, then you will have to first convert the stream into the sort that gulp can deal with.
There are two steps you need to take. First, convert your browserify bundle stream into a stream containing a vinyl file object with vinyl-source-stream (which you have required but not used).
var source = require('vinyl-source-stream');
...
var jsxStream = b.bundle()
.pipe(source('bundle.js'));
Now there is another catch. Vinyl streams may be in one of two modes: streaming mode or buffer mode. Vinyl-source-stream gives you a stream in streaming mode. Many Gulp plugins, including gulp-concat, only support buffer mode. The fix for this is easy: use vinyl-buffer.
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
...
var jsxStream = b.bundle()
.pipe(source('bundle.js'))
.pipe(buffer());
Now you have something you can merge with your other streams and pipe to gulp-concat. For more detail, see this recipe.

Browserify + browserify-ngannotate + Tsify not working

I'm using gulp with browserify and tsify. This has been working quite well. Then I decided to add ng-annotate using browserify-ngannotate.
I've added the ng-annotate browserify transform but it seems that if tsify is added as a plugin the ng-annotate transform is never called.
If I remove the tsify plugin then ng-annote gets called. I've played around and switched around the plugin/transform registration. Am I missing something here, or should I go and log an issue at browserify/tsify?
var browserify = require('browserify');
var browserSyncConfig = require('../config').browserSync;
var browserSync = require('browser-sync').get(browserSyncConfig.instance);
var watchify = require('watchify');
var tsify = require('tsify');
var ngAnnotate = require('browserify-ngannotate');
var mergeStream = require('merge-stream');
var bundleLogger = require('../util/bundleLogger');
var gulp = require('gulp');
var handleErrors = require('../util/handleErrors');
var source = require('vinyl-source-stream');
var config = require('../config').browserify;
var _ = require('lodash');
var browserifyTask = function (devMode) {
var browserifyThis = function (bundleConfig) {
if (devMode) {
// Add watchify args and debug (sourcemaps) option
_.extend(bundleConfig, watchify.args, {debug: true});
// A watchify require/external bug that prevents proper recompiling,
// so (for now) we'll ignore these options during development. Running
// `gulp browserify` directly will properly require and externalize.
bundleConfig = _.omit(bundleConfig, ['external', 'require']);
}
var b = browserify(bundleConfig);
if (bundleConfig.tsify) {
b = b.plugin(tsify, {
noImplicitAny: false,
target: 'ES5',
noExternalResolve: false,
module: 'commonjs',
removeComments: false
});
}
if (bundleConfig.ngAnnotate) {
b = b.transform(ngAnnotate);
}
var bundle = function () {
// Log when bundling starts
bundleLogger.start(bundleConfig.outputName);
return b
.bundle()
// Report compile errors
.on('error', handleErrors)
// Use vinyl-source-stream to make the
// stream gulp compatible. Specify the
// desired output filename here.
.pipe(source(bundleConfig.outputName))
// Specify the output destination
.pipe(gulp.dest(bundleConfig.dest))
.pipe(browserSync.stream());
};
if (devMode) {
// Wrap with watchify and rebundle on changes
b = watchify(b, {
poll: true
});
// Rebundle on update
b.on('update', bundle);
bundleLogger.watch(bundleConfig.outputName);
} else {
// Sort out shared dependencies.
// b.require exposes modules externally
if (bundleConfig.require) b.require(bundleConfig.require);
// b.external excludes modules from the bundle, and expects
// they'll be available externally
if (bundleConfig.external) b.external(bundleConfig.external);
}
return bundle();
};
// Start bundling with Browserify for each bundleConfig specified
return mergeStream.apply(gulp, _.map(config.bundleConfigs, browserifyThis));
};
gulp.task('browserify', function () {
return browserifyTask()
});
// Exporting the task so we can call it directly in our watch task, with the 'devMode' option
module.exports = browserifyTask;
You can solve it by specify extensions in ng-annotate options.
bundler.transform(ngAnnotate, { ext: ['.ts', '.js'] });
I realized I had this problem too, when I added uglifyify to the bundle transforms to produce minified builds.
An important aspect of my solution is that the missing, explicit $inject statements, that ng-annotate should have inserted, doesn't matter until the code is actually minified. Luckily, UglifyJS2, which does the actual minification in uglifyify, got support for handling ng-annotate's ngInject comments in version 2.4.9 (in January, 2014).
So, the solution that worked for me was to install uglifyify:
npm install --save-dev uglifyify
and add the following uglifyify transform to the Browserify bundle:
b.transform({
global: true,
mangle: false,
comments: true,
compress: {
angular: true
}
}, 'uglifyify');
This will make UglifyJS2 insert the appropriate $inject statements into your code before it is minified.
So, to summarize, I did not have a solution for only using ng-annotate, but my solution will add the necessary $inject statements before the code is minified, which is what matters in most cases.

Browserify + Remapify (Gulp workflow)

I've successfully got Browserify to compile my JavaScript entry files, but I want to utilise the Remapify plugin so as to not have to specify the full relative path upon requiring a module every time.
For example:
require('components/tabs.js')
Rather than:
require('../../components/tabs/tabs.js').
But I cannot get the shorter module references to map to the corresponding file... "Error: Cannot find module [specified_ref] from [file]".
Have I misconfigured Remapify, or is there something wrong with my wider Browserify setup? I am new to Broswerify and Gulp having previously used Require.js and Grunt. Any help would be greatly appreciated. Please let me know if you need any more information about my setup.
If alternatively you can recommend an alternative Gulp task file that will do all of this, thereby throwing my current task out the window, by all means. I wasn't able to find many Browserify + Remapify examples.
Directory Structure
I have my modules (components) in the following directory: './src/components', so for example: './src/components/tabs/tabs.js'.
I am requiring these modules in a JS file for a given page of the app, which are in: './src/pages', so for example, './src/pages/portfolio/portfolio.js'.
Gulp Browserify Task
var gulp = require('gulp');
var config = require('../config');
var browserify = require('browserify');
var remapify = require('remapify');
var source = require('vinyl-source-stream');
var glob = require('glob');
var browserSync = require('browser-sync');
gulp.task('browserify', function(){
var entries = glob.sync(config.src.pages + '/**/*.js');
return browserify({
entries: entries,
debug: true
})
// (Remapify:)
.plugin(remapify, [{ src: config.src.components + '/**/*.js', expose: 'components', cwd: config.srcDir }])
.bundle()
.pipe(source('app.js'))
.pipe(gulp.dest(config.build.js))
.pipe(browserSync.reload({ stream: true }));
});
Page.js
'use strict';
var tabs = require('components/tabs.js'); // (Doesn't work, but I want it to)
// var tabs = require('../../components/tabs/tabs.js'); // (Does work)
Remapify has all sorts of problems. I suggest giving my pathmodify plugin a shot.
For your situation usage would look something like:
var pathmod = require('pathmodify');
// ...
.plugin(pathmod(), {mods: [
pathmod.mod.dir('components', '/path/to/src/components'),
]})

Resources