I have the following which worked with gulp-browserify but I am now using browserify with which the following produces an error in the code which was originally written to work with the gulp-browserify module:
gulp.task('client', function () {
gulp.src('client/js/main.js')
.pipe(browserify({
transform: ['hbsfy'],
extensions: ['.hbs']
}))
.pipe(rename('hearthclone.js'))
.pipe(gulp.dest('./client/build'));
});
I receive the following error:
[18:30:14] TypeError: gulp.src(...).pipe(...).pipe is not a function
I'm not sure how to modify this to work with browserify.
Related
Im updating to Gulp 4.0 but I get an error when running gulp watch, that states:
AssertionError [ERR_ASSERTION]: Task never defined: build
The relevant code block in my Gulp file looks like this. What am i doing wrong?
gulp.task('server', gulp.series('build', function () {
browserSync.init(["css/*.css", "js/*.js"], {
server: { baseDir: "./" , port: 80}
// If you use vhosts use the line below and comment out the line above.
//proxy: "demo.local"
});
}));
You have at least this error in your code:
browserSync.init(["css/*.css", "js/*.js"], {
should be:
browserSync({
files: ["css/*.css", ""js/*.js"]
});
browserSync.init takes an options object as its first argument.
Secondly, the error Task never defined: xxxx I have seen this when, in your case, you call the build task - in your 'server' task before it has been defined/registered. So put the gulp.task('build'...) definition ( a registration of the task) before your 'server' task.
Your gulpfile is erroring for this reason before getting to the other error in browserSync.init mentioned above.
I am building a jade error notification.
this is the code I have
gulp.task('templates', function () {
return gulp.src('local/*.jade')
.pipe(errorNotifier())
.pipe(jade({pretty: true}))
.pipe(gulp.dest('local/'));
});
It does show an error message when the jade file is having some sort of error.
Is there a way to customize the message shown on my Mac.
To something like:
Jade error
Check terminal
In the terminal the error message is fine.
I keep getting the following error with my gulpfile for the watch plugin
‘watch* errored after XXms
Error in plugin ‘gulp-watch’
Message:
glob should be String or Array, not object
Here is what my code in the gulpfile looking like
function sassWatch(sassData) {
gulp.src(sassData.watch)
.pipe(watch({glob:sassData.watch, emitOnGlob: true}, function() {
gulp.src(sassData.sass)
.pipe(sass(sassOptions))
.on('error', function(err) {
gutil.log(err.message);
gutil.beep();
global.errorMessage = err.message + " ";
})
.pipe(checkErrors())
.pipe(rename(sassData.name))
.pipe(gulp.dest(sassData.output))
.pipe(livereload());
}));
}
Any idea what I'm doing wrong here?
You're using the pre-1.0.0 way of providing a globbing pattern to gulp-watch, but your gulp-watch plugin has a version >= 1.0.0.
The 1.0.0 release of gulp-watch changed the method signature from:
watch([options, callback])
to
watch(glob, [options, callback])
This means you have to provide your globbing pattern like this:
.pipe(watch(sassData.watch, { /*other options*/ }, function() {
Note that the emitOnGlob option was removed in 1.0.0. Read this github issue and the Migration to 1.0.0 notes for more information.
I've .po files in my application. I've created a watch to see when the translations file have been changed and compile them
gulp.task('translations', () => gulp
.src('po/.*po',)
.pipe(gettext.compile({format: 'json'}))
.pipe(gulp.dest('dist/translations/')));
)
gulp.task('watch', () => {
gulp.watch('po/**/*.po', ['translations']);
});
I use poedit if I do some change it works, but if I just click save button without a new change the gulp process die throwing the error TypeError: glob pattern string required
Update
I've changed gulp.watch for gulp-watch package and it throws me better info
ENOENT: no such file or directory, stat '/home/rkmax/Development/MyProject/po/es_ES.temp.po'
So first.. I have next gulp task:
gulp.task('js', function() {
browserify('./src/js/main.js')
.bundle()
.on('error', onError)
.pipe( source('main.js') )
.pipe( gulp.dest(path.build.js) );
});
and package.json:
{
"browserify": {
"transform": [
["babelify", { "presets": ["es2015"] }],
"debowerify"
]
},
}
I am importing Backbone in main.js (or only underscore... it doesn't matter)
import Backbone from 'backbone';
And in console I am getting error
Uncaught TypeError: Cannot read property '_' of undefined
I checked code and found that in underscore sources at start of library root is undefined
// Establish the root object, `window` in the browser, or `exports` on the server.
var root = this;
// Save the previous value of the `_` variable.
var previousUnderscore = root._;
I think the problem is that debowerify or babelfy is wrapping code in some function. But also if I use node modules without debowerify all works fine. But I want to use bower.
So how to fix this problem?
To any future visitors to this question,
this is similar to Underscore gives error when bundling with Webpack
The gist of the issue is that babel is probably running the underscore.js code, since underscore.js uses this, and in es6 this is undefined when outside of a function, naturally this._ fails.
In code I've fixed the issue by ensuring that babel does not run on node_modules.
In my case the same error arose when using just browserify with underscore. I've workarounded issue by switching from underscore to lodash. They are in general (surely not fully) compatible, but at the worst I'd rather copy some missing function from underscore sources than live with its deisolated load approach.