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

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

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

3 ответа

Решение

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

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

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

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

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

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

Пример:

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

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

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

Другие вопросы по тегам