armed / gulp-flatten

Gulp plugin: remove or replace relative paths for files

gulp-flatten

Remove or replace relative path for files (gulp v3).

Install

npm install gulp-flatten

Usage

Example source directory with bower compoments:

├── angular
│   ├── README.md
│   ├── angular-csp.css
│   ├── angular.js
│   ├── angular.min.js
│   └── bower.json
├── angular-route
│   ├── README.md
│   ├── angular-route.js
│   ├── angular-route.min.js
│   ├── angular-route.min.js.map
│   └── bower.json
├── angular-sanitize
│   ├── README.md
│   ├── angular-sanitize.js
│   ├── angular-sanitize.min.js
│   ├── angular-sanitize.min.js.map
│   └── bower.json
└── bootstrap
    ├── DOCS-LICENSE
    ├── LICENSE
    ├── LICENSE-MIT
    ├── README.md
    ├── bower.json
    └── dist
        ├── css
        │   ├── bootstrap-theme.css
        │   ├── bootstrap-theme.min.css
        │   ├── bootstrap.css
        │   └── bootstrap.min.css
        ├── fonts
        │   ├── glyphicons-halflings-regular.eot
        │   ├── glyphicons-halflings-regular.svg
        │   ├── glyphicons-halflings-regular.ttf
        │   └── glyphicons-halflings-regular.woff
        └── js
            ├── bootstrap.js
            └── bootstrap.min.js

By default gulp stores files with it's relative paths. To copy all minified javascript files from bower_components to build folder without relative paths:

var flatten = require('gulp-flatten');

gulp.src('bower_components/**/*.min.js')
  .pipe(flatten())
  .pipe(gulp.dest('build/js'));

Result will be list of all .min.js files inside build/js dir:

build
└── js
    ├── angular-route.min.js
    ├── angular-sanitize.min.js
    ├── angular.min.js
    └── bootstrap.min.js

Options

flatten(options)

options.newPath

Type: String
Default: ''

Relative path for file.

options.includeParents

Type: Number or Array of two numbers

If passed in as positive number, it will include the number of top-level parents in the output. Using this code:

gulp.src(['bower_components/**/*.css'])
  .pipe(flatten({ includeParents: 1} ))
  .pipe(gulp.dest('build/'));

will create this structure (from sample directory tree above):

└── bootstrap
    ├── bootstrap-theme.css
    ├── bootstrap-theme.min.css
    ├── bootstrap.css
    └── bootstrap.min.css

If passed in as negative number, it will include the number of bottom-level parents in the output. Using this code:

gulp.src(['bower_components/**/*.css'])
  .pipe(flatten({ includeParents: -1} )) //or indludeParents: [0, 1]
  .pipe(gulp.dest('build/'));

will create this structure:

└── css
    ├── bootstrap-theme.css
    ├── bootstrap-theme.min.css
    ├── bootstrap.css
    └── bootstrap.min.css

If passes as array of two numbers, both parents from top and bottom will be kept in resulting path of a file.

gulp.src(['bower_components/**/*.css'])
  .pipe(flatten({ includeParents: [1, 1]} ))
  .pipe(gulp.dest('build/'));

will create this structure:

└── bootstrap
    └── css
        ├── bootstrap-theme.css
        ├── bootstrap-theme.min.css
        ├── bootstrap.css
        └── bootstrap.min.css

options.subPath

Type: Number or Array of two Numbers [begin, end]

This options applies Array.slice to the array of path elements and allows you to receive a subsequences of the path.

gulp.src(['bower_components/**/*.css'])
  .pipe(flatten({ subPath: [1, 1]} ))
  .pipe(gulp.dest('build/'));

This as an example would flatten top1/top2/bottom2/bottom1/file.txt to top2/file.txt.

[1, -1] would flatten top1/top2/bottom2/bottom1/file.txt to top2/bottom2/file.txt.

Please refer to the Array.slice documentation for a detailed description.

! If you're using both options.includeParents combined with options.subPath please note that options.includeParents is applied first.

License

MIT

gulp-flatten's Issues

Replace deprecated dependency gulp-util

gulp-util has been recently deprecated. Continuing to use this dependency may prevent the use of your library with the latest release of Gulp 4 so it is important to replace gulp-util.

The README.md lists alternatives for all the components so a simple replacement should be enough.

Your package is one of the most popular packages still relying on gulp-util, it would be good to publish a fixed version to npm as soon as possible.

See:

• https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
• gulpjs/gulp-util#143

Add support for filesystem depth

I'd like to be able to be able to choose how deep to flatten the directory tree with an option. I'm calling the option "includeParents" since I think it's more descriptive than "depth"

To use the example from the README file, this is what the new option would look like:

var flatten = require('gulp-flatten');

gulp.src(['bower_components/**/*.min.js', 'bower_components/**/*.css'])
  .pipe(flatten({ includeParents: 1} ))
  .pipe(gulp.dest('build/'));

And it would create this structure:

├── angular
│   ├── angular-csp.css
│   └── angular.min.js
├── angular-route
│   └── angular-route.min.js
├── angular-sanitize
│   └── angular-sanitize.min.js
└── bootstrap
    ├── bootstrap-theme.css
    ├── bootstrap-theme.min.css
    ├── bootstrap.css
    ├── bootstrap.min.css
    └── bootstrap.min.js

This would be helpful for me to keep CSS/JS/fonts all together for Bower components. Is this something you would be interested in adding/accepting PRs for?

TypeError: Cannot read property 'reduce' of undefined

Hey, thanks for the library.

I'm having issues using gulp-flatten. I am using

  return gulp.src('./components/**/*.pug')
        // .pipe(print())
        .pipe(flatten())
        .pipe(pug({ verbose : false }))
        .pipe(gulp.dest("./../public/templates/"))

also tried

  return gulp.src('./components/**/*.pug')
        // .pipe(print())
        .pipe(pug({ verbose : false }))
        .pipe(flatten())
        .pipe(gulp.dest("./../public/templates/"))

Both produce the following error:

 TypeError: Cannot read property 'reduce' of undefined
    at _flatten (/home/james/Code/3drepo.io/frontend/node_modules/flatten/index.js:14:16)
    at flatten (/home/james/Code/3drepo.io/frontend/node_modules/flatten/index.js:11:10)
    at Gulp.<anonymous> (/home/james/Code/3drepo.io/frontend/gulpfile.js:56:15)
    at module.exports (/home/james/Code/3drepo.io/frontend/node_modules/orchestrator/lib/runTask.js:34:7)
    at Gulp.Orchestrator._runTask (/home/james/Code/3drepo.io/frontend/node_modules/orchestrator/index.js:273:3)
    at Gulp.Orchestrator._runStep (/home/james/Code/3drepo.io/frontend/node_modules/orchestrator/index.js:214:10)
    at Gulp.Orchestrator.start (/home/james/Code/3drepo.io/frontend/node_modules/orchestrator/index.js:134:8)
    at /usr/local/lib/node_modules/gulp/bin/gulp.js:129:20
    at _combinedTickCallback (internal/process/next_tick.js:73:7)
    at process._tickCallback (internal/process/next_tick.js:104:9)

Using:
Node.js LTS 6.11.2
Gulp 3.9.1

Handling files with equal names

Hi,

it would be nice, if you would offer an option for handling files with equal names (e.g. "override" or "stop").

Cheers,
Artjom

Flatten fails when directories contains a '.'

I'm using gulp-flatten to move bower components from it's directory into either a js/vendor and css/vendor directory, however I'm running into an issue with normalize.css. The gulp code that I'm using is

gulp.task('bower:css', function () {
    gulp.src('_bower_components/**/*.css')
        .pipe($.flatten())
        .pipe($.rename(function(path) {
            path.basename = '_' + path.basename;
            path.extname = '.scss';
        }))
        .pipe(gulp.dest('src/assets/scss/_vendor'));
});

But when this is run it gives this error:

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: EISDIR, open '/path/to/site/src/assets/scss/_vendor/_normalize.scss'

It seems what's throwing it off is that normalize.css has the .css in it, so it fails when it runs into this directory. Is there any way to fix this? Thanks in advance.

Tag for current state?

Hi,
is it possible to tag the current code-state?
I'd like to use this gulp-util-free version with a pinned version.

Thanks in advance.
Robs

includeParents use negative values as "except"

I'm working on an angular project and my application is split into different modules like core and manage. Some modules (in this example the manage module) have additional submodules (here users). All modules and submodules have directories for their controllers and partials.

My folder structure looks like this:

└── src
    ├── core
    |   ├── controllers
    |   └── partials
    └── manage
        ├── controllers
        ├── partials
        └── users
            ├── controllers
            └── partials

All files from src are compiled or copied to the folder public that has a subfolder partials.
Right now my task looks like this:

# coffeescript
gulp.task 'html', ->
  gulp.src './src/**/*.jade', {base: './src'}
    .pipe jade()
    .pipe gulp.dest './public/partials'

The partials from src/core/partials/ are stored in public/partials/core/partials/; partials from src/manage/users/partials/ in public/partials/manage/users/partials/. The additional partials at the end bothers me a lot.

As the transition of the first part (src/ to public/partials/) is already handled by gulp.src and gulp.dest, I'm looking for a possibility to eliminate the last part of the path. As I don't know how many parents it has in total (core/partials/ vs. manage/users/partials/) I can't achieve this with the current includeParents option.

I suggest to use negative values as except conditions. So that includeParents: [-1, -1] would transform part1/part2/part3/part4/ to part2/part3/.

What do you think? I would be happy to commit a pull request.

FileSystem Depth: In Reverse

First off, thanks for taking the time to make such a great tool, love it. I like the implementation of the { includeParents: 1 } however I believe this is taking the highest level.

I was wondering what I would do to extract the next parent up, as apposed to starting at the base path. For example:

path/to/stuff/file.js

When using .pipe(flatten({ includeParents: 1 })) on the above path, seems to bring back the first level from the top (aka path).

build/lib/path/file.js

How would I get the path for stuff using gulp-flatten?

build/lib/stuff/file.js

I hope you understand, hard to really explain what I mean but I did the best I could.

options example output contains "bootstrap.min.js" while the src glob is "**/*.css"