Gulp sass 正在吃 scss 文件而没有给出任何错误
Gulp sass is eating the scss file without giving any errors
几天前我开始使用 gulp,我不得不解决很多问题,非编译语言很难修复错误,而且它们的运行时间也很慢。
不幸的是,我发现的最后一个问题非常不同,它没有给出任何错误,但只是从流中吃掉了文件。
这里用较少的文字来概括问题是gulpfile.js的部分:
gulp.src([ folder.src + "scss/vendor/_bootstrap.scss" ], { allowEmpty: true })
.pipe(debug()) // file exists
.pipe(sourcemaps.init())
.pipe(debug()) // file exists
.pipe(sass().on('error', sass.logError)) // scss to css
.pipe(debug()) // file doesn't exist
.pipe(autoprefixer({
overrideBrowserslist: ["last 2 versions"]
}))
.pipe(debug())
.pipe(cleanCSS()) // minifies css
.pipe(rename({
// rename bootstrap.css to bootstrap.min.css
suffix: ".min"
}))
.pipe(sourcemaps.write("./")) // source maps for bootstrap.min.css
.pipe(gulp.dest(out));
前两个调试语句输出 gulp 管道流中有一个文件,而在 运行 管道上的 sass()
之后文件立即消失,没有注意到或错误。
[20:21:45] Starting 'css'...
[20:21:45] gulp-debug: src/main/resources/assets/scss/vendor/_bootstrap.scss
[20:21:45] gulp-debug: src/main/resources/assets/scss/vendor/_bootstrap.scss
[20:21:45] gulp-debug: 1 item
[20:21:45] gulp-debug: 1 item
[20:21:45] gulp-debug: 0 items
[20:21:45] gulp-debug: 0 items
[20:21:45] Finished 'css' after 169 ms
是不是很奇怪?我将如何解决这个问题。没有堆栈跟踪,没有错误,没有警告:(
实际上 sass 函数忽略了以下划线 (_
) 前缀的文件。可能是因为它们代表 sass.
的偏音
通过重命名管道流并使用简单的正则表达式解决了问题:
gulp.src([ folder.src + "scss/vendor/_bootstrap.scss" ], { allowEmpty: true })
// ...
.pipe(rename(function(opt) {
opt.basename = opt.basename.replace(/^_/, ''); // renames files starting with _
return opt;
}))
.pipe(sass())
// ...
几天前我开始使用 gulp,我不得不解决很多问题,非编译语言很难修复错误,而且它们的运行时间也很慢。
不幸的是,我发现的最后一个问题非常不同,它没有给出任何错误,但只是从流中吃掉了文件。
这里用较少的文字来概括问题是gulpfile.js的部分:
gulp.src([ folder.src + "scss/vendor/_bootstrap.scss" ], { allowEmpty: true })
.pipe(debug()) // file exists
.pipe(sourcemaps.init())
.pipe(debug()) // file exists
.pipe(sass().on('error', sass.logError)) // scss to css
.pipe(debug()) // file doesn't exist
.pipe(autoprefixer({
overrideBrowserslist: ["last 2 versions"]
}))
.pipe(debug())
.pipe(cleanCSS()) // minifies css
.pipe(rename({
// rename bootstrap.css to bootstrap.min.css
suffix: ".min"
}))
.pipe(sourcemaps.write("./")) // source maps for bootstrap.min.css
.pipe(gulp.dest(out));
前两个调试语句输出 gulp 管道流中有一个文件,而在 运行 管道上的 sass()
之后文件立即消失,没有注意到或错误。
[20:21:45] Starting 'css'...
[20:21:45] gulp-debug: src/main/resources/assets/scss/vendor/_bootstrap.scss
[20:21:45] gulp-debug: src/main/resources/assets/scss/vendor/_bootstrap.scss
[20:21:45] gulp-debug: 1 item
[20:21:45] gulp-debug: 1 item
[20:21:45] gulp-debug: 0 items
[20:21:45] gulp-debug: 0 items
[20:21:45] Finished 'css' after 169 ms
是不是很奇怪?我将如何解决这个问题。没有堆栈跟踪,没有错误,没有警告:(
实际上 sass 函数忽略了以下划线 (_
) 前缀的文件。可能是因为它们代表 sass.
通过重命名管道流并使用简单的正则表达式解决了问题:
gulp.src([ folder.src + "scss/vendor/_bootstrap.scss" ], { allowEmpty: true })
// ...
.pipe(rename(function(opt) {
opt.basename = opt.basename.replace(/^_/, ''); // renames files starting with _
return opt;
}))
.pipe(sass())
// ...