Node.js 如何获得gulp更好的sass继承来编译所有文件

Node.js 如何获得gulp更好的sass继承来编译所有文件,node.js,sass,gulp,gulp-sass,Node.js,Sass,Gulp,Gulp Sass,我有3个文件夹,其中SCSS文件的前缀为x。我想编译所有文件并保存输出(如果有) 现在,我必须在基本文件夹中创建一个文件,@从特定文件夹导入相应的文件: 元素.Footer.scss: @import "Element\\Footer"; 'use strict'; const { src, dest, watch, series, parallel, fiber } = require("gulp"); const rename = require(

我有3个文件夹,其中SCSS文件的前缀为x。我想编译所有文件并保存输出(如果有)

现在,我必须在基本文件夹中创建一个文件,@从特定文件夹导入相应的文件:

元素.Footer.scss

@import "Element\\Footer";
'use strict';

const { src, dest, watch, series, parallel, fiber } = require("gulp");
const rename = require("gulp-rename");
const changed = require("gulp-changed");
const cached = require('gulp-cached');
const sourceMaps = require("gulp-sourcemaps");

const targets = {
    STYLE: "style",
    SCRIPT: "script"
};

const outputs = {
    NESTED: "nested",
    COMPRESSED: "compressed",
    COMPACT: "compact",
    EXPANDED: "expanded",
    CONCAT: "concat"
};

const changedTask = (target, sourceMap = false) => {
    const destPath = () => sourceMap ? "../" : "./_Build/" + target.toUpperCase() + (sourceMap ? "_MAPS/" : "/");

    const tasks = (output) => {
        const gIf = require('gulp-if');
        const filter = require('gulp-filter');
        const sourceMapCondition = () => {(output !== outputs.COMPRESSED && !sourceMap)};

        if (output !== outputs.CONCAT) {
            if (target === targets.STYLE) {
                const sass = require("gulp-sass");
                const sassInherit = require("gulp-better-sass-inheritance");

                return src("./STYLE/**/*.scss")
                    .pipe(changed(destPath(target)))
                        .pipe(gIf(global.isWatching, cached("sass")))
                    .pipe(sassInherit({base: "./STYLE/"}))
                        .pipe(filter(function (file) {
                            return !/\/_/.test(file.path) || !/^_/.test(file.relative);
                        }))
                        .pipe(gIf(sourceMapCondition, sourceMaps.init()))
                    .pipe(sass({ fiber: fiber, outputStyle: output }).on("error", sass.logError))
                        .pipe(gIf(sourceMapCondition, sourceMaps.mapSources((sourcePath, file) => {
                            return "../" + target.toUpperCase() + "/" + sourcePath;
                        })))
                    .pipe(rename((path) => {
                        var basename = path.basename;

                        if (path.dirname !== ".") {
                            if (basename.charAt(0) === "_") {
                                basename = basename.slice(1);
                            }

                            basename = path.dirname + "." + basename.charAt(0).toUpperCase() + basename.slice(1);
                        }

                        path.basename = basename;
                        path.dirname = "./";
                    }))
                    .pipe(dest(destPath(target)));
            }
            else if (target === targets.SCRIPT) {

            }
        }
        else {
            if (target === targets.STYLE) {

            }
            else if(target === targets.SCRIPT) {

            }
        }
    };

    return tasks(outputs.NESTED);
};

const watcher = () => {
    global.isWatching = true;
    watch("./STYLE/**/*.scss", changedStyle);
    watch("./SCRIPT/**/*.js");
};

const changedStyle = () => {
    return changedTask(targets.STYLE)
};

const changedScript = () => {
    return changedTask(targets.SCRIPT);
}

exports.default = watcher;
exports.changeStyle = changedStyle;
exports.changeScript = changedScript;
文件和文件夹:

基地

-元素

--\u Footer.scss

--_Table.scss

-布局

--_Other.scss

--Element.Footer.scss

创建一个文件只是为了导入另一个文件似乎有点“错误”。 有更好的方法吗

gulpfile.js

@import "Element\\Footer";
'use strict';

const { src, dest, watch, series, parallel, fiber } = require("gulp");
const rename = require("gulp-rename");
const changed = require("gulp-changed");
const cached = require('gulp-cached');
const sourceMaps = require("gulp-sourcemaps");

const targets = {
    STYLE: "style",
    SCRIPT: "script"
};

const outputs = {
    NESTED: "nested",
    COMPRESSED: "compressed",
    COMPACT: "compact",
    EXPANDED: "expanded",
    CONCAT: "concat"
};

const changedTask = (target, sourceMap = false) => {
    const destPath = () => sourceMap ? "../" : "./_Build/" + target.toUpperCase() + (sourceMap ? "_MAPS/" : "/");

    const tasks = (output) => {
        const gIf = require('gulp-if');
        const filter = require('gulp-filter');
        const sourceMapCondition = () => {(output !== outputs.COMPRESSED && !sourceMap)};

        if (output !== outputs.CONCAT) {
            if (target === targets.STYLE) {
                const sass = require("gulp-sass");
                const sassInherit = require("gulp-better-sass-inheritance");

                return src("./STYLE/**/*.scss")
                    .pipe(changed(destPath(target)))
                        .pipe(gIf(global.isWatching, cached("sass")))
                    .pipe(sassInherit({base: "./STYLE/"}))
                        .pipe(filter(function (file) {
                            return !/\/_/.test(file.path) || !/^_/.test(file.relative);
                        }))
                        .pipe(gIf(sourceMapCondition, sourceMaps.init()))
                    .pipe(sass({ fiber: fiber, outputStyle: output }).on("error", sass.logError))
                        .pipe(gIf(sourceMapCondition, sourceMaps.mapSources((sourcePath, file) => {
                            return "../" + target.toUpperCase() + "/" + sourcePath;
                        })))
                    .pipe(rename((path) => {
                        var basename = path.basename;

                        if (path.dirname !== ".") {
                            if (basename.charAt(0) === "_") {
                                basename = basename.slice(1);
                            }

                            basename = path.dirname + "." + basename.charAt(0).toUpperCase() + basename.slice(1);
                        }

                        path.basename = basename;
                        path.dirname = "./";
                    }))
                    .pipe(dest(destPath(target)));
            }
            else if (target === targets.SCRIPT) {

            }
        }
        else {
            if (target === targets.STYLE) {

            }
            else if(target === targets.SCRIPT) {

            }
        }
    };

    return tasks(outputs.NESTED);
};

const watcher = () => {
    global.isWatching = true;
    watch("./STYLE/**/*.scss", changedStyle);
    watch("./SCRIPT/**/*.js");
};

const changedStyle = () => {
    return changedTask(targets.STYLE)
};

const changedScript = () => {
    return changedTask(targets.SCRIPT);
}

exports.default = watcher;
exports.changeStyle = changedStyle;
exports.changeScript = changedScript;