TypeError: dest.on is not a function in gulp - gulp

When I edit theme .yml files in my themes source folder, I get this error. This does not happen when I edit scss or template .yml files from the template folder, only in the main folder. Others that had this error use things like webpack what I don't have. The gulp task for copy_theme_files is the same as other tasks with the difference that it has no return because I didn't know how to return there with two gulp.src functions.
gulp.task('copy_theme_files', function() {
console.log('[copy_theme_files] Console Log: copy '+paths.themeSrc+' to '+paths.themeDest);
gulp.src(paths.themeSrc)
.pipe(gulp.dest(paths.themeDest));
gulp.src(paths.root + '/*.{png,ico,svg}')
.pipe(paths.themeDest);
});
Full gulpfile.js https://pastebin.com/NWt2uMwV
Error Output:
[00:37:58] Using gulpfile /var/www/themes.src/mytheme.src/gulpfile.js
[00:37:58] Starting 'watch'...
[00:38:20] Starting 'copy_theme_files'...
[copy_theme_files] Console Log: copy *.{yml,theme,php,png,jpg,gif,svg,ico},.gitkeep to build
[00:38:20] 'copy_theme_files' errored after 23 ms
[00:38:20] TypeError: dest.on is not a function
at DestroyableTransform.Readable.pipe (/var/www/themes.src/mytheme.src/node_modules/readable-stream/lib/_stream_readable.js:564:8)
at /var/www/themes.src/mytheme.src/gulpfile.js:122:10
at taskWrapper (/var/www/themes.src/mytheme.src/node_modules/undertaker/lib/set-task.js:13:15)
at bound (domain.js:395:14)
at runBound (domain.js:408:12)
at asyncRunner (/var/www/themes.src/mytheme.src/node_modules/async-done/index.js:55:18)
at process._tickCallback (internal/process/next_tick.js:61:11)
[00:38:20] Starting 'copy_includes'...
[copy_includes] Console Log: copy includes/**/*.*,includes/**/.gitkeep to build/includes
[00:38:20] Finished 'copy_includes' after 7.41 ms
[00:38:20] Starting 'copy_build'...
[copy_build] Console Log: copy build/**/*.*,build/**/.gitkeep to ../../web/themes/local/mytheme
[00:38:20] Finished 'copy_build' after 60 ms
Other tasks run fine
[00:41:06] Starting 'copy_templates'...
[copy_templates] Console Log: copy templates/**/*.twig,templates/**/.gitkeep to build/templates
[00:41:08] Finished 'copy_templates' after 1.86 s
[00:41:08] Starting 'copy_build'...
[copy_build] Console Log: copy build/**/*.*,build/**/.gitkeep to ../../web/themes/local/mytheme
[00:41:09] Finished 'copy_build' after 326 ms

You have this line in your task:
.pipe(paths.themeDest);
You probably mean:
.pipe(gulp.dest(paths.themeDest));
For your other question look at merging two gulp.src streams for how to return:
var merge = require('merge-stream');
gulp.task('copy_theme_files', function() {
console.log('[copy_theme_files] Console Log: copy '+paths.themeSrc+' to '+paths.themeDest);
const themesStream = gulp.src(paths.themeSrc)
.pipe(gulp.dest(paths.themeDest));
const imagesStream = gulp.src(paths.root + '/*.{png,ico,svg}')
.pipe(paths.themeDest);
return merge(themesStream , imagesStream );
});

Related

Getting "includes is not a function" in Gulp

I'm new to Gulp. I wrote a function to parse the version in my package.json file like this
// Get the semver part of the version, e.g.,
// version = 1.4.31-p2, should return 1.4.31
function getSemVer(cb) {
var semVer = pkg.version;
if (semVer.includes("-")) {
semVer = semVer.split("-")[0];
}
console.log(semVer);
cb();
}
exports.getSemVer = getSemver
But when I run this I get an error
$ gulp getSemver -f gulpfiles/version.js
[22:56:58] Working directory changed to /path/gulpfiles
[22:56:59] Using gulpfile /path/gulpfiles/version.js
[22:56:59] Starting 'getSemVer'...
[22:56:59] 'getSemVer' errored after 1.53 ms
[22:56:59] TypeError: semVer.includes is not a function
at getSemVer (/path/gulpfiles/version.js:27:14)
at taskWrapper (/path/node_modules/undertaker/lib/set-task.js:13:15)
at bound (node:domain:416:15)
at runBound (node:domain:427:12)
at asyncRunner (/path/node_modules/async-done/index.js:55:18)
at processTicksAndRejections (node:internal/process/task_queues:78:11)
I thought includes() a valid JavaScript function, shown in JavaScript String includes(). What gives?

Why is Gulp running the same task twice?

I am having a similar issue as the question posted here but none of the answers given there apply to my situation.
When I run the one and only task defined in my Gulpfile.js file it is getting executed twice.
I am using Gulp version 4.0.2
This is the contents of my Gulpfile.js file:
const { src, dest, watch, series, parallel } = require('gulp');
const sass = require('gulp-sass');
const rename = require('gulp-rename');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const files = {
bootstrapSrcPath: 'bootstrap-sass/bootstrap.scss',
bootstrapDstPath: 'Test'
};
exports.scssTask = series(
scssTaskFunc
);
function scssTaskFunc() {
return src(files.bootstrapSrcPath)
.pipe(sass({ style: 'expanded' }))
.pipe(dest(files.bootstrapDstPath))
.pipe(postcss([autoprefixer(), cssnano()]))
.pipe(rename({ suffix: '.min' }))
.pipe(dest(files.bootstrapDstPath));
}
This is the command I am running in the CMD prompt and the results:
C:\Users\myUser\source\repos\myProject> cmd.exe / c gulp - b "C:\Users\myUser\source\repos\myProject" --color--gulpfile "C:\Users\myUser\source\repos\myProject\Gulpfile.js" scssTask
[16: 10: 15]Using gulpfile ~\source\repos\myProject\Gulpfile.js
[16: 10: 15]Starting 'scssTask'...
[16: 10: 15] Starting 'scssTaskFunc'...
[16: 10: 17] Finished 'scssTaskFunc' after 1.7 s
[16: 10: 17]Finished 'scssTask' after 1.71 s
Process terminated with code 0.
It works and the output file is what I expect but it seems like a waste to do it twice.
This is the what gulp shows for tasks:
C:\Users\myUser\source\repos\myProject> gulp--tasks
[15: 57: 29]Tasks for ~\source\repos\myProject\Gulpfile.js
[15: 57: 29]└─┬ scssTask
[15: 57: 29]└─┬ <series>
[15:57:29] └── scssTaskFunc
Why is it running the task twice, once as the 'scssTask' and the second as the 'scssTaskFunc'?
Btw, this is my first attempt at gulp so I apologize if this is a derp question.
Your task isn't running twice, it just seems like it does because you're using gulp.series.
gulp.series and gulp.parallel are normally used to combine and compose tasks into larger operations. If, for example, you'd have a jsTaskFunc as well, you could create a task build like so:
exports.build = parallel(scssTaskFunc, jsTaskFunc);
and running gulp build would log something like this in your terminal:
[09:42:12] Starting 'build'...
[09:42:12] Starting 'scssTaskFunc'...
[09:42:12] Starting 'jsTaskFunc'...
[09:42:12] Finished 'scssTaskFunc' after 93 ms
[09:42:12] Finished 'jsTaskFunc' after 94 ms
[09:42:12] Finished 'build' after 111 ms
Something similar is happening now due to your use of gulp.series, because scssTask runs scssTaskFunc as a dependent task, but scssTask and scssTaskFunc are strictly speaking not the same task. Nothing gets run twice.
To avoid confusion, and because gulp.series isn't necessary, simply do:
exports.scssTask = scssTaskFunc;

Gulp directory changing

I was following the answer (the one chosen by op) here to change directory in my gulpfile.js. To test whether the directory was changed, I added another task that prints the current directory. When run, both tasks are executed without any errors. However, console.log prints the address
of the parent directory instead of the directory that was navigated into in the previous task.
Here's how I setup my directory, gulpfile.js and package.json.
directory tree
-- auth
---- gulpfile.js
---- package.json
---- other js scripts
---- <dest_folder>
gulpfile.js
/// TASKS
gulp.task('directory-changer', changeDirectory);
gulp.task('directory-printer', printCD);
gulp.task('default', gulp.series('directory-changer', 'directory-printer'));
/// TASKS
function changeDirectory(done) {
process.chdir(path.resolve(__dirname, 'dest'));
gulp.src()
done();
}
function printCD(done) {
console.log(__dirname);
done();
}
pacakge.json
{ // other properties
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"run-gulp": "node ./node_modules/gulp/bin/gulp.js"
},
// other fields
The output generated:
npm run run-gulp
> auth#1.0.0 run-gulp <PROJECT_PATH>/
> node ./node_modules/gulp/bin/gulp.js
[13:42:48] Using gulpfile <PROJECT_PATH>/gulpfile.js
[13:42:48] Starting 'default'...
[13:42:48] Starting 'directory-changer'...
[13:42:48] Finished 'directory-changer' after 1.14 ms
[13:42:48] Starting 'directory-printer'...
<PROJECT_PATH>/
[13:42:48] Finished 'directory-printer' after 387 μs
[13:42:48] Finished 'default' after 4.81 ms
Now my I think that it maybe because the __dirname is printing the execution path of the script rather than the changed directory. Is that the case or is there something else going on?

Gulp Build command is failing with error " EISDIR: Illegal operation on directory"

I am trying to run the gulp build task for the dev environment on the server but its failing. However, The same gulp build is working on my local machine. The function and error are given below.
Function:
// S3 Upload for dev
gulp.task('s3sync:dev', function () {
var config = {
accessKeyId: "-Key-",
secretAccessKey: "-Key-"
};
var s3 = require('gulp-s3-upload')(config);
return gulp.src("./dist/**")
.pipe(s3({
Bucket: 'example',
ACL: 'public-read'
}, {
maxRetries: 5
}))
});
Command:
Gulp build:development
Error:
[09:01:04] Starting 's3sync:dev'...
events.js:160
throw er; // Unhandled 'error' event
^
Error: EISDIR: illegal operation on a directory, read
at Error (native)
Any idea?
Finally, This problem has been solved by removing a system symlink which was created after the deployment from the capistrano which is also running below npm commands.
npm run clean && npm run build
After removing the system file. I have run the below command and it works fine.
gulp build:development

How to properly end a gulp task

I'm trying to write a gulp task to execute a program and to wait for any key to be pressed to exit the program.
So far I have this:
gulp.task('runDevelopment', function (done) {
console.log('\n\n---\nPress any key to exit\n---\n');
var api = spawn('node', ['node_modules/api-gateway-server/server.js', 'etc/swagger.yaml']);
api.stdout.on('data', function (data) {
console.log(data.toString());
});
api.stderr.on('data', function (data) {
console.log(data.toString());
});
process.stdin.on('data', function () {
api.kill('SIGKILL');
done();
});
});
This runs the program, and kills it as expected but gulp never quits. I see this in the console:
20:04 $ gulp
[20:06:54] Using gulpfile ~/Development/swiki/gulpfile.js
[20:06:54] Starting 'documentCopy'...
[20:06:54] Starting 'documentZip'...
[20:06:54] Starting 'runDevelopment'...
---
Press any key to exit
---
[20:06:54] Finished 'documentCopy' after 52 ms
[20:06:54] Finished 'documentZip' after 41 ms
[20:06:54] Starting 'package'...
[20:06:54] Finished 'package' after 4.9 μs
API Gateway server listening on port 7111
[20:06:57] Finished 'runDevelopment' after 3.06 s
[20:06:57] Starting 'run'...
[20:06:57] Finished 'run' after 2.72 μs
[20:06:57] Starting 'default'...
[20:06:57] Finished 'default' after 1.16 μs
Terminated: 15
✘-TERM ~/Development/swiki [master|…6]
20:07 $
gulp gives me the Terminated: 15 only after I killall gulp in another terminal.
How can I get this to work properly?
The problem is that you're successfully terminating the child process by sending SIGKILL, but you're still listening for incoming data on process.stdin of the parent process. As long as you are doing that the parent process won't exit.
You have to explicitly tell process.stdin to no longer emit 'data' events by calling stream.pause():
process.stdin.on('data', function () {
process.stdin.pause();
api.kill('SIGKILL');
done();
});
If all else fails you can also call process.exit() as a last resort:
process.stdin.on('data', function () {
api.kill('SIGKILL');
done();
process.exit(0);
});