结合咖啡和 js 开发 Gulp

Question

使用 Gulp 在每次保存的基础上简化我的构建过程，同时消除对 "temp" 文件的需求是我的目标（也是为什么我选择使用 Gulp咕噜声）

我最近发现，显然，coffeescript 编译器无法处理作为源的基本 Javascript

所以这个，出错了：

gulp.task('scripts', function() {

    var stream =
            gulp.src([
                "bower_components/d3/d3.js",
                "bower_components/angular/angular.js",
                "bower_components/foundation/js/foundation.js",
                "public-dev/scripts/app.js",
                "public-dev/scripts/**/*.js",
                "public-dev/scripts/**/*.coffee"
            ])
                .pipe(coffee())
                .pipe(concat('compiled.js'))
                .pipe(gulp.dest('./public/scripts'))
        ;

    return stream;
});

这会产生 output/errpr:

[11:58:51] Starting 'scripts'...

events.js:72
        throw er; // Unhandled 'error' event
              ^
/var/www/node.fortiguard.dev/bower_components/d3/d3.js:1:2: error: reserved word "function"
!function() {
 ^

我应该如何设置它，而不是再次创建任何临时文件？

我喜欢 LESS 编译器的一点是，它仍然可以直接输入 CSS 文件，这很好。我有点希望 Coffee 编译器会以同样的方式做出反应

Answer 1

遗憾的是，事实并非如此。您可以做的是使用底层 event-stream 的 merge 方法。然后，您将拥有一个用于编译的 coffee 文件的管道和一个用于 javascript 端的管道。

这是一个例子Gulpfile.coffee:

coffee = require 'gulp-coffee'
es     = require 'event-stream'

gulp.task 'scripts', () ->
  es.merge(
    gulp.src(["public-dev/app.js", "public-dev/scripts/**/*.js"]) # ...
    gulp.src("public-dev/**/*.coffee").pipe coffee()
    )
  .pipe concat 'all.js'
  .pipe gulp.dest "build"

Answer 2

我将 Patrick J.S. 的回答标记为 "Correct" 因为实际上，这正是我需要做的。

也就是说，"event-stream" 不是我最终选择的，只是因为我需要保留我的文件依赖结构，而 event-stream 的 merge() 方法可以不是保护者命令，也没有选项。

相反，我选择了一个名为 streamqueue 的包，它确实保留了 glob 的顺序。可能更慢，但不幸的是，订单在我的应用程序中很重要。以后我会尽量模块化。

Answer 3

我用 gulp-add-src 来做到这一点。

var gulp = require('gulp'),
    coffee = require('gulp-coffee'),
    concat = require('gulp-concat'),
    addsrc = require('gulp-add-src');

// Scripts
gulp.task('coffee', function () {
  return gulp.src('src/coffee/**/*.coffee')
    .pipe(coffee())
    .pipe(addsrc('src/coffee/lib/*.js'))
    .pipe(concat('compiled.js'))
    .pipe(gulp.dest('dist'));
});

结合咖啡和 js 开发 Gulp

combined coffee and js development with Gulp

javascript

coffeescript

gulp

gulp-concat