Как создать задачу Gulp для правильной настройки мини-данных и исходных карт в .min-файл

Question

Я пытаюсь создать задачу gulp для сжатия и создания исходной карты в одно и то же время. Сжатие и создание исходной карты работают, но я не могу понять, как правильно получить выходные имена при использовании плагина gulp-rename.

Для упрощения: У меня есть source.js файл в папке /src, и я хочу, чтобы создать как файл .min.js и .js.map в папке /dist.

Вот что у меня есть:

gulp.task('scripts', function() { 

// compressed 
gulp.src(['src/*.js']) 
    .pipe(sourcemaps.init({ includeContent: false, sourceRoot: './' }))   
    .pipe(uglify())   
    .pipe(sourcemaps.write('./', { 
     sourceMappingURL: function(file) { 
      return file.relative + '.map'; 
     } 
    })) 
    .pipe(rename({ suffix: '.min' })) 
    .pipe(gulp.dest('./dist')); 
}); 

Это работает в том, что он создает следующее /dist:

• jquery-resizable.min.js (все хорошо - сжимаются, карта ссылок и правильное название)
• jquery-resizable.js.min.map (карта есть, но имя плохое - должно быть jquery-resizable.js.map)

Я пробовал массу вариаций, но я не могу понять, как получить карту и сжатие для сборки и получить правильные имена файлов.

Я также попытался переименовать файлы на отдельном шаге, но из-за асинхронного характера глотки это не работает надежно - иногда это срабатывает, иногда это не так, что это тоже не похоже на вариант.

Что мне не хватает?

Я не женат на создание исходных карт именно таким образом, но каков правильный способ сделать это? Все примеры, которые я видел, похоже, делают то, что я делаю выше, кроме, они не переименовывают выходной файл в min.js, который кажется важной частью процесса.

Answer 1

Я бы предложил использовать gulp-filter, чтобы удалить файлы .map из трубопровода во время переименования.

var jsFilter = require('gulp-filter')([ '*.js', ], { restore: true, }); 
gulp.src(['src/*.js']) 
    .pipe(sourcemaps.init({ includeContent: false, sourceRoot: './' }))   
    .pipe(uglify())   
    .pipe(sourcemaps.write('./', { 
     sourceMappingURL: function(file) { 
      return file.relative + '.map'; 
     } 
    })) 
    .pipe(jsFilter) 
    .pipe(rename({ suffix: '.min' })) 
    .pipe(jsFilter.restore) 
    .pipe(gulp.dest('./dist')); 

Это говорит о том, что наш рабочий процесс переименовывается перед исходными картами, и он правильно генерирует карты.

gulp.src(['src/*.js']) 
    .pipe(sourcemaps.init())   
    .pipe(uglify())   
    .pipe(rename({ suffix: '.min', })) 
    .pipe(sourcemaps.write('.')) 
    .pipe(gulp.dest('./dist')); 

Answer 2

Ответы @bdukes в основном решили мою проблему и привели меня к правильному решению. Я отправляю фактическое решение, которое сработало для меня в конкретном случае, о котором я говорил выше, который основан на его ответе.

Одна из моих проблем связана с невозможностью генерировать исходные исходные файлы вместе со сжатыми файлами и файлами карт. Я был в состоянии заставить его работать с дополнительным шагом явно перемещение файлов в отдельном .pipe(gulp.dest('./dist')) операции:

gulp.task('scripts', function() { 

    // compress and source map 
    gulp.src(['src/*.js']) 
     .pipe(sourcemaps.init({ includeContent: false, sourceRoot: './' })) 
     .pipe(uglify()) 
     .pipe(sourcemaps.write('.', { 
      sourceMappingURL: function(file) { 
       return file.relative + '.map'; 
      } 
     }))   
     .pipe(jsFilter) 
     .pipe(rename({ suffix: '.min' })) 
     .pipe(jsFilter.restore) 
     .pipe(gulp.dest('./')); 

    // also copy source files 
    gulp.src(['src/*.js']) 
     .pipe(gulp.dest('./dist')); 
}); 

Мораль - не overthink вещи - я пытался получить все, чтобы работать в одном операция.