Piping assets to a destination without modification

[rogerhutchings]

I'm just getting started with streams, and I'm hitting a bit of a wall. Basically, I want to get the assets picked up in my index.html build blocks, and write them to a dev folder, preserving their src attributes. But for some reason, this doesn't output anything:

index.html

<!-- build:js(./bower_components/) libraries.js -->
<script src="lodash/lodash.js"></script>
<script src="firebase/firebase.js"></script>
<!-- endbuild -->

Gulpfile.js

gulp.task('pipeAssets', function () {
    return gulp.src('app/*.html')
        .pipe(useref.assets({ noconcat: true }))
        .pipe(debug())
        .pipe(gulp.dest('./output'));
});

I just want to do a straight copy of the files - and they're in the stream if I use debug() - where am I going wrong? Thanks :)

[jonkemp]

Looks like useref can't find your files. Could you try changing the build block to this?

<!-- build:js libraries.js -->
<script src="/bower_components/lodash/lodash.js"></script>
<script src="/bower_components/firebase/firebase.js"></script>
<!-- endbuild -->

[rogerhutchings]

Thanks for taking a look Jon! No luck, unfortunately :( The files are apparently in the stream at debug(), but aren't written anywhere.

Would it be possible to construct an array of file paths from the stream, maybe, so I could use that in gulp.src()?

[jonkemp]

If the files are in the stream, then I'm not sure how to help. It's not a gulp-useref issue at that point.

[feedmac]

I also have the same problem as rogerhutchings, gulp-debug shows the files so they are there. However they are not copied to destination. If I omit the { noconcat: true } it does work however it will ofcourse concat the files. I'm trying to figure out how to write the files now.

EDIT when I piped $.concat('test.js') after retrieving list of assets with noconcat: true, it works as expected.

[feedmac]

So I figured out how to do it, not sure if it's the best way - but it works great for my purpose at least.
Here's what I did:

.pipe($.useref.assets({ noconcat: true }))
        .pipe($.tap(function (file, t) {
            var asset = file.relative;
            asset = asset.replace(/^(\/|\.+(?!\/[^\.]))+\.+/, basePaths.src);
            return gulp.src(asset)
                .pipe(gulp.dest('dist'));
        }))

I'm using gulp-tap to get the relative path + filenames, and then i remove the relative path portion (../../) and replace it with basePath to get an absolute path from root folder. (ie: basePath.src = ./app/)

[jonkemp]

Closing.

[palmerj]

I'm having the same issue as stated in the original ticket. I think this issue should be reopened regardless of @amaeland hack.

[palmerj]

In my case the issue is because the base path is not the same path base directory. e.g:

cwd: ~/Documents/Development/website
base: ~/Documents/Development/website/src/html/pages
path: ~/Documents/Development/website/src/vendor/bootstrap/dist/css/bootstrap.css

Then after gulp.dest tries to copy the file (e.g gulp.dest('dist/') it results in:

cwd: ~/Documents/Development/website
base: ~/Documents/Development/website/dist
path: ~/Documents/Development/vendor/bootstrap/dist/css/bootstrap.css

The files are actually being copied - just in a directory outside of my main ~/Documents/Development/website folder and I didn't notice this at first.

[palmerj]

Having a little tap function like @amaeland also worked for me:

// Create output HTML pages from templates then
// concat & minify scripts and css
gulp.task('html', ['jshint', 'sass'], () => {
    return gulp.src('src/html/pages/**/*.hbs')
        .pipe(plumber())
        .pipe(handlebars({}, {
            ignorePartials: true,
            batch: ['src/html/partials']
        }))
        .pipe(rename({
            extname: '.html'
        }))
        .pipe(useref({ noconcat: development() }))
        .pipe(tap(function(file, t) {
            // ensure asset base path is aligned with
            // useref block asset paths within the html files
            if (['.js', '.css'].indexOf(file.extname) >= 0) {
                file.base = 'src';
            }
            return file;
        }))
        .pipe(gulpif('*.js', production(uglify())))
        .pipe(gulpif('*.css', production(cleanCss())))
        .pipe(gulp.dest('dist/'))
        .pipe(browserSync.stream());
});

[jonkemp]

@palmerj Is this the same issue you are having or not?

#208

[joshbernfeld]

Thank you @palmerj