用SourceMaps实现的Gulp滤波器

Question

我有一个类似的问题，here已经合并到我的部分更多的研究和一种新的工作方式。

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

从gulp-if开始的东西变成了我使用gulp-filter，老实说，我更喜欢它。我现在遇到的问题是让这一切都能与gulp-sourcemaps一起工作。当前任务似乎覆盖了另一个任务--但我最终希望将所有内容连接到一个文件中，将源映射到另一个文件中，并让每个文件扩展名运行各自的任务。你会看到uglify任务被注释掉了；因为这就是一直对我大喊大叫的东西；没有一大堆东西可以去掉。当我让过滤器工作并且出现CoffeeScript错误时，我注意到coffeescriptlint()可以执行它的工作，但是当我的watch命令仍在运行时，不会响应任何东西。

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

通常，我会将JS和Coffeescript任务分开，但是我有太多的东西混合在这两个任务之间，以至于用一个简单的过滤器将它们放在一起似乎是合乎逻辑的--特别是在我试图找出这两个任务的源地图的时候。

我觉得这个已经很接近了，所以在正确的方向上进行的任何微调都会非常感谢。包含了current 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"
  }
}

Answer 1

我猜你把sourcemaps.init()和sourcemaps.write()包在了错误的管道部分。我把命令放在我认为它们属于它们的地方。见下文。

我也用过很多次gulp-filter。然而，我将它保持在最低限度，以避免使事情过于复杂。我发现run-sequence非常有用。(还可以查看我的一些Also文件here和here。)

我会这样处理你的场景：

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));

});