TypeError：$ .useref.assets不是函数

Question

我正在尝试使用heroku构建一个Angular应用程序，每当它到达html构建状态时，我都会收到此错误。这是我第一次部署到heroku，但在过去几天，我一直在获取不同的错误，而应用程序在我的本地机器和服务器上运行时没有任何问题。

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) 

这是我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

这是之前OP改变了他的问题，包括这个答案的内容写入。

---

错误告诉你$.useref.assets不是一个功能，它来自于以下行：

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

既然你已经装载gulp-useref插件安装到一个局部变量

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

您不需要使用gulp-load-plugins的$。

之后，你在一饮而尽，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.

而下方则是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')); 
}); 

你并不需要调用useref.assets(...)了。就像在V3的例子中一样管道到useref()。

Answer 2

代替你的代码

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

的东西，如：

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

或

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