Explanation of node paths relative to gulp.pipe ()

Question

My question starts with another question: Gulp: How to set the dest folder relative to the processed file (when using wildcards)?

I have the same situation when I need to create compressed versions for each module. That is, I have

ui/test/one/script1.js ui/test/two/script2.js 

and I need gulp to copy files to relative directories, so I end up with

 ui/test/one/compressed/script1.js ui/test/two/compressed/script2.js 

I have the following gulp task

 gulp.task('test', function() { return gulp.src('ui/test/**/*.js') .pipe(gulp.dest(function(file) { return path.join(path.dirname(file.path), 'compressed'); })); }); 

However, when I run it, I get

 ui/test/one/compressed/one/script1.js ui/test/two/compressed/two/script2.js 

I see in the docs where it says

cwd - specify the working directory to which the folder belongs. base - specify the folder relative to cwd. By default, the globe starts. This is used to determine file names when saving to .dest ()

I have several questions, in particular about .src() , .dest() and path and file objects. (That is, although I'm sure there are other ways to achieve my final goal, this question specifically concerns the behavior of the gulp sample above the code and the functions mentioned, so I can better understand their behavior and API. )

Questions

• When the documents say "working directory, folder relative", which folder is it?
• in the same note regarding this comment and the place in the documents where "base" is indicated - indicate the folder relative to cwd. glob starts "what does it mean" where does the globe begin "? My understanding of" glob "is that it is a whole line, but is it really a * character on that line? So, for 'some / folder / ** / *. Js' with a file existing in some/folder/a/b/c/foo.js I'm not sure if the base is some/folder/ , some/folder/a/ or some/folder/a/b/c/ ?
• is there a way to say <where the glob begins> + '..' ?
• where I say path.join (path.dirname (file.path), 'compress') I assume I am creating C:\blah\ui\test\one\compressed . It follows that no matter what solution the actual file name has, one\script1.js is in mind. How can I change my mind so that he only script1.js about script1.js ?

Note. I tried to do the following (using gulp -debug)

 gulp.task('test', function() { return gulp.src('ui/test/**/*.js', {cwd: './'}) .pipe(debug({minimal: false})) .pipe(rename(function(path) { path.basename = path.basename.substring(path.basename.lastIndexOf('\\') + 1); })) .pipe(debug({minimal: false})) .pipe(gulp.dest(function(file) { return path.join(path.dirname(file.path), 'compressed'); })); }); 

The console has the following output for this version of the task:

 cwd: ./ base: C:\blah\ui\test path: C:\blah\ui\test\one\script1.js cwd: ./ base: C:\blah\ui\test path: C:\blah\ui\test\one\script1.js cwd: ./ base: C:\blah\ui\test path: C:\blah\ui\test\two\script2.js cwd: ./ base: C:\blah\ui\test path: C:\blah\ui\test\two\script2.js 

So, it seems that renaming does not affect the path. I also tried modifying path.dirname in the renamed channel, but could not find anything that could have the desired effect by simply removing the name of the false directory from the final output path.

So my last question is what exactly do path.basename and path.dirname contain for the path object passed to the rename function?

edit: I found this on how to debug gulp tasks. Doing this with the debugger; statement debugger; placed in the rename function allowed me to check the path object, which looks like this:

 { basename: "script1", dirname: "one", extname: ".js" } 

Setting the .dir path name to '' as a result of renaming results in

 ui/test/compressed/script1.js ui/test/compressed/script2.js 

so it may be that rename () alone is not suitable for what I need. This is more like the basic version of .src (), where the key lies, but the docs are pretty short.

Answer 1

Question 1:

 gulp.src('ui/test/**/*.js') 

This line sets '/ ui / test /' as your root directory (“working directory of files”), since it is the base of your glob template. That is why the "relative paths" served to dest were "one / script1.js" and "two / script2.js".

Question 2:

In glob, documents reference your "** / *. Js" template. Thus, the base of your glob is the same as its root directory "/ ui / test /", which in this case means the same things as "folder with respect to cwd".

Question 3:

The "base" property for each path is set similarly to the glob2base module for each file coming from gulp. src stream.

 glob2base(new glob.Glob('/ui/test/**/*.js')) + '..'; 

coincides with

 file.base + '..'; 

if that makes sense to you.

Question 4:

I assume that you are using gulp-rename in your second section of code. Therefore, this should solve your problem.

 gulp.src('ui/test/**/*.js') .pipe(rename(function(path){ path.basename = 'compressed/' + path.basename; }) .pipe(gulp.dest(function(file) { return file.base; })); 

Other parameters that can be passed to gulp.src can be found here , but I do not think that they directly decide what you are trying to do. gulp.src does not seem to expect you to hack a new directory in the middle of each path, so renaming is the easiest solution.

I do not blame you for your understanding of documents. I had to jump between three or four different github pages to put everything together. I hope you learned as much as I did.