Question

我有3个文件夹，其中SCSS文件以_开头。我想编译所有文件并保存输出（如果有）。

现在，我必须在BASE文件夹中创建一个文件，该文件@会从特定文件夹中导入相应的文件：

Element.Footer.scss ：

@import "Element\\Footer";

文件和文件夹：

BASE

-元素

-_Footer.scss

-_Table.scss

-布局

-_Other.scss

-Element.Footer.scss

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

gulpfile.js ：

'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;

如何获得gulp-更好-sass-继承关系来编译所有文件

0 个答案: