Javascript 使用SourceMaps的Gulp过滤器

我有一个类似的问题，这已经融入到我的研究中，并且有了一种新的工作方式

基本上，我正在尝试将所有

.js

和

.coffee

文件放在一个

gulp.src（）

对象中，并根据扩展名执行相关任务

从一开始我就开始使用我喜欢的东西。我现在遇到的问题是如何处理这些问题。当前任务似乎覆盖了另一个任务——但我最终希望所有内容都连接到一个文件中，源代码映射到另一个文件中，并让每个文件扩展名运行各自的任务。你会看到丑陋的任务被注释掉了；因为这就是一直对我大喊大叫的原因；没有一大堆东西可供选择。当我确实让过滤器工作时，出现了CoffeeScript错误，我注意到，

coffeescriptlint（）

将完成它的工作，但是我的watch命令；仍在运行时，对任何内容都没有响应

看起来我可能正在使用类似的方法提取每个源地图，但不确定这是否是正确的方法

通常我会将JS和Coffeescript任务分开，但我有太多的东西混合在一起，所以用一个简单的过滤器将它们组合在一起似乎是合乎逻辑的——特别是当我试图找出两者的源映射时

我觉得这一次非常接近，所以任何朝着正确方向的轻推都将不胜感激。如果您想加速，则包括当前的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"
  }
}

---

我猜您将

sourcemaps.init（）

和

sourcemaps.write（）封装在管道的错误部分。我把命令放在我认为它们属于的地方。见下文

我也用了好几次
gulpfilter
。然而，我把它保持在最低限度，以避免事情过于复杂。我发现
运行序列
非常有用。（还可以查看我的一些Gulpfile和。）

您的场景我会这样处理：

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

});

我已经制作了一个npm模块，可以很容易地完成这类工作，您可以编写一个yaml文件，希望它能有所帮助：。关于npm:。