Gulp 狼吞虎咽+；源映射（多个输出文件）

我刚刚开始使用它，它非常快速且易于使用，但它似乎有一个关键缺陷：当一个任务需要输出多种类型的文件时，您该怎么做

---

例如，表示它甚至不支持

sourceMapFilename

选项。我不希望我的源地图嵌入到我的CSS文件中。我被套住了吗？我应该继续使用Grunt，还是有办法解决这个问题？

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

例如：

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

这将读取一组JS文件，缩小它们并将它们输出到dist文件夹

至于喝得少的问题。您可以在中评论相关的。

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

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

---

此任务将获取多个文件，对其执行操作，并将其与源地图一起输出

默认情况下，它将在映射文件中包含源代码，因此您不必分发源代码文件。可通过将

includeContent

选项设置为

false

来关闭此功能。有关更多源映射选项，请参见

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"));
});

first.scss
second.scss

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

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

目录：

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"));
});

first.scss
second.scss

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

运行

测试多个

任务后的

结果

目录：

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"));
});

first.scss
second.scss

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

---

我确实看过那些文件了。它到底在哪里说的？另外，您的“相关”票据讨论了内联源代码映射，这正是我不想要的。如果您阅读文档，您会发现

dist

是一个文件夹：应该将其标记为正确

gulp.src

使用globbing匹配多个文件。任何文件创建、操作或删除都将输出到

gulp.dest

中指定的文件夹。因此，当uglify创建源映射文件时，它也会进入

gulp.dest

@Mark。如果要通过更多转换传递.js文件，则源映射文件可能也必须更新。如果您不想这样做，也可以使用。不过，这个答案应该是正确的。@JamesKyle这是我的问题；如果我认为这不符合我提出的要求，那么我就不认为它是正确的。这有点粗鲁，忽略了问题的意图。我很清楚

.dest

可以写出多个文件，但它没有说明如何处理需要生成不同类型文件的转换，这些文件可能需要单独处理。你误解了这个问题。我指的是单个任务何时需要输出两个或多个单独的文件。我知道我可以随时打电话给

.dest

；那没用。这与插件体系结构有关，而不是基本用法。明白了：）如果它在实践中有所不同，是否感兴趣？源代码映射在实践中非常有用。我相信还有许多其他场景，您可能希望从单个任务中输出两个或多个不同类型的文件；不能将它们拆分为单独的任务，否则每个任务都必须重新分析输入。也许能帮上忙。如果有部分.scss文件通过

@import

导入到主.scss文件中，这是否仍然有效？如果浏览器可以链接回那些导入的部分文件，我会很高兴。