Gulp doesn't create folder?

Question

When I minified my css, I was left with an incorrect path to the fonts from various libraries. So, I created a task to move the fonts from my bower_components/ folder to dist/public/fonts:

gulp.task('doit', function() {
    gulp.src(["public/bower_components/bootstrap/dist/fonts/*", "public/bower_components/font-awesome/fonts/*"])
        .pipe(gulp.dest("dist/public/fonts"));
});

Basically that should throw any fonts I need into a generic fonts folder, which my minified css should now be able to access.

But after I run it, dist/public/fonts doesn't exist. Why not?

Answer 1

I don't fully understand the paths you're src-ing (public/bower_components?), but I believe you'll want to use the base option for gulp.src.

Because these two globs will have different bases, I'd suggest breaking it into two separate tasks, and building a third to aggregate them into a single. Otherwise you'll need to get into merging streams or the addSrc plugin.

gulp.task('copy:fonts:bootstrap', function () {
    return gulp.src(
        [
            'public/bower_components/bootstrap/dist/fonts/**/*'
        ],
        {
            base: 'public/bower_components/bootstrap/dist/fonts'
        }
    )
        .pipe(gulp.dest('dist/public/fonts'));
});

gulp.task('copy:fonts:fontawesome', function () {
    return gulp.src(
        [
            'public/bower_components/font-awesome/fonts/**/*'
        ],
        {
            base: 'public/bower_components/font-awesome/fonts'
        }
    )
        .pipe(gulp.dest('dist/public/fonts'));
});

gulp.task('copy:fonts', ['copy:fonts:bootstrap', 'copy:fonts:fontawesome']);

Answer 2

According to this article, specify your src like this:

gulp.src(['src/js/**/*.js'], { base: 'src' })
  .pipe(foo())
  .pipe(gulp.dest("./public/"));

and it will auto create the destination directories for you. In this case, the 'js' folder will be created in public if it doesnt exist already.