我正在使用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()); });
现在它可以工作,因为它看到了一个特定的文件来定位和编译