Coffeeifyを使用しているときに「エラー：終了後に書き込む」

Question

私はBrowserifyとGulpから始めています。以前はGruntとBowerがカバーしていたすべての基盤について少し問題がありました。具体的には、私は2つをCoffeeifyで動作させることはできません。 .coffeeファイルを.jsに変換した後、これらのファイルをBrowserifyでバンドルするワークフローを簡単に使用できます。 JavaScriptのソースコードを確認するために、私は "コーヒー"タスクをとどめています。しかし、私はすでにCoffeeifyがこのタスクに最適化されていると確信しているので、むしろ代わりに使用したいと思います。

Coffeeifyでバンドルを変換しようとするたびに、「エラー：終了後に書き込み」が表示されます。私は、拡張を省略して、Browserifyのオプションでそれを指定しようとしました。 Browserifyの組み込みの "transform"オプション（ここでコメントアウトされています）を使用していますが、これはBrowserifyのAPIドキュメントにはありませんが、StackOverflowのいくつかの質問で見ました。 Browserifyの ".add（）"関数（ここでもコメントアウト）を使用していますが、何も動作していないようです。私は関数として引用符をつけて引用符を使わずにcoffeeifyを使ってみました。

BrowserifyのAPIが初期段階にあり、多くの変更を行っている可能性があるため、検索に問題があります。 GitHubリポジトリで指定された方法で、コマンドラインからCoffeeifyを正常に使用しました。

var gulp = require('gulp'); 
var rename = require('gulp-rename'); 

var browserify = require('browserify'); 
var coffeeify = require('coffeeify'); 

var transform = require('vinyl-transform'); 

gulp.task('browserify', function() { 
    return gulp.src('app/modules/main/coffee/app.coffee', {base: './'}) 
    .pipe(transform(function(filename) { 
     return browserify({ 
      entries: filename, 
      debug: true, 
      // transform: ['coffeeify'], 
      extensions: ['.coffee'] 
     }) 
     // .add(filename) 
     .transform('coffeeify') 
     .bundle(); 
    })) 
    .pipe(rename(function(path) { 
     path.dirname = '', 
     path.basename = 'index', 
     path.ext = '.js' 
    })) 
    .pipe(gulp.dest('')); 
}); 

愚かなものがありますか？ Coffeeifyはビニル変換では機能しないのですか？代わりにビニルソースストリームを使用すべきですか？注文が間違っていますか？ 私のGulpタスクでCoffeeifyが動作しないのはなぜですか？

Answer 1

私はcoffeeifyを使用していないので、これは当てはまらないかもしれませんが、いくつかのシェルコマンドを実行すると、gulpのreturnコマンドはすべてのシェルコマンドが終了する前に実行しようとしていました。最初のシェルコマンドが正常に返されたようだったので、gulpが動いてしまい、2番目のシェルコマンドが戻ってきて、gulpがnoと答えた。

これを試してみてください

...

var gulp = require('gulp'); 
var rename = require('gulp-rename'); 

var browserify = require('browserify'); 
var coffeeify = require('coffeeify'); 

var transform = require('vinyl-transform'); 

gulp.task('browserify', function() { 
    gulp.src('app/modules/main/coffee/app.coffee', {base: './'}) 
    .pipe(transform(function(filename) { 
     return browserify({ 
      entries: filename, 
      debug: true, 
      // transform: ['coffeeify'], 
      extensions: ['.coffee'] 
     }) 
     // .add(filename) 
     .transform('coffeeify') 
     .bundle(); 
    })) 
    .pipe(rename(function(path) { 
     path.dirname = '', 
     path.basename = 'index', 
     path.ext = '.js' 
    })) 
    .pipe(gulp.dest('')); 
    return gulp.src(''); 
}); 

Answer 2

は、ここで私は私のBrowserifyガルプタスクでやっているの要約版です。 browserifyの代わりにgulp-browserifyを使用しています。 1つのファイルだけを処理しているので、

gulp  = require 'gulp' 
concat  = require 'gulp-concat' 
browserify = require 'gulp-browserify' 

gulp.task 'coffee', -> 
    gulp.src('_assets/js/src/**/*.coffee', read: false) 
     .pipe browserify(transform: ['coffeeify'], extensions: ['.coffee']) 
     .pipe concat('app.js') 
     .pipe gulp.dest('_assets/js/dist/') 

おそらく、おそらくこのようになりますあなたの特定のケースのための同等のJSので、concat()を必要としません：

var gulp  = require('gulp'); 
var rename  = require('gulp-rename'); 
var browserify = require('gulp-browserify'); 

gulp.task('browserify', function() { 
    return gulp.src('app/modules/main/coffee/app.coffee', { read: false, base: './' }) 
     .pipe(browserify({ 
      debug: true, 
      transform: ['coffeeify'], 
      extensions: ['.coffee'] 
     })) 
     .pipe(rename({ 
      dirname: '', 
      basename: 'index', 
      extname: '.js' 
     })) 
     .pipe(gulp.dest('')); 
}); 

代替方法私はこれら二つの例wiは、このいずれかが、うまくいけば1をテストしていない

var gulp  = require('gulp'); 
var source  = require('vinyl-source-stream'); 
var browserify = require('browserify'); 

gulp.task('browserify', function() { 
    return browserify({ 
       debug: true, 
       entries: ['app/modules/main/coffee/app.coffee'], 
       transform: ['coffeeify'], 
       extensions: ['.coffee'] 
     }) 
     .bundle() 
     .pipe(source('index.js')) 
     .pipe(gulp.dest('./')); 
}); 

：あなたは次のようになりベースbrowserifyパッケージの使用を継続しますあなたのために働くか、少なくとも正しい方向を指します。