Gulp過濾器與SourceMaps

Question

我有一個類似的問題here已合併到我的一個更多的研究和一個新的方式，這可以工作。

基本上我試圖讓我所有的.js和.coffee文件在一個gulp.src()對象和擴展名的基礎上做相關的任務。

從gulp-if開始的事情已經變成了我使用gulp-filter，我真的很喜歡。我現在遇到的問題是讓這一切與gulp-sourcemaps一起工作。目前的任務似乎覆蓋了另一個 - 但我最終希望將所有內容連接在一個文件中，在另一個文件中進行源映射，並讓每個文件擴展名執行其各自的任務。你會看到uglify任務已被註釋掉;因爲這是一直在咆哮着我;沒有一大堆人走了。當我得到過濾器工作，我有一個CoffeeScript錯誤，我注意到coffeescriptlint()將完成它的工作，但然後我的手錶命令;雖然仍在運行，但對任何事情都沒有反應。

看起來好像我可能會沿着使用類似gulp-extract-sourcemap這樣的東西來提取每個源圖的路徑，但我不確定這是否是正確的路要走。

通常我會分離出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" 
    } 
} 

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

});