Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Using Gulp's 'gulp-useref' For a Full Build Pipeline

Francis N
Francis N
10,376 Points
Posted by Francis N
Francis N
10,376 Points

Migration from v2 api

If you upgrade gulp-useref from v2 without changing your gulpfile, you will get errors like this:

TypeError: $.useref.assets is not a function or

TypeError: useref.assets is not a function For a simple configuration, you can replace this V2 code:

var gulp = require('gulp'), useref = require('gulp-useref');

gulp.task('default', function () { var assets = useref.assets();

return gulp.src('app/*.html')
    .pipe(assets)
    .pipe(assets.restore())
    .pipe(useref())
    .pipe(gulp.dest('dist'));

}); with this V3 code:

var gulp = require('gulp'), useref = require('gulp-useref');

gulp.task('default', function () { return gulp.src('app/*.html') .pipe(useref()) .pipe(gulp.dest('dist')); }); If you were previously using useref in a multi-stage pipe, you may need to rewrite the pipe, since the simplified V3 API may not allow for its previous usage.

If the gulpfile you are using came from a generator, (for example, in JohnPapa's excellent "opinionated" HotTowel generator), it may be more practical to go back to that generator project to see whether they have upgraded to the V3 gulp-useref API, rather than trying to understand their pipe.

Marcy Montross
Marcy Montross
Courses Plus Student 5,382 Points
Marcy Montross
Marcy Montross
Courses Plus Student 5,382 Points

This is simply pasted from the github 'README' file. It doesn't explain what needs to change.

2 Answers

Adam Fields
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Adam Fields
Full Stack JavaScript Techdegree Graduate 37,838 Points
Adam Fields
.a{fill-rule:evenodd;}techdegree seal-36
Adam Fields
Full Stack JavaScript Techdegree Graduate 37,838 Points

Here is the working version for the course:

gulp.task('html', ['sass'], () => {
  gulp.src('src/index.html')
    .pipe(useref())
    .pipe(iff('*.js', uglify()))
    .pipe(iff('*.css', csso()))
    .pipe(gulp.dest('dist'));
});
John Perry
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
John Perry
Full Stack JavaScript Techdegree Graduate 41,012 Points
John Perry
.a{fill-rule:evenodd;}techdegree seal-36
John Perry
Full Stack JavaScript Techdegree Graduate 41,012 Points

Updated (06/18/2018): Here is the working version for the course:

gulp.task("html", gulp.series(["sass"], () => {
    gulp.src("src/index.html")
        .pipe(useref())
        .pipe(iff("*.js", uglify()))
        .pipe(iff('*.css', csso()))
        .pipe(gulp.dest("dist"))
}))