Question

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

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

Answer 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

Answer 2

在docs中，它显示了如何拥有多个输出文件：

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文件夹。

关于无堵塞的问题。您可以对相关ticket进行评论。

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

3 个答案: