我正在使用gulp-
ruby-sass编译我的js和sass.
我首先遇到了这个错误TypeError：path.join的参数必须是字符串
找到了this answer,这是因为我使用的是源代码和gulp-sass,建议使用gulp-ruby-sass.
接下来,我尝试使用以下语法编译所有SASS文件：
gulp.task('sass',function () {
return sass('public/_sources/sass/**/*.scss',{ style: 'compressed' })
.pipe(sourcemaps.init())
.pipe(concat('bitage_public.css'))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('public/_assets/css'))
.pipe(livereload());
});
哪个产生了这个错误：
gulp-ruby-sass stderr：Errno :: ENOENT：没有这样的文件或目录 – public / _sources / sass / ** / * .scss
然后我在答案中注意到我发现作者写道,尚未支持地球仪**：
另外请记住,在撰写本文时,使用gulp-ruby-sass 1.0.0-alpha时,还不支持globs.
我做了更多的挖掘,并找到了一种方法来使用数组来指定我的SASS文件的路径,所以我尝试了以下内容：
gulp.task('sass',function () {
return sass(['public/_sources/sass/*.scss','public/_sources/sass/layouts/*.scss','public/_sources/sass/modules/*.scss','public/_sources/sass/vendors/*.scss'],{ style: 'compressed' })
// return sass('public/_sources/sass/**/*.scss',{ style: 'compressed' })
.pipe(sourcemaps.init())
.pipe(concat('bitage_public.css'))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('public/_assets/css'))
.pipe(livereload());
});
但我仍然得到Errno :: ENOENT：没有这样的文件或目录,它列出了我放入该数组的所有目录.
如何使用gulp在多个目录中编译SASS？
SASS源文件夹结构：
_sources
layouts
...scss
modules
...scss
vendors
...scss
main.scss
解决方法
弄清楚了！
不是100％,仍然不确定为什么多路径数组不起作用.
无论如何,所以我忘了在我的主web.scss文件中我已经设置了多个import语句：
@import "vendors/normalize"; // normalize stylesheet @import "modules/reset"; // Reset stylesheet @import "modules/base"; // Load base files @import "modules/defaults"; // Defaults @import "modules/inputs"; // Inputs & Selects @import "modules/buttons"; // Buttons @import "modules/layout"; // Load Layouts @import "modules/svg"; // Load SVG @import "modules/queries"; // Media Queries
所以我实际上并不需要按照我尝试的方式尝试使用Gulp,我只需要直接定位该.scss文件.所以我在这做了：
// Compile public SASS
gulp.task('sass',function () {
return sass('public/_sources/sass/bitage_web.scss',{ style: 'compressed' })
.pipe(sourcemaps.init())
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('public/_assets/css'))
.pipe(livereload());
});
