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