Gulp：同一任务中的不同管道集合（CoffeeScript和JavaScript） [英] Gulp: Different Pipe collections within same task (CoffeeScript and JavaScript)

问题描述

我一直在尝试创建一个脚本任务，所有 .coffee 和 .js 文件，并且每个文件都需要：

• 咖啡文件应该通过咖啡（），coffeelint（）和coffeelint.reporter（）


• JS文件应该通过jshint（）运行


• concat（），uglify（）并最终将目标设置为最终构建文件。

c> .coffee 和一些 .js 是因为我使用Bower组件有JS文件，即使我想要init和使用CoffeeScript创建自定义脚本。

我的第一次访问涉及 gulp-if ，它允许我将每个脚本文件放在一个 gulp.src（）声明中 - 通过一个合适的检查在扩展（使用gulp-if），并在那里做必要的操作。奇怪的是，这没有泛滥;保持失败说有流错误;说gulp-uglify（）有一个问题，但我永远不能解读实际的问题是 - 与我的gulp文件或gulp - 如果说如果一个特定的插件是如何构建的一个问题。所以，我然后虽然有两个不同的流，然后在同一时间运行它们可以工作（看到我到目前为止为止），但然后我会留下两个完全独立的生成 - 我可以明显连接事实，但是我留下了丑陋的临时文件和无法混合在 .coffee 和 .js 文件if他们需要以一定的顺序。

理想情况下，我想能够混合我的src文件在任何扩展名，我想要的，调用必要的操作，取决于扩展和传递到两个共享的其他项目。我会欣赏任何输入。非常感谢！

到目前为止（上面已经说过）：

  //加载插件
 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 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 b $ b .pipe（coffeelint.reporter（））
 .pipe（concat（'coffee.js'））
 .pipe（uglify（））
 .pipe（filesize b $ b 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）; 
 
}）; 
 
 //默认任务
 gulp.task（'default'，['scripts']）; 
 
 //观看
 gulp.task（'watch'，function（）{
 
 gulp.watch（['assets / js / src / ** / * .js'，'assets / js / src / ** / *。coffee']，['hint-n-lint'，'scripts']）; 
 
 //创建LiveReload服务器
 var server = livereload（）; 
 
 //以下面的模式观察文件，在更改时重新加载$ ​​b $ b gulp.watch（['assets / js / build / *']）。 on（'change'，function（file）{
 server.changed（file.path）; 
}）; 
 
}）; 
  

解决方案

/ p>

1. 处理咖啡文件（例如：将其转换为javascript）


2. 处理将等待的文件




我的 gulpfile.js 将是：

  var coffee_files = ['assets / js / src / *。coffee'] 
 var js_files = ['assets /js/src/*.js'] 
 
 gulp.task（'coffee'，function（）{
 //注意这里的返回非常重要
 return gulp。 src（coffee_files）
 .pipe（coffee（））//你的管道
 // dest到同一个文件夹，假设现在是js文件
 .pipe（gulp.dest / js / src'））
}）
 
 gulp.task（'javascript'，['coffee']，function（）{
 return gulp.src（js_files） 
 .pipe（jshint（））
 .pipe（minify（））
 .pipe（gulp.dest（'assets / js / build'））
}）
 
 / ** 
 *现在，`gulp`命令将首先处理咖啡文件，将它们转换为javascript 
 *，然后执行javascript并将内容缩减到目标文件夹
 * / 
 gulp.task（'default'，['javascript']）
 
 / ** 
 *`gulp coffee`只会处理咖啡文件
 * `gulp javascript`将只处理javascript文件
 *观看文件可以这样做：
 * / 
 gulp.task（'watch'，function（）{
 gulp。手表（coffee_files，['javascript']）
 gulp.watch（js_files，['javascript']）
}）
  
What I've been attempting to do is create one scripts task that takes all .coffee and .js files and does what's needed for each:


Coffee files should be run through coffee(), coffeelint() and coffeelint.reporter()
JS files should be run through jshint()
All files should then be run through concat(), uglify() and ultimately setting a destination as a final build file.


The reason I have some .coffee and some .js is because I'm using Bower components that have JS files, even though I'd like to init and create my custom scripts with CoffeeScript.

My first pass at this involved gulp-if which allowed me to have every script file in one gulp.src() declaration -- piping through to a the appopriate check on the extension (using gulp-if) and doing the necessary actions there. Oddly enough, that didn't pan out; kept failing saying there was a stream error; saying there was an issue with gulp-uglify(), but I could never decipher what the actual issue was -- with my gulp file or with what gulp-if said could be an issue with how a specific plugin was built. So, I then though having two different streams and then running them at the same time could work (see what I had for this so far) but then I'd be left with two completely separate builds -- which I could obviously concat after the fact, but I'm left with ugly temp files and the inability to mix in .coffee and .js files if they need to be done in a certain order.

Ideally I'd like to be able to mix my src files within whatever extension I want, call the necessary actions depending on the extension and pass through to the other items that both share. I'd appreciate any input. Thanks!

What I had so far (described above):
// 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);
  });

});

解决方案
I would do this in a 2 tasks row:

Process coffee files (eg: transform them to javascript)
Process javascript files that will wait for the coffee task to proceed before starting
My gulpfile.js would be:
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）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！