Node.js 如何获得gulp更好的sass继承来编译所有文件
我有3个文件夹,其中SCSS文件的前缀为x。我想编译所有文件并保存输出(如果有) 现在,我必须在基本文件夹中创建一个文件,@从特定文件夹导入相应的文件: 元素.Footer.scss: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(
@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;