“错误:写完后”使用Coffeeify时

时间:2015-01-13 13:49:47

标签: coffeescript gulp browserify

我刚开始使用Browserify和Gulp,而且我在覆盖Grunt和Bower之前涵盖的所有基础方面遇到了一些麻烦。具体来说,我不能让这两个人与Coffeeify合作。我可以轻松地使用工作流程,首先将.coffee文件转换为.js,然后使用Browserify捆绑这些文件;无论如何,我都在保持我的“咖啡”任务,以检查生成的JavaScript源代码。但是,由于我确信Coffeeify已针对此任务进行了优化,我宁愿使用它。

每当我尝试使用Coffeeify转换包时,我都会收到“错误:写完后”。我试过省略扩展并在Browserify的选项中指定它;使用Browserify的内置“转换”选项(此处已注释),这在Browserify的API文档中不存在,但我在一些StackOverflow问题中看到过;并使用Browserify的“.add()”函数(此处也注释掉了),但似乎没有任何效果。我尝试使用coffeeify作为函数,带引号和无引号。

我在搜索时遇到问题,可能是因为Browserify的API处于早期阶段并因此发生了很大变化。我已经按照GitHub repo中指定的方式从命令行成功使用了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不适用于乙烯基转换,我应该使用乙烯基源流吗?订单有错吗? 为什么Coffeeify不能在我的Gulp任务中工作?

2 个答案:

答案 0 :(得分:1)

我没有使用过coffeeify,所以这可能不适用,但是当我运行一些shell命令时,gulp中的return命令试图在所有shell命令完成之前执行。这就像第一个shell命令返回良好,所以gulp试图继续前进,然后第二个shell命令试图返回,gulp说不。

试试这个......

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

答案 1 :(得分:1)

这是我在Browserify Gulp任务中所做的精简版本。请注意,我使用gulp-browserify代替browserify

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

您可能不需要concat(),因为您只处理一个文件,因此针对您的具体情况的等效JS可能看起来像这样:

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

继续使用基本browserify包的另一种方法是:

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

我还没有测试过这些,但希望这两个例子中的一个对你有用,或者至少指出你正确的方向。