gulp不编译子文件夹中的SCSS

Question

文件夹结构如下:

theme
assets
build
css
style.css
src
theme 
buttons.scss
style.scss
components
hero
hero.html
hero.scss
index.html

组件(即hero.scss)的src、theme和scss文件的任何更改都应编译为style.css。

我的theme文件编译正确，但我的componentscss文件不出现在style.css.

相反，当我运行gulp css时，一个单独的css文件出现在build文件夹下，即

build
css
style.css
hero.css

我怎样才能让它把所有东西编译成style.css?

gulpfile.js

const assetsSRC     = 'assets/src/',
assetsDST     = 'assets/build/',
components    = 'components/';
const gulp          = require('gulp'),
sass          = require('gulp-sass')(require('sass')),
sourcemaps    = require('gulp-sourcemaps'),
fs            = require('fs'),
path          = require('path'),
merge         = require('merge-stream'),
postcss       = require('gulp-postcss'),
autoprefixer  = require('gulp-autoprefixer'),
plumber       = require('gulp-plumber'),
concat        = require('gulp-concat'),
uglify        = require('gulp-uglify'),
strip         = require('gulp-strip-comments');
const componentCSS    = components + '**/*.scss',
componentJS     = components + '**/*.js',
globalCSS       = assetsSRC + 'scss/style.scss';
configCSS       = assetsSRC + 'scss/config/**.scss';
themeCSS        = assetsSRC + 'scss/theme/**.scss';
globalJS        = assetsSRC + 'js/*.js';
libJS           = assetsSRC + 'js/lib/*.js';
var sassOptions = {
errLogToConsole: true,
outputStyle: 'compressed'
};
function getFolders(dir) {
return fs.readdirSync(dir).filter(function(file) {
return fs.statSync(path.join(dir, file)).isDirectory();
});
}

function css() {
var folders = getFolders(components);
var tasks = folders.map(function(folder) {
var src = path.join(components, folder);
var dst = path.join(assetsDST + 'css');
return gulp.src(path.join(src, '/**/*.scss'))
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(autoprefixer('last 2 versions'))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(dst));
});
return merge(tasks);
}

function mainCSS() {
var dst = path.join(assetsDST + 'css/');
return gulp.src(globalCSS, { allowEmpty: true })
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(autoprefixer('last 2 versions'))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(dst));
}

function libraryJS() {
var dst = path.join(assetsDST + 'JS/lib');
return gulp.src(libJS).pipe(gulp.dest(dst));
}

function watch() {
gulp.watch([globalCSS,configCSS,themeCSS, componentCSS],mainCSS);
}

exports.mainCSS = mainCSS;
exports.mainJS = mainJS;
exports.libraryJS = libraryJS;
exports.css = css;
exports.javascript = javascript;
exports.watch = watch;
const build = gulp.series(watch);
gulp.task('default', build);

编辑

尝试使用gulp-sass-glob:

function css() {
gulp.task('styles', function () {
var src = path(components);
return gulp
.src(src, '/**/*.scss')
.pipe(sassGlob())
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(autoprefixer('last 2 versions'))
.pipe(sourcemaps.write('.'))
.pipe(sass())
.pipe(gulp.dest(assetsDST + 'css'));
});
}

重新运行gulp watch(没有错误)。更改并保存hero.scss。然后进入style.css，找到从hero.scss编译的css-没有显示。scss未编译成style.css

编辑2

我有以下内容:

function css() {
var folders = getFolders(components);
var tasks = folders.map(function(folder) {
var src = path.join(components, folder);
var dst = path.join(assetsDST + 'css/');
return gulp.src(path.join(src, '**/*.scss'))
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(autoprefixer('last 2 versions'))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(dst));
});
return merge(tasks);
}

这是创建单独的css文件(而不是整理到style.css)。我想这个很接近，但不确定如何进行。

Answer 1

你试过gulp-sass-glob吗?

https://www.npmjs.com/package/gulp-sass-glob