Gulp + исходные карты (несколько выходных файлов)

Я только начал играть с gulp, и он очень быстрый и простой в использовании, но, похоже, имеет критический недостаток: что делать вы делаете, когда задача должна выводить более одного типа файлов?

Например, gulp-less говорит, что он даже не поддерживает параметр sourceMapFilename. Я не хочу, чтобы моя исходная карта была встроена в мой CSS файл. Я обручен? Должен ли я просто вернуться к использованию Grunt, или есть способ справиться с этим?

Ответ 1

Эта задача займет несколько файлов, сделает для них материал и выведет их вместе с исходными картами.

Он будет включать исходный код в файлы карт по умолчанию, поэтому вам также не нужно распространять файлы исходного кода. Это можно отключить, установив для параметра includeContent значение false. См. gulp -sourcemaps NPM page для получения дополнительных параметров исходной карты.

gulpfile.js:

var gulp = require("gulp");
var plugins = require("gulp-load-plugins")();

gulp.task("test-multiple", function() {
    return gulp.src("src/*.scss")
            .pipe(plugins.sourcemaps.init())
            .pipe(plugins.sass())
            .pipe(plugins.autoprefixer())
            .pipe(plugins.sourcemaps.write("./"))
            .pipe(gulp.dest("result"));
});

package.json

"gulp": "~3.8.6",
"gulp-load-plugins": "~0.5.3",
"gulp-sass": "~0.7.2",
"gulp-autoprefixer": "~0.0.8",
"gulp-sourcemaps": "~1.1.0"

Каталог src:

first.scss
second.scss

Каталог result после запуска задачи test-multiple:

first.css
first.css.map  // includes first.scss
second.css
second.css.map  // includes second.scss

Ответ 2

В docs он показывает вам, как иметь несколько выходных файлов:

gulp.src('./client/templates/*.jade')  
  .pipe(jade())
  .pipe(gulp.dest('./build/templates'))
  .pipe(minify())`  
  .pipe(gulp.dest('./build/minified_templates'));

Ответ 3

Gulp отлично поддерживает несколько выходных файлов. Пожалуйста, прочитайте документы.

Пример:

gulp.task('scripts', function () {
  return gulp.src('app/*js')
    .pipe(uglify())
    .pipe(gulp.dest('dist'));
});

Это будет прочитано в кучке JS файлов, уменьшит их и выведет их в папку dist.

Что касается проблемы без gulp. Вы можете прокомментировать соответствующий билет.