如何使用Gulp编译不同目录下的SASS个文件?
How to compile SASS files in different directories using Gulp?
我正在使用 gulp-ruby-sass 来编译我的 js 和 sass.
我运行先进入这个错误 TypeError: Arguments to path.join must be strings
找到 ,这是因为我在使用带有 gulp-sass 的源地图,并且建议使用 [=43= 的答案]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: No such file or directory - public/_sources/sass/**/*.scss
然后我注意到在答案中我发现作者写道地球仪 **
还不受支持:
另外请记住,在撰写本文时,使用 gulp-ruby-sass 1.0.0-alpha 时,还不支持 glob。
我做了更多的挖掘,找到了一种使用数组来指定我的 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: No such file or directory
,它列出了我放入该数组的所有目录。
如何用gulp在多个目录中编译SASS?
SASS 源文件夹结构:
_sources
layouts
...scss
modules
...scss
vendors
...scss
main.scss
想通了!
不是 100%,仍然不确定为什么多路径阵列不起作用。
无论如何,我忘记了在我的主 web.scss 文件中我已经设置了多个导入语句:
@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,我只需要直接将那个 1 .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());
});
现在它可以工作了,因为它看到一个特定的文件来定位和编译
我在使用“*.scss”时也遇到了问题
在 git 文档 (https://github.com/sindresorhus/gulp-ruby-sass) 中,他们使用了这个语法:
gulp.task('sass', function(){
return sass('public/_sources/sass/',
{ style: 'compressed'})
.pipe(sourcemaps.init())
});
我测试过它,它可以编译文件夹中的所有文件。
以防万一有人遇到同样的问题
我正在使用 gulp-ruby-sass 来编译我的 js 和 sass.
我运行先进入这个错误 TypeError: Arguments to path.join must be strings
找到
接下来,我尝试使用以下语法编译所有 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: No such file or directory - public/_sources/sass/**/*.scss
然后我注意到在答案中我发现作者写道地球仪 **
还不受支持:
另外请记住,在撰写本文时,使用 gulp-ruby-sass 1.0.0-alpha 时,还不支持 glob。
我做了更多的挖掘,找到了一种使用数组来指定我的 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: No such file or directory
,它列出了我放入该数组的所有目录。
如何用gulp在多个目录中编译SASS?
SASS 源文件夹结构:
_sources
layouts
...scss
modules
...scss
vendors
...scss
main.scss
想通了!
不是 100%,仍然不确定为什么多路径阵列不起作用。
无论如何,我忘记了在我的主 web.scss 文件中我已经设置了多个导入语句:
@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,我只需要直接将那个 1 .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());
});
现在它可以工作了,因为它看到一个特定的文件来定位和编译
我在使用“*.scss”时也遇到了问题
在 git 文档 (https://github.com/sindresorhus/gulp-ruby-sass) 中,他们使用了这个语法:
gulp.task('sass', function(){
return sass('public/_sources/sass/',
{ style: 'compressed'})
.pipe(sourcemaps.init())
});
我测试过它,它可以编译文件夹中的所有文件。
以防万一有人遇到同样的问题