0

我正在尝试使用 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'));
});
4

2 回答 2

6

这是在 OP 更改他的问题以包含此答案的内容之前编写的。

该错误告诉您这$.useref.assets不是一个函数，它来自以下行：

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

由于您已经将gulp-useref插件加载到局部变量中

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

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

之后，您在gulp-useref的自述文件中看到的第一件事是：

3.0 有什么新功能？

引擎盖下的更改使代码更高效并简化了 API。由于 API 已更改，请注意以下使用示例。

如果您收到类似的错误

TypeError: useref.assets is not a function

或者

TypeError: $.useref.assets is not a function

请阅读下面的迁移说明。

以下是从 v2 API 迁移：

对于简单的配置，您可以替换此 V2 代码：

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

使用此 V3 代码：

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(...)了。只需useref()在 V3 示例中使用管道即可。

于 2017-04-18T15:03:07.137 回答
-1

替换你的代码

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'));
于 2017-04-27T04:47:37.877 回答