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?
Related
I'm trying to set up es6 transpilation from gulp.
I'm setting up a completely minimal test just to get babel working with gulp.
I installed the modules like this:
npm install --save-dev gulp gulp-cli gulp-babel#next #babel/core #babel/preset-env
I have this gulpfile:
var gulp = require('gulp');
var babel = require('gulp-babel');
gulp.task("default", function () {
return gulp.src("src/app.js")
.pipe(babel())
.pipe(gulp.dest("dist"));
});
This setup is slightly adapted from the babel documentation:
https://babeljs.io/setup#installation
When I run 'gulp', I get this output:
[20:16:25] Using gulpfile ~/play/react/babeltest/gulpfile.js
[20:16:25] Starting 'default'...
[20:16:25] 'default' errored after 23 ms
[20:16:25] Error in plugin "gulp-babel"
Message:
Cannot find module 'babel-preset-env' from '/home/bobdobbs/play/babeltest'
How do I get this working?
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 );
});
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
I have a gulp script, and when I run it from command line, it does not return to shell.
this is a simple gulp command to delete files from dist directory
'use strict';
var del = require('del');
var gulp = require('gulp');
gulp.task('clean', function (cb) {
return del(['dist/**/*'], cb);
});
run command:
gulp clean
[13:39:10] Using gulpfile gulpfile.js
[13:39:10] Starting 'clean'...
[13:39:11] Finished 'clean' after 6.35 ms
npm WARN package.json abc#0.0.0 No description
npm WARN package.json abc#0.0.0 No repository field.
npm WARN package.json abc#0.0.0 No README data
npm WARN package.json karma-coverage#0.2.7 No README data
npm WARN package.json karma-phantomjs-launcher#0.1.4 No README data
it does not return to shell, I have to do CTRL+C to return back to shell.
I am new to gulp, please let me know what I did wrong, thanks.
Try removing the callback argument.
gulp.task('clean', function () {
return del(['dist/**/*']);
});
I have some CSS that is created by gulp-ruby-sass. The resultant CSS file is referenced in the html used by gulp-useref to get my assets for concatenation, minification, etc. The problem is (I think) that gulp-ruby-sass hasn't written the CSS file to disk yet and gulp-useref can't find the file to include it in the build. So this code:
gulp.task("compile-css", function () {
gulp.src(paths.css.appFiles)
.pipe(gutil.env.debug ? sass({ debugInfo : true }) : sass())
.pipe(gutil.env.debug ? gutil.noop() : cssmin())
.pipe(gulp.dest(paths.css.appDistDir));
});
gulp.task("concatenateAllTheThings", ["compile-css"], function () {
var assets = useref.assets(); // useref package does the magic
return gulp.src(["./index.html", "./login.html", "./reset.html", "./confirm.html"])
.pipe(assets)
.pipe(gulpif('*.js',ngAnnotate()))
.pipe(gulpif('*.js', uglify()))
.pipe(assets.restore())
.pipe(useref())
.pipe(gulp.dest(paths.output.destination));
});
throws this error:
[19:06:32] Starting 'compile-css'...
[19:06:32] Finished 'compile-css' after 13 ms
[19:06:32] Starting 'concatenateAllTheThings'...
[19:06:32] Starting Karma server...
events.js:72
throw er; // Unhandled 'error' event
^
Error: ENOENT, no such file or directory 'c....\webui\css\custom.css'
at Object.fs.openSync (fs.js:427:18)
at Object.fs.readFileSync (fs.js:284:15)
at DestroyableTransform.<anonymous> (C....\AppData\Roaming\npm\node_modules\gulp-useref\index.js:81:61)
at Array.forEach (native)
at DestroyableTransform.<anonymous> (C....g\AppData\Roaming\npm\node_modules\gulp-useref\index.js:70:35)
at Array.forEach (native)
at DestroyableTransform.<anonymous> (C....\AppData\Roaming\npm\node_modules\gulp-useref\index.js:46:36)
at Array.forEach (native)
at DestroyableTransform._transform (C....\AppData\Roaming\npm\node_modules\gulp-useref\index.js:43:15)
at DestroyableTransform.Transform._read (C....\AppData\Roaming\npm\node_modules\gulp-useref\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:184:10)
How can I get gulp-useref to see the CSS file from gulp-ruby-sass?
To let know gulp when a task is finished, you need to return the stream. This way, a task with a dependency on a task that you return will wait for it to finish.
So change compile-css to
gulp.task("compile-css", function () {
return gulp.src ...
});