gulp,browser-cache,browserify,react-jsx , Using Browserify with a revision manifest in Gulp, getting “Error: write after end”

Using Browserify with a revision manifest in Gulp, getting “Error: write after end”


Tag: gulp,browser-cache,browserify,react-jsx

I'm trying to compile a React app, append a hash to the output filename and produce a revision manifest, so that I can tell the browser to cache it forever. The problem is that the dozen or so tools involved don't all work together perfectly, at least as far as I can figure out by trying to assimilate all of their readmes and juggle .pipe calls.

Gulpfile: gist

Gulp task:

gulp.task( 'compile:js', function() {
    var browserifyTransform = transform( function( filename ) {
        return browserify( filename )
            .transform( reactify )

    return gulp.src( 'src/index.js' )
        .pipe( browserifyTransform )
        .pipe( sourcemaps.init({ loadMaps: true }))
        .pipe( uglify() )
        .pipe( rev() )
        .pipe( gulp.dest( 'static/dist' ));

update Simplified version, same error:

gulp.task( 'compile:js', function() {
    var browserifyTransform = transform( function( filename ) {
        return browserify( filename )
            .transform( reactify )

    return gulp.src( 'src/index.js' )
        .pipe( browserifyTransform )
        .pipe( gulp.dest( 'static/dist' ));

Error stack:

[15:55:04] Using gulpfile ~/Projects/pixsplodr/gulpfile.js
[15:55:04] Starting 'compile:js'...

Error: write after end
    at writeAfterEnd (/home/dan/Projects/pixsplodr/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:161:12)
    at Labeled.Writable.write (/home/dan/Projects/pixsplodr/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:208:5)
    at write (_stream_readable.js:601:24)
    at flow (_stream_readable.js:610:7)
    at _stream_readable.js:578:7
    at process._tickCallback (node.js:419:13)


Well, I have solution that satisfies my requirements, but it isn't perfect.

  1. Let Browserify start the stream from a file name, instead of using gulp.src
  2. Use vinyl-source-stream to transform Browserify's Node stream to a Gulp stream, before passing the data on to other gulp plugins

I am also using gulp-rev to append a hash to generated filenames, and to create a manifest that maps them to their original filename.

I was having trouble with source maps earlier too, but I have found that using Browserify transforms and settings seems to work better than using Gulp plugins on Browserify's output. That might be entirely due to user error, but I have been seeing so many conflicting Browserify / Gulp examples and minimal examples that I was unable to extend in an intuitive way, that I am just glad to have a working build with all of the features that I wanted.

var gulp = require( 'gulp' );
var gutil = require( 'gulp-util' );
var watchify = require( 'watchify' );
var browserify = require( 'browserify' );
var source = require( 'vinyl-source-stream' );
var buffer = require( 'vinyl-buffer' );
var sass = require( 'gulp-sass' );
var _ = require( 'lodash' );
var rev = require( 'gulp-rev' );

// Dev build
gulp.task( 'watch', [ 'sass' ], function() { 'node_modules/quiz/style/**/*.scss', [ 'sass' ]);
    builder( './src/app/index.js', true ).bundle( './dist/static', 'quiz-app.min.js' );

// Production build
gulp.task( 'build', [ 'sass' ], function() {
    builder( './src/app/index.js', false ).bundle( './dist/static', 'quiz-app.min.js' );

// snip //

function builder( entry, isDev ) {
    var bundler;

    if( isDev ) {
        bundler = watchify( browserify(
            _.extend( watchify.args, { debug: true })
    } else {
        bundler = browserify(

    bundler.transform( 'reactify' );
    bundler.transform( 'es6ify' );
    bundler.transform({ global: true }, 'uglifyify' );

    bundler.on( 'log', gutil.log ); // Help bundler log to the terminal

    function bundle( dest, filename ) {
        return bundler.bundle()
        .on( 'error', gutil.log.bind( gutil, 'Browserify error' )) // Log errors during build
        .pipe( source( filename ))
        .pipe( buffer() )
        .pipe( rev() )
        .pipe( gulp.dest( dest ))
        .pipe( rev.manifest() )
        .pipe( gulp.dest( dest ));

    return { bundle: bundle };

I also tried just using the tools from NPM scripts, but I was unable to find a good way to do incremental builds while watching a set of files.


Memory leak caused by gulp & nodemon

I have this simple gulpfile that basically compiles some less files and triggers livereload. I also have nodemon to restart the server when code is changed. var gulp = require('gulp'), less = require('gulp-less'), autoprefixer = require('gulp-autoprefixer'), minifycss = require('gulp-minify-css'), jshint = require('gulp-jshint'), uglify = require('gulp-uglify'), // imagemin = require('gulp-imagemin'), rename...

Ignore certain Gulp-less errors, or prevent it from attempting to call @imports with css keyword

So I am using gulp as a task engine to handle less compilation (among other things), and part of our stylesheets include fonts from Here's the relevant task in our gulpfile: var gulp = require('gulp'), plugins = require('gulp-load-plugins')({ camelize: true }); browserSync = require('browser-sync'); reload = browserSync.reload; gulp.task('styles', function()...

Multiple React components in a single module

I am new to the whole browserify thing. I have been trying to use browserify + reactify + gulp to transform, minify and combine a React application. As long as I have a single React.createClass with a single module.exports = MyComponent everything works fine. Since I have several shared components...

CodeIgniter session issue after sign out browser back button landed to the secured page

I am using codeIgniter 2.1.4 in my application. If am in a page that require authentication. Then I logout after logout if I use browser back button it will get me back to the secured page. I can only view the page. If I refresh or click on any link...

Angular 2/Typescript: require not found

I am trying to get the angular 2 example running with a gulp typescript compiler. The gulp-script compiles import {Component, View, bootstrap} from 'angular2/angular2'; to var angular2_1 = require("angular2/angular2") which does not run in the browser. What is wrong with this? As far as I know, this kind of implementation...

sass file not compiled by gulp

I want to switch from less to sass so I installed gulp-sass with npm and modified my gulpfile to compile sass instead of less (nothing else changed). Sadly gulp doesn't compile my .scss file to css and after googling and trying all i could think of it still doesn't compile....

How to remove/replace cached css and js file from client Browser?

Is there a way by which we can replace or remove the cached css and js files from client browser when they come to the website next time?

Use Gulp-imagemin with imagemin-jpeg-recompress plugin?

I'm just experimenting with Gulp to simply optimize images. I find that imagemin-jpeg-recompress reduces JPGs more than the default optimizer that comes with gulp-imagemin. I'm wondering if there is a way to use gulp-imagemin but swap out the jpegtran plugin for the the imagemin-jpeg-recompress. I can't seem to find any...

Gulp task does not run - becomes a callback for other tasks instead

I have a task that goes like this: var gulp = require('gulp'); gulp.task('doStuff', ['a', 'b', 'c'], function () { console.log("success"); }); I have read the docs, and from what I understood, this is what should happen: gulp creates a task called doStuff; gulp runs tasks a, b and c asynchronally;...

How to set up wiredep with gulp and jade

I am trying to inject bower files into my jade/html using wiredep. The issue is twofold. If I were to keep the bower_component in the root folder. Being that my server is set up from ./dist and not from root, I am unable to reach bower_compoents If I were to...

Why do I have to use vinyl-source-stream with gulp?

I am trying to use gulp and browserify to transform my .jsx files into .js files. var gulp = require('gulp'); var browserify = require('browserify'); var reactify = require('reactify'); gulp.task('js', function () { browserify('public/javascripts/src/app.jsx') .transform(reactify) .bundle() .pipe(gulp.dest('public/javascripts/dist')) }); ``` The above threw Arguments to path.resolve must be strings. I managed to...

Gulp copy single file (src pipe dest) with wildcarded directory

I am trying to copy a specific file src C:\Project\dir1\dirv-1.0.0\tools\file.exe to a specific directory dest C:\Project\dir2\ using gulp. The version number in dirv-1.0.0 could change in the future, so I want to wildcard the version number. Here is the task I have for that (gulpfile.js is in C:\Project): gulp.task('copy', function(){...

Utilising the output of two previous gulp streams

I would like to take the result of a CSS processing step getCss, and a JS processing step getJs, then use these two results to create a file named index.html, which is the result of inlining the processed CSS and processed JS into a template named index-template.html. Can someone help...

Configure Gulp 'watch' task for very basic server-restart (Node JS)

I'm trying to get the Gulp 'watch' task to restart the server when I make a change to a controller file.. to pick up those changes w/out having to manually restart the server. Can someone post a small example with instructions to run it correctly?...

Start hexo to generate a watch in a gulpfile.js?

I have the following gulpfile.js var gulp = require('gulp'), browserSync = require('browser-sync'), sass = require('gulp-sass'), bower = require('gulp-bower'), notify = require('gulp-notify'), reload = browserSync.reload, bs = require("browser-sync").create(), Hexo = require('hexo'), hexo = new Hexo(process.cwd(), {}); var src = { scss: './scss/', css: './source/css', ejs: 'layout' }, watchFiles = [ './scss/*.scss',...

Gulp task not accessing karma.conf.js file

I am using following gulp task to execute the karma/jasmine unit test cases . however i was not able access the karma.conf.js file for some reason. this problem occurs when i use this pathpackage to access the karma.conf.js file. gulp task gulp.task('tdd', function (done) { karma.start({ configFile: fs.readFile(path.join(__dirname, '../Tests/karma.conf.js')), singleRun:...

Get an array of file names without extensions from a directory in Gulp?

I want to get each of the file names in 2 directories (helpers/ and dialogs/) into an array without the file extension using Gulp and/or NPM. Note that the array will be pre-populated with values - I need to append the file names to this array. In other words, my...

Load libraries with wiredep

I am doing my first steps in AngulaJS. And i try load dependences via Bower and a Gulpfile. I have instaled wiredep, gulp-inject and bower. In my Gulpfile.js i have defined the next tasks: 'use strict'; var gulp = require('gulp'); var inject = require('gulp-inject'); var wiredep = require('wiredep').stream; gulp.task('inject', function()...

How do I save a result of javascript to a file in gulp

To lower client machine overhead, I want to save a JSON result of javascript to a file as a build step using gulp. How can I do this?

Code breaks after using gulp-uglify : Ionic Framework

I'm just new to Ionicframework and new to using gulp. I am currently setting up my workflow and I use gulp-uglify to minify my app files. After using it the code breaks so I checked on the console and got this error. Uncaught Error: [$injector:modulerr] Failed to instantiate module ebhealth...

Trying to run a Gulp script that needs ruby on PHPStorm

I've edited a simple Gulp pipeline (that i've tested and works outside the IDE) and i'm now trying to include it into PHPStorm Project in order to achieve a better css workflow in a real project. This is the script, (it's a simple css optimization pipeline): var gulp = require('gulp'),...

Why does the web server sent the file instead of a 304 http: not modified?

My browser send to the server the following request: Host: User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:38.0) Gecko/20100101 Firefox/38.0 Accept: */* Accept-Language: fr,fr-FR;q=0.8,en-US;q=0.5,en;q=0.3 Accept-Encoding: gzip, deflate If-Modified-Since: Fri, 29 May 2015 14:22:44 GMT If-None-Match: "90-5173935ad3a1a-gzip" Referer: Cookie: <hidden> Connection: keep-alive The url used is (note:...

Website html doesnt update for users because of cache

I am making a website and am running into an issue with website cache for my users. I develop my website and have set chrome developer tools to disable cache for my website for development. The issue is when i release a new change to prod all my users don't...

Gulp task runs much faster without 'return' statement - why is that?

Gulp task formed like this (without return) runs much faster: gulp.task('less', function () { gulp.src('./less/**/*.less') .pipe(less()) .pipe(gulp.dest('./destination')); }); than the same one with return: gulp.task('less', function () { return gulp.src('./less/**/*.less') .pipe(less()) .pipe(gulp.dest('./destination')); }); So, my question is what does Gulp task is supposed to return? Why is it so much...

How to include jQuery to my app?

I'm developing the app based on angular gulp generator. I want to use the angular-ui and bootstrap components. I am able to build the application, but generated index.html file contains script tags for boostrap, angular ui but jquery is missing here. I have jquery in bower.js file and I ran...

Getting gulp-sourcemaps to map correctly with a series of plugins

I have a git repo with multiple plugins (1 main one and several that are only intended to work with the main one). I am using this approach for distribution, since bower doesn't provide a way to have more than one plugin per git repo. So, I need to minify...

CDATA showing up in my HTML page. Why?

I have an HTML page but when I load it on my phone there is a long text that begins with something like "CDATA". I didn't add anything like that to my page. I minified and concatenated my JavaScript with Gulp into one file. I have the velocity.js and jQuery...

gulp concat after sass

I would like to take the sass output and concat it to another css regular file. example: animate.css app.scss return gulp.src('app.scss') .pipe(sass({ errLogToConsole: true })) .pipe(concat(['animate.css', OUTPUT_OF_THE_SASS_ABOVE])) .pipe(gulp.dest(paths.public+'css/')) .pipe(rename({ extname: '.min.css' })) .pipe(gulp.dest('css/')) .on('end', done); any ideas how to do it? ******* IDEA maybe is it possible to generate the...

Object property is undefined

I don't know if I'm missing something here, but for some reason a configuration object I create is always undefined upon using: gulpfile.config.js var config = { src_path: "Client/" }; gulpfile.js var config = require("./gulpfile.config.js"); gulp.task("test", function() { util.log(config.src_path); // results in 'undefined' }); Do objects have to be initialized...

How to configure port in browser-sync

I have a gulp task running with browser-sync,by default its running on port 3000 of node.js server.I want to change the default port to any other port like 3010. var gulp = require('gulp'), connect = require('gulp-connect'), browserSync = require('browser-sync'); gulp.task('serve', [], function() { browserSync( { server: "../ProviderPortal" }); }); /***...

Gulp task for multiple files

I'm trying to create a gulp task that creates (in this case minifies) a css file for every project css there is. So for Project A it should combine and minify the following files: global.projecta.css tool1.projecta.css tool2.projecta.css It needs a kind of loop or something...? If there is a new...

Gulp Watch Isn't Watching

I am just getting started with gulp and it is really cool. I am starting to use it by simply compiling Sass files (getting more complicated things working later). I want it to work like Sass's watch. Here is my gulpfile.js: // Include Gulp var gulp = require('gulp'); // Include...

Trying to understand a Gulp build error - Emitting error involving zlib.js & Gzip

Has anyone seen this error? I cannot understand the origin of the error. Searching for an answer has been fruitless. To give some context, I was merging changes from another branch via SVN, which probably mangled the merge, but I still can't figure out what went wrong within the logic....

Error installing Gulp

I am pretty new to using terminal and installing gulp, but I am running through a few errors. Errors keep popping up and I am not sure why. My goal for right now is to install gulp globally, but not sure if any old files are interfering. Maybe a clean...

Streaming directly to gulp.dest

I’d like to make npm module which returns stream and then pipe it to gulp.dest in some other app. Example: // some-module.js module.exports = function() { return require('fs').createReadStream('someFile.txt'); } // gulpfile.js gulp.task('default', function() { var myModule = require('./some-module'); myModule().pipe(gulp.dest('./')); }); Unfortunately for this code I got: path.js:313 throw new TypeError('Arguments...

Caching in Webview is not working in Android

When I open webview, it runs great when there is a network connection, but I have enabled caching in it, and without a network connection, it shows an error and loaded cached web page is not showing. I have enabled caching and also set cache mode, but it's not working....

How to gulp ignore files with a specific pattern?

How do I tell gulp to ignore all files beginning with a "_", es. _colors.styl from compiling? Thanks...

Font symbols don't display correctly with css generated from gulp-iconfont

So, I'm using gulp-iconfont to generate icon font from svg icons. I've set up task in a next way: gulp.task('iconfont', function(){ gulp.src(['src/assets/icons/*.svg']) .pipe($.iconfont({ fontName: 'material', normalize: true })) .on('codepoints', function(codepoints) { console.log(codepoints); gulp.src('src/templates/material.styl') .pipe($.consolidate('mustache', { glyphs: codepoints, fontName: 'material', fontPath: '../fonts/', className: 'md' })) .pipe(gulp.dest('src/styles/plugins')); }) .pipe(gulp.dest('build/fonts/')); });...

Using GULP to load Jquery CDN and other external JS sources

I've been trying to find a definitive answer to a problem I'm having using GULP to load the latest jquery CDN or any other Javascript CDN external sources. What I've got so far is all our JS files being found in a folder, concatenated to a single file and placed...

How do I compile mustache templates partials with gulp?

I make prototypes of static HTML pages with Mustache/Sass/Compass-watch under Ruby. This setup is VERY slow, so I want to move to building everything with Gulp. I managed to have it build Sass, but not Mustache. It just doesn't see partials in mustache templates. My file structure is like this:...

Not able to access variables in required file

I'm using browserify on a project and am running in to the following: I have a file test.js. In test.js there is nothing but the following: var test = 'test'; Now, in the same directory I have my main file 'app.js'. I require test.js and try to access the 'test'...

Webpack Uglify plugin returns “Killed” on Ubuntu

On my remote server (Ubuntu 14.04 x64), whenever I try to uglify my bundles, the process simply returns "Killed". When I don't uglify, it's just fine. Has anyone run into this? When I do it on my local Mac, it's fine (although I just tested it and it took 1.4...

How do i go to parent directory when using __dirname?

Directory structure : WebApiRole GulpFile.js test Karma.conf.js Gulp code from GulpFile.js gulp.task('test', function (done) { karma.start({ configFile: _configFile: __dirname + '\\..\\test\\karma.conf.js', singleRun: true }, done); }); So my problem going to the parent directory and access the karma.conf.js . For some reason the path is not get resolved with ..\\...

Inject variable into html via Gulp Task

I'm using Gulp and a number of plugins to template my HTML and minify my HTML i.e. "gulp-file-include", "gulp-inject", "gulp-minify-html" none seem to offer a way of injecting a constant at build time i.e something like this: .pipe('*.html', $.gulpVar({urlpath: ''}))) then in my HTML a reference to the variable Contact...

How can I achieve this using gulp?

I am enumerating the subdirectories in a directory. For each sub directory I would like to apply a number of gulp activities like less compilation, and then create an output file specific to that subdirectory. I would like the gulp process to continue, as further transformation steps need to be...

How to get rid of use strict in gulp file with JavaScript

I need to remove all 'strict mode'. the below code runs without error but my 'strict mode'; does not change to ; gulp.task('bundle', function () { var bundled = bundle(bundler()) if (!production) return bundled; return bundled .pipe(buffer()) .pipe(replace(/"use strict"'/g, ';')) // problem line .pipe(plugins.uglify()) .pipe(plugins.rename({ suffix: '.min' })) .pipe(gulp.dest('dist/app')); });...

How can you pipe a readable stream to gulp.dest()?

I've got the following sample code which attempts to pipe a stream to gulp.dest(): var gulp = require('gulp'); var stream = require('stream'); var readable = new stream.Readable; readable.push('Hello, world!'); readable.push(null); readable .pipe(gulp.dest('./test.txt')); This code produces the following error: path.js:146 throw new TypeError('Arguments to path.resolve must be strings'); ^ TypeError: Arguments...

Strange npm behavior when installing packages like grunt

I run the following command in my bash and I get the related results: [email protected]:~$ sudo npm install -g grunt-cli /usr/local/bin/grunt -> /usr/local/lib/node_modules/grunt-cli/bin/grunt [email protected] /usr/local/lib/node_modules/grunt-cli ├── [email protected] ├── [email protected] ([email protected]) └── [email protected] ([email protected], [email protected]) and [email protected]:~$ grunt /usr/bin/env: node: No such file or directory I also have try to install...

Gulp / Bower - maintaining consistency

I feel like im missing something stupid here, can someone explain to me why i can't pull in .bowerrc into gulp? The file structure and process should be extremely simple: global.js "use strict"; var gulp = require('gulp'); var bowerRC = require('../.bowerrc'); module.exports.getBowerRC = function() { return console.log(JSON.stringify(bowerRC)); } .bowerrc {...

Difference between bower, browserify, requirejs, webpack?

I'm used to simple and small JS projects where the JS dependencies are concatenated and minified as part of the build process using something like gulp and the script tag in the html contains the hardcoded path to that minified JS file. It's not elegant and probably has several disadvantages,...