Gulp +源映射(多个输出文件)

mpe*_*pen 11 gulp gulp-less

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

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

Ken*_*ist 10

此任务将获取多个文件,对它们执行操作,并将它们与源映射一起输出.

默认情况下,它将在源文件中包含源代码,因此您也不必分发源代码文件.可以通过将includeContent选项设置为关闭此项false.有关更多源映射选项,请参阅gulp-sourcemaps NPM页面.

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"));
});
Run Code Online (Sandbox Code Playgroud)

的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"
Run Code Online (Sandbox Code Playgroud)

src目录:

first.scss
second.scss
Run Code Online (Sandbox Code Playgroud)

result运行test-multiple任务后的目录:

first.css
first.css.map  // includes first.scss
second.css
second.css.map  // includes second.scss
Run Code Online (Sandbox Code Playgroud)