gulp - Gulp + 源映射（多个输出文件）

Question

我刚开始玩gulp，它非常快速且易于使用，但它似乎有一个严重的缺陷：当一个任务需要输出多种类型的文件时，你会怎么做？

例如，gulp-less表示它甚至不支持该sourceMapFilename选项。我不希望我的源映射嵌入到我的 CSS 文件中。我被圈套了吗？我应该回到使用 Grunt，还是有办法解决这个问题？

Answer 1

This task will take multiple files, do stuff to them, and output them along with source maps.

It will include the source code within the maps files by default, so you don't have to distribute the source code files too. This can be turned off by setting the includeContent option to false. See the gulp-sourcemaps NPM page for more source map options.

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"

The src directory:

first.scss
second.scss

The result directory after running the test-multiple task:

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

Answer 2

在文档中，它向您展示了如何拥有多个输出文件：

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

Answer 3

Gulp 支持多个输出文件。请阅读文档。

例子：

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

这将读入一堆 JS 文件，将它们缩小并输出到 dist 文件夹。

至于gulpless的问题。您可以评论相关票证。