gulp依赖任务 - browserify和pre-browserify任务

时间:2014-04-26 19:00:05

标签: javascript ember.js gulp browserify

我有以下gulpfile

我正在使用emberate,它接受​​一个回调函数,该函数在生成的文件(本例中为client/.index.js)被写入时被调用。现在browserify任务依赖于该文件,所以它不应该在嵌入完成之后运行。但是我得到了不同的结果,有时它会起作用,有时候我会得到这个:

  

错误:无法从'/ Users / myuser / workspace / myproject'中找到模块'./client/.index.js'

来自browserify的

(是的,该文件尚未存在)..我不确定我做错了什么,我有done作为我的emberate任务中的回调,而browserify任务依赖于我忘记了什么?

编辑:找到一个小模式,如果我运行它并且没有错误,下次我运行gulp我得到错误,但下次我不知道t,所以每隔一段时间oO

如果我运行gulp emberate,那就行得很好。然后,如果我运行gulp browserify,它将运行以下命令:

[gulp] Using file /Users/myuser/workspace/myproject/gulpfile.js
[gulp] Working directory changed to /Users/myuser/workspace/myproject
[gulp] Running 'clean'...
[gulp] Finished 'clean' in 3.11 ms
[gulp] Running 'emberate'...
[gulp] Finished 'emberate' in 22 ms
[gulp] Running 'browserify'...
[gulp] Live reload server listening on: 35729

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: Cannot find module './client/.index.js' from '/Users/myuser/workspace/myproject'
    at /Users/myuser/workspace/myproject/node_modules/browserify/node_modules/resolve/lib/async.js:36:25
    at load (/Users/myuser/workspace/myproject/node_modules/browserify/node_modules/resolve/lib/async.js:54:43)
    at /Users/myuser/workspace/myproject/node_modules/browserify/node_modules/resolve/lib/async.js:60:22
    at /Users/myuser/workspace/myproject/node_modules/browserify/node_modules/resolve/lib/async.js:16:47
    at Object.oncomplete (fs.js:107:15)

这个最新的version似乎有效,但是在监视期间如果文件被更改,它不会清理client/.index.js文件,而是继续向其添加oO(尽管正在运行{{1}有或没有gulp emberate依赖的工作正常..)。

2 个答案:

答案 0 :(得分:2)

您需要提供关于每项任务将如何完成的大量提示。见https://github.com/gulpjs/gulp/blob/master/docs/API.md#async-task-support

在您的所有任务中,请切换:

gulp.task('name', function () {
  gulp.src(glob)
    .pipe(stuff());
});

到此:

gulp.task('name', function () {
  return gulp.src(glob)
    .pipe(stuff());
});

请注意,您的less任务和emberate目前不执行此操作

答案 1 :(得分:1)

emberate看起来有一个错误,涉及使用一个gulp.watch正在进行的过程时的模板。

这是我最后的gulpfile.js

  var path = require('path');
  var gulp = require('gulp');
  var less = require('gulp-less');
  var refresh = require('gulp-livereload');
  var clean = require('gulp-clean');
  var source = require('vinyl-source-stream');
  var emberate = require('emberate');
  var browserify = require('browserify');

  gulp.task('less', function () {
    return gulp.src('./client/styles/*.less')
      .pipe(less({
        paths: [
          path.join(__dirname, 'client', 'styles')
        ]
      }))
      .pipe(gulp.dest('./dist/styles'))
      .pipe(refresh());
  });

  gulp.task('clean', function () {
    return gulp.src('./client/.index.js', { read: false })
      .pipe(clean());
  });

  gulp.task('emberate', ['clean'], function () {
    return emberate('./client', { pods: true })
      .pipe(source('.index.js'))
      .pipe(gulp.dest('./client'));
  });

  gulp.task('browserify', ['emberate'], function () {
    return browserify('./client/.index.js')
      .bundle()
      //Pass desired output filename to vinyl-source-stream
      .pipe(source('application.js'))
      // Start piping stream to tasks!
      .pipe(gulp.dest('./dist/scripts/'))
      .pipe(refresh());
  });

  gulp.task('watch', function () {
    gulp.watch('./client/styles/*.less', ['less']);
    gulp.watch('./client/**/*.{js,hbs}', ['browserify']);
  });

 gulp.task('default', ['less', 'browserify', 'watch']);

哪个效果很好:)