Gulp Filter with SourceMaps

问题

I had a similar question here that has merged into a bit more research on my part and a new way this could work.

Basically I'm trying to have all of my .js and .coffee files within one gulp.src() object and based on the extension, do relevant tasks.

What started off with gulp-if has turned into me using gulp-filter which I prefer honestly. The catch I'm running into right now is getting this all to work with gulp-sourcemaps. The current task seems to override the other -- but I'd ultimately like everything to be concatenated in one file, source-mapped in another and have each file extension run its respective tasks. You'll see the uglify task is commented out; as that's what keeps yelling at me; without a whole bunch to go off of. When I do get the filters to work and I have a CoffeeScript error, I noticed that coffeescriptlint() will do its job, but then my watch command; while still running, doesn't respond to anything.

It seems like I might be going down the path of extracting each sourcemap using something like gulp-extract-sourcemap, but am not sure if that's the right way to go.

Normally I'd separate out the JS and Coffeescript task, but I have so many things co-mingling between the two that bringing them together with a simple filter seemed logical -- especially as I'm trying to figure out the sourcemaps for both.

I feel like this one is pretty close, so any nudges in the right direction would be greatly appreciated. Included current gulpfile.js and package.json if you want to spin it up. Thanks!

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"
  }
}

回答1:

I guess you wrapped the sourcemaps.init() and sourcemaps.write() around the wrong section of your pipe. I put the commands where I assume they belong. See below.

I used gulp-filter quite a few times as well. However, I kept it to a minimum to not overcomplicate things. I found run-sequence very helpful. (Also check out some of my gulpfiles here and here.)

Your scenario I would approach like this:

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

});

来源：https://stackoverflow.com/questions/26045370/gulp-filter-with-sourcemaps