how base option affects gulp.src & gulp.dest

by

(You’re not looking at the official gulp documentation. http://github.com/arvindr21/gulp is just some guy’s fork of the gulpjs github repo. The official repo is http://github.com/gulpjs/gulp/ where the base option is indeed documented.)

To answer your question:

If you don’t specify the base option yourself, then everything before the first glob in your gulp.src() paths is automatically used as the base option and ommitted when writing to the destination folder.

Say you have the following files:

some/path/example/app/js/app.js
some/path/example/vendor/js/vendor.js
some/path/example/vendor/lib/js/lib.js

And this is your Gulpfile.js:

gulp.src('some/path/**/js/*.js')
  .pipe(gulp.dest('output'));

In this case everything before the ** is automatically used as your base option. So the above is essentially equivalent to this:

gulp.src('some/path/**/js/*.js', {base:'some/path/'})
  .pipe(gulp.dest('output'));

What this means is that some/path/ is stripped from the path of every file that matches the pattern in gulp.src(). The resulting structure in the output folder looks like this:

output/example/app/js/app.js
output/example/vendor/js/vendor.js
output/example/vendor/lib/js/lib.js

So a certain part of the directory structure of your source files is indeed lost. How much of your directory structure you lose depends on where the first glob in your gulp.src() pattern is.

If you want to avoid this you have to explicitly specify the base option:

gulp.src('some/path/**/js/*.js', {base:'.'})
  .pipe(gulp.dest('output'));

Now some/path/ will not be stripped from your file paths, resulting in the following folder structure in output:

output/some/path/example/app/js/app.js
output/some/path/example/vendor/js/vendor.js
output/some/path/example/vendor/lib/js/lib.js

EDIT: If you pass an array of patterns to gulp.src() there’s no way to specify a different base option for each of the array elements. This for example won’t work:

gulp.src(
  ['source1/examples/**/*.html',
   'source2/examples/**/*.html'],
  { base: ['source1/',    // Doesn't work. 
           'source2/']}   // Needs to be a string.
).pipe(gulp.dest('dist'));

Instead you have to follow the “Using multiple sources in one task” recipe. This lets you merge two streams each of which can receive its own base option:

var merge = require('merge-stream');

gulp.task('default', function() {
  merge(gulp.src('source1/examples/**/*.html', {base: 'source1/'}),
        gulp.src('source2/examples/**/*.html', {base: 'source2/'}))
   .pipe(gulp.dest('dist'));
});

More Related Contents:

  1. Gulp error: The following tasks did not complete: Did you forget to signal async completion?
  2. Pass Parameter to Gulp Task
  3. What is the ** glob character?
  4. Get the current file name in gulp.src()
  5. Can you remove a folder structure when copying files in gulp?
  6. Using Gulp to Concatenate and Uglify files
  7. about GULP and application development [closed]
  8. NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack [closed]
  9. Stylesheet not loaded because of MIME-type
  10. How to fix “ReferenceError: primordials is not defined” in Node.js
  11. Excluding files/directories from Gulp task
  12. gulp command not found – error after installing gulp
  13. Why do we need to install gulp globally and locally?
  14. Is it possible to pass a flag to Gulp to have it run tasks in different ways?
  15. How to prevent moment.js from loading locales with webpack?
  16. How to prepare release version with SystemJS and Gulp?
  17. Browserify, Babel 6, Gulp – Unexpected token on spread operator
  18. Gulps gulp.watch not triggered for new or deleted files?
  19. SyntaxError: ‘import’ and ‘export’ may appear only with ‘sourceType: module’ – Gulp
  20. How to use npm with ASP.NET Core
  21. After installation of Gulp: “no command ‘gulp’ found”
  22. Gulp.js task, return on src?
  23. Modify file in place (same dest) using Gulp.js and a globbing pattern
  24. Why does gulp.src not like being passed an array of complete paths to files?
  25. Using Grunt, Bower, Gulp, NPM with Visual Studio 2015 for a ASP.NET 4.5 Project
  26. cannot find module “lodash”
  27. Can I use a Gulp task with multiple sources and multiple destinations?
  28. Disable chrome react DevTools for production
  29. Permission denied to Docker daemon socket at unix:///var/run/docker.sock
  30. How to solve npm install error “npm ERR! code 1”

Leave a Comment