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”

Question:

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 )
            .bundle();
    });

    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 )
            .bundle();
    });

    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)

Answer:

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() {
    gulp.watch( '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(
            './src/app/index.js',
            _.extend( watchify.args, { debug: true })
        ));
    } else {
        bundler = browserify(
            './src/app/index.js'
        );
    }

    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.


Related:


Multiple React components in a single module


reactjs,gulp,browserify
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...

Utilising the output of two previous gulp streams


javascript,stream,gulp
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...

Using GULP to load Jquery CDN and other external JS sources


javascript,jquery,gulp
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 save a result of javascript to a file in gulp


javascript,json,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?

Streaming directly to gulp.dest


javascript,node.js,gulp
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...

CDATA showing up in my HTML page. Why?


javascript,jquery,html5,gulp,cdata
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...

How to gulp ignore files with a specific pattern?


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

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


gulp,gulp-uglify,gulp-sourcemaps
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...

Error installing Gulp


node.js,terminal,gulp,taskmanager
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...

How to configure port in browser-sync


node.js,gulp,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" }); }); /***...

Not able to access variables in required file


javascript,gulp,require,browserify
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'...

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


node.js,gulp
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...

Gulp task for multiple files


node.js,gulp
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


gulp
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...

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


php,codeigniter,session,browser-cache
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...

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


node.js,gulp
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(){...

How can I achieve this using gulp?


javascript,node.js,stream,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...

Strange npm behavior when installing packages like grunt


node.js,gruntjs,npm,gulp,bower
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...

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


javascript,css,browser,browser-cache
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?

sass file not compiled by gulp


css,node.js,sass,npm,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....

Webpack Uglify plugin returns “Killed” on Ubuntu


gulp,webpack
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...

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


node.js,gulp
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....

Code breaks after using gulp-uglify : Ionic Framework


ionic-framework,gulp,ionic
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...

Gulp / Bower - maintaining consistency


node.js,gulp,bower
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?


javascript,requirejs,gulp,bower,browserify
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,...

Object property is undefined


javascript,object,gulp
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...

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


gulp,hexo
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',...

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


jpeg,gulp,gulp-imagemin
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...

Inject variable into html via Gulp Task


gulp,gulp-inject
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: 'www.myurl.com'}))) then in my HTML a reference to the variable Contact...

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


node.js,gulp,gulp-watch
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?...

Memory leak caused by gulp & nodemon


node.js,gulp,mean,nodemon,gulp-livereload
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


fonts,error-handling,less,gulp
So I am using gulp as a task engine to handle less compilation (among other things), and part of our stylesheets include fonts from fonts.com. 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()...

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


npm,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...

Caching in Webview is not working in Android


android,caching,webview,browser-cache,offline-caching
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 include jQuery to my app?


javascript,jquery,angularjs,gulp,bower
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...

Angular 2/Typescript: require not found


typescript,gulp,angular2
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...

How do i go to parent directory when using __dirname?


javascript,node.js,directory,gulp,gulp-karma
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 ..\\...

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


build,return,task,gulp
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...

gulp concat after sass


sass,gulp,concat,gulp-concat
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...

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


apache,http-headers,browser-cache
My browser send to the server the following request: Host: www.imprimante.be 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: http://www.imprimante.be/premier-avis-gratuit/ Cookie: <hidden> Connection: keep-alive The url used is http://www.imprimante.be/wp-content/themes/mch_imprimante/js/theme.min.js? (note:...

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


gulp
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')); });...

Load libraries with wiredep


angularjs,gulp,bower
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()...

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


javascript,css,svg,gulp,icon-fonts
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/')); });...

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


gulp
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;...

Gulp task not accessing karma.conf.js file


javascript,node.js,gulp,karma-runner,gulp-karma
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:...

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


javascript,gulp,browserify
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...

How do I compile mustache templates partials with gulp?


gulp,mustache
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:...

Website html doesnt update for users because of cache


html,caching,browser-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...

How to set up wiredep with gulp and jade


javascript,jade,gulp,wiredep
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...

Trying to run a Gulp script that needs ruby on PHPStorm


ruby,shell,sass,gulp,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'),...