Gulp过滤器与SourceMaps

Question

我之前在这里有一个类似的问题，后来我进行了更多的研究，并找到了一种新的方法。

基本上，我想要将所有的.js和.coffee文件放在一个gulp.src()对象中，并根据扩展名执行相关任务。

最初使用的是gulp-if，但后来我更喜欢使用gulp-filter。目前遇到的问题是如何让它与gulp-sourcemaps一起工作。当前任务好像会覆盖其他任务——但我最终希望所有内容都被合并到一个文件中，在另一个文件中进行源映射，并且每个文件扩展名都运行其各自的任务。你会看到uglify任务被注释掉了；因为它一直在抱怨，但没有什么线索。当我让过滤器正常工作时，如果CoffeeScript出现错误，我注意到coffeescriptlint()会执行其工作，但我的监视命令仍在运行，但不会响应任何内容。

看起来我可能要使用gulp-extract-sourcemap之类的东西来提取每个源映射，但我不确定这是否是正确的方法。

通常我会将JS和CoffeeScript任务分开，但由于两者之间有太多的交错，所以使用一个简单的过滤器将它们组合在一起似乎是合理的——特别是当我试图为两者找到sourcemaps时。

我觉得我离成功很近了，所以任何指导都将不胜感激。如果您想启动它，可以包含当前的gulpfile.js和package.json。谢谢！

Gulpfile.js

// Load plugins
var gulp       = require('gulp'),
    jshint     = require('gulp-jshint'),
    coffee     = require('gulp-coffee'),
    changed    = require('gulp-changed'),
    coffeelint = require('gulp-coffeelint'),
    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'),
    gFilter     = require('gulp-filter');

gulp.task('scripts', function() {
  var jsBuildDir = 'assets/js/build/',
      jsFilter = gFilter('**/*.js'),
      coffeeFilter = gFilter('**/*.coffee');

    return gulp.src([
      'assets/js/src/_init.coffee',
      'assets/js/src/_init.js'
    ])
    .pipe(coffeeFilter)
      .pipe(coffeelint().on('error', gutil.log))
      .pipe(coffeelint.reporter())
      .pipe(sourcemaps.init())
        .pipe(coffee({bare: true}).on('error', gutil.log))
      .pipe(sourcemaps.write('../../maps'))
    .pipe(coffeeFilter.restore())
    .pipe(jsFilter)
      .pipe(jshint({
            'boss': true,
            'sub': true,
            'evil': true,
            'browser': true,
            'globals': {
              'module': false,
              'require': true
            }
         }),
         jshint.reporter('jshint-stylish'))
    .pipe(jsFilter.restore())
    .pipe(concat('scripts.min.js'))
    //.pipe(uglify())
    .pipe(filesize({
      title: 'Scripts:'
    }))
    .pipe(gulp.dest(jsBuildDir))
    .pipe(duration('building script files'))
    .pipe(notify({ message: 'Coffeescript task complete' }));
});

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

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

  gulp.watch(['assets/js/src/**/*.js', 'assets/js/src/**/*.coffee'], ['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);
  });

});

Package.json

{
  "devDependencies": {
    "gulp": "^3.8.8",
    "gulp-changed": "^1.0.0",
    "gulp-coffee": "^2.2.0",
    "gulp-coffeelint": "^0.4.0",
    "gulp-concat": "^2.4.0",
    "gulp-duration": "0.0.0",
    "gulp-filter": "^1.0.2",
    "gulp-jshint": "^1.8.4",
    "gulp-livereload": "^2.1.1",
    "gulp-notify": "^1.6.0",
    "gulp-size": "^1.1.0",
    "gulp-sourcemaps": "^1.2.2",
    "gulp-uglify": "^1.0.1",
    "gulp-util": "^3.0.1",
    "jshint-stylish": "^0.4.0"
  }
}

- Zach

---

我已经制作了一个npm模块，可以非常容易地完成这种操作，您只需编写一个yaml文件即可。希望它能有所帮助: https://github.com/Stnaire/gulp-yaml-packages。在npm上：https://www.npmjs.com/package/gulp-yaml-packages。 - Stnaire

Answer 1

我猜你将 sourcemaps.init() 和 sourcemaps.write() 包裹在了管道的错误位置。我已经把命令放在了我认为正确的位置，请参见下面。

我也使用了 gulp-filter 很多次。但是，我尽量保持简单，以免使事情过于复杂。我发现 run-sequence 非常有帮助。（还可以查看我的一些 gulpfiles，这里 和 这里。）

对于你的情况，我会像这样处理：

var runSequence = require('run-sequence');
// ...

gulp.task('scripts', function (done) {
  runSequence('lint', 'build', done);
});

gulp.task('lint', function (done) {
  runSequence('lint-coffee', 'lint-js', done);
});

gulp.task('lint-coffee', function () {
  // Just lint your coffee files here...
});

gulp.task('lint-js', function () {
  // Just lint your js files here...
});

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

  return gulp.src([
    'assets/js/src/_init.coffee',
    'assets/js/src/_init.js'
  ])
  .pipe(coffeeFilter)
    .pipe(coffee({bare: true}).on('error', gutil.log))
  .pipe(coffeeFilter.restore())
  .pipe(sourcemaps.init())
    .pipe(concat('scripts.min.js'))
    .pipe(uglify())
  .pipe(sourcemaps.write('../../maps'))
  .pipe(gulp.dest(jsBuildDir));

});

- analog-nico