Question

我一直尝试做的是创建一个scripts任务，该任务包含所有.coffee和.js个文件，并为每个文件执行所需操作：

咖啡文件应该通过coffee（），coffeelint（）和coffeelint.reporter（）运行
JS文件应该通过jshint（）
然后应该通过concat（），uglify（）运行所有文件，并最终将目标设置为最终构建文件。

我有一些.coffee和一些.js的原因是因为我正在使用具有JS文件的Bower组件，即使我想使用CoffeeScript初始化并创建我的自定义脚本。 / p>

我的第一次传递涉及gulp-if，它允许我将每个脚本文件放在一个gulp.src()声明中 - 通过适当的检查扩展（使用gulp-if）并进行操作必要的行动。奇怪的是，这并没有成功;一直没说，有一个流错误;说gulp-uglify（）存在问题，但我永远无法破译实际问题是什么 - 用我的gulp文件或gulp-if如果说这可能是一个特定插件如何构建的问题。那么，我然后虽然有两个不同的流，然后同时运行它们可以工作（看看到目前为止我有什么）但是然后我将留下两个完全独立的构建 - 我可以显然在事实上，但如果需要按特定顺序完成，我会留下难看的临时文件以及无法混合.coffee和.js个文件。

理想情况下，我希望能够在我想要的任何扩展名中混合我的src文件，根据扩展名调用必要的操作并传递给两个共享的其他项目。我很感激任何意见。谢谢！

到目前为止我所做的事情（如上所述）：

// Load plugins
var gulp              = require('gulp'),
    jshint            = require('gulp-jshint'),
    coffee            = require('gulp-coffee'),
    changed           = require('gulp-changed'),
    coffeelint        = require('gulp-coffeelint'),
    gulpif            = require('gulp-if'),
    uglify            = require('gulp-uglify'),
    sourcemaps        = require('gulp-sourcemaps'),
    notify            = require('gulp-notify'),
    concat            = require('gulp-concat'),
    filesize          = require('gulp-size'),
    livereload        = require('gulp-livereload'),
    duration          = require('gulp-duration'),
    gutil             = require('gulp-util'),
    merge = require('merge-stream'),
    es         = require('event-stream');

gulp.task('test', function() {
  var jsBuildDir = 'assets/js/build/';

  var coffeescript =
    gulp.src([
      'assets/js/src/_init.coffee'
    ])
    .pipe(coffee())
    .pipe(coffeelint())
    .pipe(coffeelint.reporter())
    .pipe(concat('coffee.js'))
    .pipe(uglify())
    .pipe(filesize({
      title: 'CoffeeScript:'
    }))
    .pipe(gulp.dest(jsBuildDir))
    .pipe(duration('building coffeescript files'))
    .pipe(notify({ message: 'Coffeescript task complete' }));

  var js =
    gulp.src([
      'assets/js/src/_init.js'
    ])
    .pipe(jshint({
          'boss': true,
          'sub': true,
          'evil': true,
          'browser': true,
          'globals': {
            'module': false,
            'require': true
          }
       }),
      jshint.reporter('jshint-stylish'))
    .pipe(concat('js.js'))
    .pipe(uglify())
    .pipe(gulp.dest(jsBuildDir))
    .pipe(filesize({
      title: 'Main Scripts:'
    }))
    .pipe(duration('building main JS files'))
    .pipe(notify({ message: 'Main scripts task complete' }));

    es.concat(cofeescript, js);

});

// Default task
gulp.task('default', ['scripts']);

// Watch
gulp.task('watch', function() {

  gulp.watch(['assets/js/src/**/*.js', 'assets/js/src/**/*.coffee'], ['hint-n-lint', 'scripts']);

  // Create LiveReload server
  var server = livereload();

  // Watch files in patterns below, reload on change
  gulp.watch(['assets/js/build/*']).on('change', function(file) {
    server.changed(file.path);
  });

});

Answer 1

我会在2个任务行中执行此操作：

处理咖啡文件（例如：将它们转换为javascript）
处理将在开始之前等待咖啡任务继续的javascript文件

我的gulpfile.js将是：

var coffee_files = ['assets/js/src/*.coffee']
var js_files = ['assets/js/src/*.js']

gulp.task('coffee', function() {
    //note the return is very important here
    return gulp.src(coffee_files)
        .pipe(coffee()) //do your pipes
        //dest to the same folder assuming those are now js files
        .pipe(gulp.dest('assets/js/src')) 
})

gulp.task('javascript', ['coffee'], function() {
    return gulp.src(js_files)
        .pipe(jshint())
        .pipe(minify())
        .pipe(gulp.dest('assets/js/build'))
})

/**
* Now, `gulp` command will first process coffee files, transform them to javascript
* then javascript is executed and minifies stuff to your destination folder
*/
gulp.task('default', ['javascript'])

/**
* `gulp coffee` will only process coffee files
* `gulp javascript` will only process javascript files
* Watching files can be done like this:
*/
gulp.task('watch', function() {
    gulp.watch(coffee_files, ['javascript'])
    gulp.watch(js_files, ['javascript'])
})

Gulp：同一任务中的不同管道集合（CoffeeScript和JavaScript）

1 个答案: