javascript - 使用 SourceMaps 的 Gulp 过滤器

Question

我有一个类似的问题here这已经融入了我的更多研究和一种新的工作方式。

基本上，我试图将我所有的 .js 和 .coffee 文件放在一个 gulp.src() 对象中，并基于在分机上，做相关的任务。

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

似乎我可能正在使用类似 gulp-extract-sourcemap 的方法来提取每个源 map 。 ，但我不确定这是否是正确的方法。

通常我会将 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);
  });

});

包.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 非常有用。 (另请查看我的一些 gulpfiles 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));

});