TypeError: $ .useref.assets ist keine Funktion

Question

Ich versuche, eine Angular-App mit Heroku zu bauen, ich bekomme diesen Fehler immer, wenn es den HTML-Build-Zustand erreicht. Es ist das erste Mal, dass ich auf Heroku arbeite, aber in den letzten Tagen habe ich immer wieder andere Fehler bekommen, während die App ohne Probleme auf meinem lokalen Rechner und auf einem Server läuft.

TypeError: $.useref.assets is not a function 
2017-04-18T14:36:18.895917+00:00 app[web.1]:  at Gulp.<anonymous> (/app/gulpfile.js:55:25) 
2017-04-18T14:36:18.895918+00:00 app[web.1]:  at module.exports (/app/node_modules/orchestrator/lib/runTask.js:34:7) 
2017-04-18T14:36:18.895919+00:00 app[web.1]:  at Gulp.Orchestrator._runTask (/app/node_modules/orchestrator/index.js:273:3) 
2017-04-18T14:36:18.895920+00:00 app[web.1]:  at Gulp.Orchestrator._runStep (/app/node_modules/orchestrator/index.js:214:10) 
2017-04-18T14:36:18.895920+00:00 app[web.1]:  at /app/node_modules/orchestrator/index.js:279:18 
2017-04-18T14:36:18.895921+00:00 app[web.1]:  at finish (/app/node_modules/orchestrator/lib/runTask.js:21:8) 
2017-04-18T14:36:18.895922+00:00 app[web.1]:  at /app/node_modules/orchestrator/lib/runTask.js:52:4 
2017-04-18T14:36:18.895922+00:00 app[web.1]:  at f (/app/node_modules/end-of-stream/node_modules/once/once.js:17:25) 
2017-04-18T14:36:18.895923+00:00 app[web.1]:  at DestroyableTransform.onend (/app/node_modules/end-of-stream/index.js:31:18) 
2017-04-18T14:36:18.895924+00:00 app[web.1]:  at emitNone (events.js:91:20) 
2017-04-18T14:36:18.895924+00:00 app[web.1]:  at DestroyableTransform.emit (events.js:185:7) 
2017-04-18T14:36:18.895925+00:00 app[web.1]:  at /app/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:965:16 
2017-04-18T14:36:18.895925+00:00 app[web.1]:  at _combinedTickCallback (internal/process/next_tick.js:73:7) 
2017-04-18T14:36:18.895926+00:00 app[web.1]:  at process._tickCallback (internal/process/next_tick.js:104:9) 

Das ist mein gulpfile.js

/* jshint node:true */ 
'use strict'; 

var gulp = require('gulp'); 
var karma = require('karma').server; 
var argv = require('yargs').argv; 
var $ = require('gulp-load-plugins')(); 
var gulp = require('gulp'), 
    useref = require('gulp-useref'); 

gulp.task('styles', function() { 
    return gulp.src([ 
     'app/styles/less/app-green.less', 
     'app/styles/less/app-blue.less', 
     'app/styles/less/app-red.less', 
     'app/styles/less/app-orange.less' 
    ]) 
    .pipe($.plumber()) 
    .pipe($.less()) 
    .pipe($.autoprefixer({browsers: ['last 1 version']})) 
    .pipe(gulp.dest('dist/styles')) 
    .pipe(gulp.dest('app/styles')) 
    .pipe(gulp.dest('.tmp/styles')); 
}); 



gulp.task('html', function() { 
    return gulp.src(options.src + '/index.html') 
    .pipe(useref()) 
    .pipe(gulpif('*.js', uglify())) 
    .pipe(gulp.dest(options.dist)); 
});'' 



gulp.task('jshint', function() { 
    return gulp.src('app/scripts/**/*.js') 
    .pipe($.jshint()) 
    //.pipe($.jshint.reporter('jshint-stylish')) 
    //.pipe($.jshint.reporter('fail')); 
}); 

gulp.task('jscs', function() { 
    return gulp.src('app/scripts/**/*.js') 
    .pipe($.jscs()); 
}); 

gulp.task('html', ['styles'], function() { 
    var lazypipe = require('lazypipe'); 
    var cssChannel = lazypipe() 
    .pipe($.csso) 
    .pipe($.replace, 'bower_components/bootstrap/fonts', 'fonts'); 

var assets = useref.assets({searchPath: '{.tmp,app}'}); 

    return gulp.src('app/**/*.html') 
    //.pipe(assets) 
    .pipe($.if('*.js', $.ngAnnotate())) 
    .pipe($.if('*.js', $.uglify())) 
    .pipe($.if('*.css', cssChannel())) 
     .pipe(useref()) 
    pipe(assets.restore()) 
    .pipe($.useref()) 
    .pipe($.if('*.html', $.minifyHtml({conditionals: true, loose: true}))) 
    .pipe(gulp.dest('dist')); 
}); 

gulp.task('images', function() { 
    return gulp.src('app/images/**/*') 
    // .pipe($.cache($.imagemin({ 
    // progressive: true, 
    // interlaced: true 
    // }))) 
    .pipe(gulp.dest('dist/images')); 
}); 

gulp.task('fonts', function() { 
    return gulp.src(require('main-bower-files')().concat('app/styles/fonts/**/*') 
    .concat('bower_components/bootstrap/fonts/*')) 
    .pipe($.filter('**/*.{eot,svg,ttf,woff,woff2}')) 
    .pipe($.flatten()) 
    .pipe(gulp.dest('dist/fonts')) 
    .pipe(gulp.dest('app/fonts')) 
    .pipe(gulp.dest('.tmp/fonts')); 
}); 

gulp.task('extras', function() { 
    return gulp.src([ 
    'app/*.*', 
    '!app/*.html', 
    'node_modules/apache-server-configs/dist/.htaccess' 
    ], { 
    dot: true 
    }).pipe(gulp.dest('dist')); 
}); 

gulp.task('clean', require('del').bind(null, ['.tmp', 'dist'])); 

gulp.task('connect', ['styles'], function() { 
    var serveStatic = require('serve-static'); 
    var serveIndex = require('serve-index'); 
    var app = require('connect')() 
    .use(require('connect-livereload')({port: 35729})) 
    .use(serveStatic('.tmp')) 
    .use(serveStatic('app')) 
    // paths to bower_components should be relative to the current file 
    // e.g. in app/index.html you should use ../bower_components 
    .use('/bower_components', serveStatic('bower_components')) 
    .use(serveIndex('app')); 

    require('http').createServer(app) 
    .listen(9000) 
    .on('listening', function() { 
     console.log('Started connect web server on http://localhost:9000'); 
    }); 
}); 

gulp.task('serve', ['wiredep', 'connect', 'fonts', 'watch'], function() { 
    if (argv.open) { 
    require('opn')('http://localhost:9000'); 
    } 
}); 

gulp.task('test', function(done) { 
    karma.start({ 
    configFile: __dirname + '/test/karma.conf.js', 
    singleRun: true 
    }, done); 
}); 

// inject bower components 
gulp.task('wiredep', function() { 
    var wiredep = require('wiredep').stream; 
    var exclude = [ 
    'bootstrap', 
    'jquery', 
    'es5-shim', 
    'json3', 
    'angular-scenario' 
    ]; 

    gulp.src('app/styles/*.less') 
    .pipe(wiredep()) 
    .pipe(gulp.dest('app/styles')); 

    gulp.src('app/*.html') 
    .pipe(wiredep({exclude: exclude})) 
    .pipe(gulp.dest('app')); 

    gulp.src('test/*.js') 
    .pipe(wiredep({exclude: exclude, devDependencies: true})) 
    .pipe(gulp.dest('test')); 
}); 

gulp.task('watch', ['connect'], function() { 
    $.livereload.listen(); 

    // watch for changes 
    gulp.watch([ 
    'app/**/*.html', 
    '.tmp/styles/**/*.css', 
    'app/scripts/**/*.js', 
    'app/images/**/*' 
    ]).on('change', $.livereload.changed); 

    gulp.watch('app/styles/**/*.less', ['styles']); 
    gulp.watch('bower.json', ['wiredep']); 
}); 

gulp.task('builddist', ['jshint', 'html', 'images', 'fonts', 'extras', 'styles'], 
    function() { 
    return gulp.src('dist/**/*').pipe($.size({title: 'build', gzip: true})); 
}); 

gulp.task('build', ['clean'], function() { 
    gulp.start('builddist'); 
}); 

gulp.task('docs', [], function() { 
    return gulp.src('app/scripts/**/**') 
    .pipe($.ngdocs.process()) 
    .pipe(gulp.dest('./docs')); 
}); 

Answer 1

Dies wurde geschrieben, bevor OP seine Frage änderte den Inhalt dieser Antwort enthalten.

---

Der Fehler sagt Ihnen, dass $.useref.assets keine Funktion ist, und es kommt aus der folgenden Zeile:

var assets = $.useref.assets({searchPath: '{.tmp,app}'}); 

Da Sie bereits die gulp-useref Plugin in eine lokale Variable Laden

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

Sie müssen nicht die $ von gulp-load-plugins verwenden.

Danach wird das erste, was Sie sehen in der Readme von schluck-useref:

What's new in 3.0?

Changes under the hood have made the code more efficient and simplified the API. Since the API has changed, please observe the usage examples below.

If you get errors like

TypeError: useref.assets is not a function 

or

TypeError: $.useref.assets is not a function 

please read the Migration Notes below.

Und unten ist die Migration from v2 API:

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

Sie brauchen nicht useref.assets(...) mehr anrufen . Reichen Sie einfach wie im Beispiel V3 auf useref().

Answer 2

ersetzen Sie Codes

var assets = useref.assets({searchPath: '{.tmp,app}'}); 
    return gulp.src('app/**/*.html') 
    //.pipe(assets) 
    .pipe($.if('*.js', $.ngAnnotate())) 
    .pipe($.if('*.js', $.uglify())) 
    .pipe($.if('*.css', cssChannel())) 
    .pipe(useref()) 
    pipe(assets.restore()) //you missed a dot point here 
    .pipe($.useref()) 
    .pipe($.if('*.html', $.minifyHtml({conditionals: true, loose: true}))) 
    .pipe(gulp.dest('dist')); 
}); 

mit so etwas wie:

return gulp 
.src('app/**/*.html') 
    .pipe($.useref()) 
    .pipe($.if('*.js', $.ngAnnotate())) 
    .pipe($.if('*.js', $.uglify())) //to uglify js files 
    .pipe($.if('*.css', $.csso())) //to uglify css files 
    .pipe(gulp.dest('dist')); 

oder

var jsAppFilter = $.filter('**/app.js', { restore: true }); 

return gulp 
    .src(config.index)   
    .pipe($.useref()) 
    .pipe(jsAppFilter) //only add annotations to your custom js files 
    .pipe($.ngAnnotate()) 
    .pipe(jsAppFilter.restore) 
    .pipe($.if('*.js', $.uglify())) 
    .pipe($.if('*.css', $.csso())) 
    .pipe(gulp.dest('./build'));