Rename on regex or filename with separate files

[gregorskii]

Hi there,

I have an interesting use case for this plugin. I would like to be able to process a single stream which may contain multiple files, and based on their extension rename the files to include a folder path in the destination.

I am using Gulp with webpack-stream, and the stream coming out of webpack includes a main.js and a styles.css. I would like to take both of those streams and move them into the destination as /scripts/main.js and styles/styles.css.

The gulp task:

gulp.task('webpack', () => {

    return gulp.src(config.webpack.paths)
        .pipe(plugins.gif(config.debugPaths, plugins.debug({title: 'FOUND (js):'})))
        .pipe(plugins.debug({title: 'Bundling:'}))
        .pipe(plugins.vinylNamed())
        .pipe(plugins.webpackStream(webpackConfig))
        .on('error', onError)
        .pipe(plugins.sourcemaps.init({loadMaps: true}))
        .pipe(through.obj(function(file, enc, cb) {
            // Dont pipe through any source map files as it will be handled
            // by gulp-sourcemaps
            var isSourceMap = /\.map$/.test(file.path);
            if (!isSourceMap) this.push(file);
            cb();
        }))
        .pipe(plugins.sourcemaps.write('.'))
        .pipe(gulp.dest(config.dist))
        .pipe(plugins.browserSync.stream({reload: true}))
    ;
});

Which is the standard example from webpack-stream. If I leave this alone it will output the files as separate files into my dist folder, where the css/js will be next to each other.

I am sure that this can be accomplished via through2 but before I spend time working on a separate plugin I figured this might be a nice feature of this plugin.

Thanks

[gregorskii]

Given some more time I was able to accomplish this with a simple stream:

.pipe(through.obj(function(file, enc, cb) {
    if (/\.css$/.test(file.path)) {
        file.path = file.dirname + '/styles/' + file.basename;
        this.push(file);
    } else if (/\.js$/.test(file.path)) {
        file.path = file.dirname + '/scripts/' + file.basename;
        this.push(file);
    }
    cb();
}))

[davidchase]

@gregorskii thanks for the input... for some reason github never sent me a notification about this issue

If I leave this alone it will output the files as separate files into my dist folder, where the css/js will be next to each other.

In your source directory do the files not already live in styles and scripts directories already?

Given some more time I was able to accomplish this with a simple stream:

Thats great that you found a solution, this feature still sounds like a good thing to add 😄