strange TypeError: dest.on is not a function with lazypipe
Closed this issue · 7 comments
Hello @OverZealous I'm using lazypipe() as template to DRY my gulp tasks.
Unfortunately, I get an error:
serge@serge:~/projects/haystak$ gulp deploy
[20:41:50] Starting 'deploy'...
Building APP bundle
[20:41:50] 'deploy' errored after 25 ms
[20:41:50] TypeError: dest.on is not a function
at Duplexer.Readable.pipe (/home/serge/projects/korob/node_modules/readable-stream/lib/_stream_readable.js:485:8)
at rebundle (/home/serge/projects/korob/Gulpfile.js:69:8)
at browserifyTask (/home/serge/projects/korob/Gulpfile.js:82:3)
at Gulp.<anonymous> (/home/serge/projects/korob/Gulpfile.js:229:3)
at module.exports (/home/serge/projects/korob/node_modules/orchestrator/lib/runTask.js:34:7)
at Gulp.Orchestrator._runTask (/home/serge/projects/korob/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (/home/serge/projects/korob/node_modules/orchestrator/index.js:214:10)
at /home/serge/projects/korob/node_modules/orchestrator/index.js:279:18
at finish (/home/serge/projects/korob/node_modules/orchestrator/lib/runTask.js:21:8)
at cb (/home/serge/projects/korob/node_modules/orchestrator/lib/runTask.js:29:3)
my gulpfile (I removed unnecessary lines out of scope + plus add references to lines):
var browserify = require('browserify');
var babelify = require('babelify');
var pathmodify = require('pathmodify');
var path = require('path');
var concat = require('gulp-concat');
var cssmin = require('gulp-cssmin');
var glob = require('glob');
var gulp = require('gulp');
var gulpif = require('gulp-if');
var gutil = require('gulp-util');
var rev = require('gulp-rev');
var revReplace = require('gulp-rev-replace');
var buffer = require('gulp-buffer');
var insertLines = require('gulp-insert-lines');
var livereload = require('gulp-livereload');
var htmlmin = require('gulp-htmlmin');
var notify = require('gulp-notify');
var sass = require('gulp-ruby-sass');
var shell = require('gulp-shell');
var slim = require('gulp-slim');
var source = require('vinyl-source-stream');
var streamify = require('gulp-streamify');
var uglify = require('gulp-uglify');
var watchify = require('watchify');
var lazypipe = require('lazypipe');
// Add md5 hashsums to assets
function revFiles(dest) {
return lazypipe()
.pipe(gulp.dest, dest);
}
var browserifyTask = function (options) {
// Our app bundler
var appBundler = browserify({
entries: [options.src], // Only need initial file, browserify finds the rest
debug: options.development, // Gives us sourcemapping
cache: {}, packageCache: {}, fullPaths: options.development // Requirement of watchify
})
.plugin(pathmodify, {
mods: [
pathmodify.mod.dir('npm', path.join(__dirname, 'node_modules'))
]
})
.transform(babelify, { presets: ['react', 'es2015'] })
// The rebundle process
var rebundle = function () {
var start = Date.now();
console.log('Building APP bundle');
appBundler.bundle()
.on('error', gutil.log)
.pipe(source('application.js'))
.pipe(gulpif(!options.development, streamify(uglify())))
.pipe(revFiles(options.dest)) // line 69
.pipe(notify(function () {
console.log('APP bundle built in ' + (Date.now() - start) + 'ms');
}))
.on("finish", function() { refreshView(options) });
};
// Fire up Watchify when developing
if (options.development) {
appBundler = watchify(appBundler);
appBundler.on('update', rebundle);
}
rebundle(); // line 82
}
gulp.task('deploy', function () {
browserifyTask({ // line 229
development: false,
src: './app/coffee/application.js',
dest: './public/dist/'
});
});I'll be appreciated by your help
You aren't calling the function returned by lazypipe. That line should be revFiles(options.dest)(). Or call the result of lazypipe from within your function.
That being said, in this case, there's no need for lazypipe.
lazypipe is intended to be used when you need to keep a reference to a multi-step pipe so you can reuse it in multiple setups. For example, maybe you have a long chain that is used in development builds, production builds, and incremental watches. In this case you can make a single lazypipe, then add on to it or insert it into another stream.
But in your case, you've already wrapped the pipe in a function, so just skip the extra step:
function revFiles(dest) {
return gulp.dest(dest);
}If you have several steps instead, then you might still benefit from lazypipe. You still have to call the last output to create the actual pipe when you want to use it (hence, "lazy" pipe).
@OverZealous gotcha, thanks! It's working now
I have the same actually.
import replace from "gulp-replace";
import gulpIf from "gulp-if";
// ....
let replacement = lazypipe().pipe(replace, "../ts/", "../dist/");
// ...
.pipe(gulpIf(replacement ? true : false, replacement))
// or
.pipe(replacement)
Give me the same error.
[01:26:48] TypeError: dest.on is not a function
at CompileStream.Readable.pipe (_stream_readable.js:501:8)
at Object._worker (/home/roman/Documents/projects/base/project/client/src/gulp/package/compile.js:26:18)
at Gulp.<anonymous> (/home/roman/Documents/projects/base/project/client/src/gulp/package/compile.js:12:31)
at module.exports (/home/roman/Documents/projects/base/project/client/node_modules/orchestrator/lib/runTask.js:34:7)
at Gulp.Orchestrator._runTask (/home/roman/Documents/projects/base/project/client/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (/home/roman/Documents/projects/base/project/client/node_modules/orchestrator/index.js:214:10)
at Gulp.Orchestrator.start (/home/roman/Documents/projects/base/project/client/node_modules/orchestrator/index.js:134:8)
at /usr/lib/node_modules/gulp/bin/gulp.js:129:20
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)
My main point is to inject pipeline if exists into task. How can i do this today?
@commute, that's the same mistake, you are calling gulpif wrong.
I'm on my phone, but it's explained how to correctly use gulp-if in the docs here, as well as on that plugin.
Whoops, wrong username. Sorry if I pulled in someone else. 😕
I'm also getting this error, although perhaps I'm also using lazypipe incorrectly?
Note that I'm using gulp-load-plugins to pull data/packages/etc from package.json
var buildJs = $.lazypipe()
.pipe($.plumber, {errorHandler: plumberErrorHandler})
.pipe($.newer, { dest: pkg.paths.dist.javascripts, ext: '.min.js' })
.pipe($.sourcemaps.init)
.pipe(function() {
return $.if($.util.env.type === 'production', $.uglify, $.util.noop);
})
.pipe($.sourcemaps.write)
.pipe(gulp.dest, pkg.paths.dist.javascripts)
.pipe($.rename, { suffix: '.min' })
.pipe(gulp.dest, pkg.paths.dist.javascripts)
.pipe($.size, {showFiles: true});
gulp.task('buildJs', function() {
return gulp.src(pkg.globs.javascripts)
.pipe(buildJs())
.pipe($.browserSync.active ? $.browserSync.reload({stream:true}) : $.util.noop());
});
If I remove the gulp-if line/function, it works fine...where am I going wrong on this?
This line is incorrect:
return $.if($.util.env.type === 'production', $.uglify, $.util.noop);You aren't calling the uglify or noop methods, so no stream is getting built. Please read the docs more carefully.