Develop Reference

Gulp 4 Watch Task, run only one time

i have trouble to use Gulp 4. My watch-task runs only one time, when detecting changes, inside my html-files.
Where is my mistake? Please help me to fix my gulpfile
Here is my code:
var gulp = require('gulp'),
sass = require('gulp-sass'),
cleanCSS = require('gulp-clean-css'),
autoprefixer = require('gulp-autoprefixer'),
rename = require('gulp-rename'),
inject = require('gulp-inject'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
plumber = require('gulp-plumber'),
babel = require('gulp-babel'),
browserify = require('gulp-browserify'),
clean = require('gulp-clean'),
sourcemaps = require('gulp-sourcemaps'),
htmlmin = require('gulp-html-minifier'),
browserSync = require('browser-sync');
var src = './src/',
dist = './dist/';
//####################################
// MINIFY HTML
gulp.task('html', function(){
gulp.src(dist + '*.html', {force: true})
.pipe(clean());
gulp.src(src + '*.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest(dist));
});
//####################################
// WATCH
gulp.task('default', function(){
gulp.watch([src + '*.html'], gulp.series('html'));
});
When i run the html-task manually, i get the following warning:
The following task did not complete: html
Did you forget to signal async completion?
How can i solve this issue, too?

I solved my issue, with this code change, inside my html file:
gulp.task('html', done => {
gulp.src(dist + '*.html', {force: true})
.pipe(clean());
gulp.src(src + '*.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest(dist));
done();
});
The Watch-Task works now

gulp. moving files in neighbors dir

The simplified structure of the project looks like this. JavaScript files that lie in the es6 directory must be moved to the neighbors directory js.
var gulp = require('gulp');
var babel = require('gulp-babel');
gulp.task('build-js', function () {
gulp.src('app/core/**/es6/**/*.js')
.pipe(babel({
presets: ["env"]
}))
.pipe(gulp.dest(???)); // need move to ../js
});
Please, help me, how to implement this in gulp?

I assume that the babel pipe doesn't move the js files that are in the es6 folder or add any folders. And that your gulpfile.js is at the root level of your "app" folder.
var gulp = require('gulp');
var path = require('path');
var rename = require('gulp-rename');
gulp.task('default', function () {
// with gulpfile.js at root of "app" folder
return gulp.src('core/**/es6/*.js')
.pipe(rename(function (file) {
console.log("file.dirname = " + file.dirname);
// file.dirname = AdminTools\es6
// file.dirname = Permissions\es6
// strip off the last folder 'es6'
var temp = file.dirname.split(path.sep)[0];
file.dirname = temp + "/js";
// file.dirname = AdminTools\js
// file.dirname = Permissions\js
}))
.pipe(gulp.dest('core'));
});

Gulp watch() not triggering the less process

The following gulp watch task isn't getting triggered when I change any LESS file in the project. Can anyone spot what I'm doing wrong? Most the answers here say to NOT use the watch-less module, which I'm not. It's supposed to listen to changes in any LESS file in the project and when one changes, go to the app.less file to regenerate the CSS file (app.less has #includes to all the files).
var watch = require("gulp-watch");
var less = require("gulp-less");
gulp.watch(paths.source + "**/*.less", function(event){
gulp.src(paths.source + paths.assets + paths.less + "app.less")
.pipe(less().on("error", console.log))
.pipe(gulp.dest(paths.dev + paths.css));
});

Here are some issues:
require("gulp-watch"); is useless here. Actually gulp.watch is a core API of gulp.
The gulpfile.js consists of several gulp tasks.
Run gulp watch in your terminal.
For example:
var gulp = require('gulp');
var path = require('path');
var less = require('gulp-less');
var paths = {
// your paths
};
gulp.task('styles', function () {
return gulp.src(paths.source + paths.assets + paths.less + "app.less")
.pipe(less({
// paths to be used for #import directives
paths: [ path.join(__dirname, 'less', 'includes') ]
}))
.pipe(gulp.dest('./'));
});
gulp.task('watch', function() {
gulp.watch('less/**/*.less', ['styles']);
});

How do you use browserify in a Gulp task?

I'm pretty new to Gulp, but by following this tutorial I set up a Gulp task that is meant to browserify javascript files in a particular directory and pipe them to a different directory - pretty simple. I've looked a few other tutorials, but this method seemed to be the most concise. Here is my code:
var gulp = require('gulp');
var browserify = require('browserify');
var transform = require('vinyl-transform');
gulp.task('js', function() {
var browserified = transform(function(filename) {
return browserify(filename).bundle();
});
return gulp.src(['./public/js/src/**/*.js'])
.pipe(browserified)
.pipe(gulp.dest('./public/js/dist'));
});
The above code is very similar to many other implementations of this sort I've seen, but when I try running it with gulp js, it produces the following error:
[15:47:13] Using gulp file
~/development/launchpad/workshop/gulpfile.js
[15:47:13] Starting 'js'...
_stream_readable.js:540
var ret = dest.write(chunk);
^
TypeError: undefined is not a function
at Producer.ondata (_stream_readable.js:540:20)
at Producer.emit (events.js:107:17)
at Producer.Readable.read (_stream_readable.js:373:10)
at flow (_stream_readable.js:750:26)
at resume_ (_stream_readable.js:730:3)
at _stream_readable.js:717:7
at process._tickCallback (node.js:355:11)
Does anyone know what might cause this error?
(As a side note, I'd like to look at the files from the stack trace to try to figure out what is going on here, but searching for _stream_readable.js in Spotlight yields about 20 files of that name, all seemingly Node modules. Is there a way to determine the full path of a file in a stack trace?)

var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
gulp.task('browserify', function() {
return browserify('lib/front/app.js')
.bundle()
//Pass desired output filename to vinyl-source-stream
.pipe(source('bundle.js'))
// Start piping stream to tasks!
.pipe(gulp.dest('public/build/'));
});

If you want browserify to work with gulp. dest and create a file where we specify it via .pipe (gulp.dest ('src/js')),
then you need to download vinyl-source-stream and throw it in .pipe(source('bundle.js')),
but actually in browserify, namely the bundle method accepts callback and neither dest nor source is needed
browserify({
entries: jsFile,
basedir: "src/js/dev",
debug: true,
})
.transform(babelify, {
presets: ['#babel/preset-env'],
})
.bundle((err, buffer) => {
let event = new EventEmitter();
if (err) {
event.emit('error',err)
}
else {
let data = minify(buffer.toString(), {}).code;
fs.createWriteStream('./src/js/bundle.js').write(data)
console.dir(222);
bs.reload()
}
})

Unfortunately, this is an issue with browserify/gulp, and there's nothing that vinyl-transform can do. The solution is to use vinyl-source-stream and vinyl-buffer:
var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var glob = require('node-glob');
gulp.task('browserify', function (cb) {
glob('./src/**/*.js', {}, function (err, files) {
var b = browserify();
files.forEach(function (file) {
b.add(file);
});
b.bundle().
.pipe(source('output.js'))
.pipe(gulp.dest('./dist'));
cb();
})
});
More information here.

Chain Gulp glob to browserify transform

I have a project with a few relatively disjoint pages, each including their own entry point script. These scripts require a number of others using commonjs syntax, and need to be transformed by 6to5 and bundled by browserify.
I would like to set up a gulp task that captures all the files matching a pattern and passes them on to the bundler, but I'm not sure how to pass files from gulp.src to browserify(filename).
My gulpfile looks like:
var gulp = require("gulp");
var browserify = require("browserify");
var to5browserify = require("6to5-browserify");
var source = require("vinyl-source-stream");
var BUNDLES = [
"build.js",
"export.js",
"main.js"
];
gulp.task("bundle", function () {
/* Old version, using glob:
return gulp.src("src/** /*.js")
.pipe(sixto5())
.pipe(gulp.dest("dist"));
*/
// New version, using array:
return BUNDLES.map(function (bundle) {
return browserify("./src/" + bundle, {debug: true})
.transform(to5browserify)
.bundle()
.pipe(source(bundle))
.pipe(gulp.dest("./dist"));
});
});
gulp.task("scripts", ["bundle"]);
gulp.task("html", function () {
return gulp.src("src/**/*.html")
.pipe(gulp.dest("dist"));
});
gulp.task("styles", function () {
return gulp.src("src/**/*.css")
.pipe(gulp.dest("dist"));
});
gulp.task("default", ["scripts", "html", "styles"]);
This seems to work, but isn't maintainable: I'll be adding more scripts relatively soon, and don't want to add them to the array every time.
I've tried using gulp.src(glob).pipe within the browserify call and piping after calling (shown here), and gulp.src(glob).map (method doesn't exist).
How can you chain gulp.src with a name-based transformer like browserify?

Use through2 to make a one-off custom plugin stream that does all of the dirty work.
Unfortanately vinyl-transform and vinyl-source-stream and the solutions that go along with those have flaws so we have to go for something custom.
var gulp = require('gulp');
var through = require('through2');
var browserify = require('browserify');
gulp.task('bundle', function() {
var browserified = function() {
return through.obj(function(chunk, enc, callback) {
if(chunk.isBuffer()) {
var b = browserify(chunk.path);
// Any custom browserify stuff should go here
//.transform(to5browserify);
chunk.contents = b.bundle();
this.push(chunk);
}
callback();
});
};
return gulp.src(['./src/**/*.js'])
.pipe(browserified())
.pipe(gulp.dest('dest'));
});

You can specify globs in your BUNDLES array as well as exclude any files:
var BUNDLES = [
"app/**/*.js",
"export.js",
"app/modules/**/*.js",
"!app/modules/excluded/*.js"
];