5

Gulp タスクでWiredepを使用して、index.html ファイルに Bower の依存関係を挿入しようとしています。次のタスク (Wiredep なし) は正常に実行されます。

gulp.task('build', ['copy', 'assets'], function(){

    return gulp.src('app/index.html')
    .pipe(inject(gulp.src(['dist/assets/js/*.js', 'dist/assets/css/*.css'], {read: false}), {relative: true}))
    .pipe(gulp.dest('dist'));
});

今、Wiredepを追加しようとしました:

var wiredep = require('wiredep');

gulp.task('build', ['copy', 'assets'], function(){

    return gulp.src('app/index.html')
    .pipe(wiredep())
    .pipe(inject(gulp.src(['dist/assets/js/*.js', 'dist/assets/css/*.css'], {read: false}), {relative: true}))
    .pipe(gulp.dest('dist'));
});

結果は次のとおりです。

[09:45:11] TypeError: dest.on is not a function
    at DestroyableTransform.Readable.pipe (C:\GIT\myApp\myApp-front\node_module
s\gulp-debug\node_modules\through2\node_modules\readable-stream\lib\_stream_read
able.js:533:8)
    at Gulp.<anonymous> (C:\GIT\myApp\myApp-front\gulpfile.js:38:6)
    at module.exports (C:\GIT\myApp\myApp-front\node_modules\gulp\node_modules\
orchestrator\lib\runTask.js:34:7)
    at Gulp.Orchestrator._runTask (C:\GIT\myApp\myApp-front\node_modules\gulp\n
ode_modules\orchestrator\index.js:273:3)
    at Gulp.Orchestrator._runStep (C:\GIT\myApp\myApp-front\node_modules\gulp\n
ode_modules\orchestrator\index.js:214:10)
    at C:\GIT\myApp\myApp-front\node_modules\gulp\node_modules\orchestrator\ind
ex.js:279:18
    at finish (C:\GIT\myApp\myApp-front\node_modules\gulp\node_modules\orchestr
ator\lib\runTask.js:21:8)
    at C:\GIT\myApp\myApp-front\node_modules\gulp\node_modules\orchestrator\lib
\runTask.js:52:4
    at f (C:\GIT\myApp\myApp-front\node_modules\gulp\node_modules\orchestrator\
node_modules\end-of-stream\node_modules\once\once.js:17:25)
    at DestroyableTransform.onend (C:\GIT\myApp\myApp-front\node_modules\gulp\n
ode_modules\orchestrator\node_modules\end-of-stream\index.js:31:18)

コマンドラインから Wiredep を直接使用してみましたが、問題なく動作しました。Node v4.2.2 を使用して、Windows で実行しています。

編集 誰かが同じ問題に遭遇した場合、回避策はタスクを次のように変更することです。

gulp.task('build', ['copy', 'assets'], function(){
    wiredep({src:'dist/index.html'});

    return gulp.src('dist/index.html')
    .pipe(inject(gulp.src(['dist/assets/js/*.js', 'dist/assets/css/*.css'], {read: false}), {relative: true}))
    .pipe(gulp.dest('dist'));
});

index.html は、注入する前に dist ディレクトリにコピーされることに注意してください。

なぜストリームを使用して依存関係を配線できないのか、まだ疑問に思っています。

4

1 に答える 1

13

私は自分でこの問題に遭遇しました。これは、wiredep をインポートする方法が原因です。gulp ストリームの一部としてパイプ処理するには、次の手順を実行する必要があります。

var wiredep = require('wiredep').stream;

この部分を除外する.streamと、gulp ストリームの外部の関数として wireep を使用できます。

于 2015-11-13T13:15:26.893 に答える