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非常有帮助。（另请查看我的一些gulp文件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));

});

使用SourceMaps的Gulp过滤器

1 个答案: