gulp-useref.assets is not a function

[BrandonSchreck]

While following along your pluralsight video, the following gulp task results in an error 'TypeError: $GLP.useref.assets is not a function'.

gulp.task('optimize', ['inject', 'fonts', 'images'], function () {
    log('Optimizing the javascript, css, and html');

    var assets = $GLP.useref.assets({searchPath: './'}),
        templateCache = config.temp + config.templateCache.file,
        cssFilter = $GLP.filter('**/*.css'),
        jsLibFilter = $GLP.filter('**/' + config.optimized.lib),
        jsAppFilter = $GLP.filter('**/' + config.optimized.app);

    return gulp
        .src(config.index)
        .pipe($GLP.plumber())
        .pipe($GLP.inject(gulp.src(templateCache, { read: false }), {
            starttag: '<!-- inject:templates:js -->'
        }))
        .pipe(assets)
            .pipe(cssFilter)
            .pipe($GLP.csso())
            .pipe(cssFilter.restore())

            .pipe(jsLibFilter)
            .pipe($GLP.uglify())
            .pipe(jsLibFilter.restore())

            .pipe(jsAppFilter)
            .pipe($GLP.ngAnnotate())
            .pipe($GLP.uglify())
            .pipe(jsAppFilter.restore())

            .pipe($GLP.rev())
        .pipe(assets.restore)
        .pipe($GLP.useref())
        .pipe($GLP.revReplace())
        .pipe(gulp.dest(config.build))
        .pipe($GLP.rev.manifest())
        .pipe(gulp.dest(config.build));
});

As per gulp-useref documentation, v3 no longer uses:

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'));
});

but instead uses the following syntax:

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

gulp.task('default', function () {
    return gulp.src('app/*.html')
        .pipe(useref())
        .pipe(gulp.dest('dist'));
});

I was able to find a workaround while digging around the inner tubes but it does not append a version to the index.html page itself. Hopefully this will help others.

gulp.task('optimize', ['inject', 'fonts', 'images'], function () {
    log('Optimizing the javascript, css, and html');

    var lazypipe = require('lazypipe'),
        templateCache = config.temp + config.templateCache.file,
        cssFilter = $GLP.filter('**/*.css', {restore: true}),
        jsLibFilter = $GLP.filter('**/' + config.optimized.lib, {restore: true}),
        jsAppFilter = $GLP.filter('**/' + config.optimized.app, {restore: true}),
        notIndexFilter = $GLP.filter(['**/*', '!**/index.html'], {restore: true});

    return gulp
        .src(config.index)
        .pipe($GLP.plumber())
        .pipe($GLP.inject(
            gulp.src(templateCache, { read: false }),
            { starttag: '<!-- inject:templates:js -->' }
        ))
        // Apply the concat and file replacement with useref
        .pipe($GLP.useref({searchPath: './'}, lazypipe().pipe($GLP.sourcemaps.init,{loadMaps: true})))

        // Get the css
        .pipe(cssFilter)
        .pipe($GLP.csso())
        .pipe(cssFilter.restore)

        // Get the custom javascript
        .pipe(jsAppFilter)
        .pipe($GLP.ngAnnotate())
        .pipe($GLP.uglify())
        .pipe(jsAppFilter.restore)

        // Get the vendor javascript
        .pipe(jsLibFilter)
        .pipe($GLP.uglify())
        .pipe(jsLibFilter.restore)

        // Take inventory of the file names for future rev numbers
        .pipe(notIndexFilter)
        .pipe($GLP.rev())
        .pipe(notIndexFilter.restore)

        // Replace the file names in the html with rev numbers
        .pipe($GLP.revReplace())
        .pipe($GLP.sourcemaps.write('.'))
        .pipe(gulp.dest(config.build))
        .pipe($GLP.rev.manifest())
        .pipe(gulp.dest(config.build));
});

[hailuand]

I had this same issue too. Check out: https://www.npmjs.com/package/gulp-useref, specifically the body under 'Migration from v2 API.' Fair warning: that got me past this issue, and I'm currently stuck on serving the build.

EDIT: Fixed my serve-build task issue. It had nothing to do with useref. Best of luck.

[BgRva]

Following the examples and earlier posted above, I tried to stay as close as possible to what was being demonstrated in the course. Here is the resulting code for the optimize task that I eventually got working for the course section Minifying and Filtering, also below it are the devDependencies from my package.json to show which versions I was using. Note that farther along in the course you will need to refer to BrandonSchreck's earlier comment.

gulp.task('optimize', ['inject', 'fonts', 'images'], function() {
        var templateCache = config.temp + config.templateCache.file;
        var cssFilter = $.filter('**/*.css', {restore: true});
        var jsFilter = $.filter('**/*.js', {restore: true});

        return gulp
            .src(config.index)
            .pipe($.plumber())
            .pipe($.inject(
                    gulp.src(templateCache, {read: false}), {
                        starttag: '<!-- inject:templates:js -->'
                }))

            .pipe($.useref({searchPath: './'}))
            .pipe(cssFilter)
            .pipe($.csso())
            .pipe(cssFilter.restore)

            .pipe(jsFilter)
            .pipe($.uglify())
            .pipe(jsFilter.restore)

            .pipe(gulp.dest(config.build));
    });

from package.json:

  "devDependencies": {
    "browser-sync": "^2.16.0",
    "del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-angular-templatecache": "^2.0.0",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-csso": "^2.0.0",
    "gulp-filter": "^4.0.0",
    "gulp-if": "^2.0.1",
    "gulp-imagemin": "^3.0.3",
    "gulp-inject": "^4.1.0",
    "gulp-jscs": "^4.0.0",
    "gulp-jshint": "^2.0.1",
    "gulp-less": "^3.1.0",
    "gulp-load-plugins": "^1.3.0",
    "gulp-minify-html": "^1.0.6",
    "gulp-nodemon": "^2.1.0",
    "gulp-plumber": "^1.1.0",
    "gulp-print": "^2.0.1",
    "gulp-task-listing": "^1.0.1",
    "gulp-uglify": "^2.0.0",
    "gulp-useref": "^3.1.2",
    "gulp-util": "^3.0.7",
    "jshint": "^2.9.3",
    "jshint-stylish": "^2.2.1",
    "wiredep": "^4.0.0",
    "yargs": "^5.0.0"
  }