gulp sass：将文件夹与文件继承合并答案

【问题标题】：gulp sass: merge folders with file inheritancegulp sass：将文件夹与文件继承合并
【发布时间】：2017-12-07 17:13:04
【问题描述】：

我有一个这样的文件夹结构（简化）：

|-project1
|--_file1.scss
|--_file2.scss
|--_file3.scss
|
|-project2
|--_file2.scss
|
|-css
|--project1.css
|--project2.css

我正在寻找一种方法来编译带有继承的 sass 文件。这背后的想法是，我有一个基础项目（project1），而项目 2 只包含那些需要更改的文件。

所以在编译时 gulp 应该渲染 2 个 css 文件：

project1.css 这仅包含 project1/scss/ 文件夹中的文件
project2.css 这应该包含项目 1 中的 file1 和 file3 以及项目 2 中的 file2。

这可能吗？需要哪些模块？

谢谢

【问题讨论】：

标签： css node.js sass gulp

【解决方案1】：

这里有一些对你有用的东西。我注意到您的项目文件夹中只有 partials，即 _file1.scss、_file2.scss 等。您必须至少有一个不是导入这些部分的部分文件让 sass 工作。

const gulp = require('gulp');
const fs = require('fs');
const path = require('path');

const filter = require('gulp-filter');
const sass = require('gulp-sass');
const concat = require('gulp-concat');
const addsrc = require('gulp-add-src');

// const glob = require("glob");

const sources = ['project1', 'project2', 'project3'];
    //  could glob your sourceFolders with something like
    // const sources = glob.sync("project*");
const filterSources = Object.keys(sources);

function isUnique(file, index) {

  console.log(path.basename(file.path));  // file1.scss, file2.scss, etc.  all from project1

  baseName = path.basename(file.path);
  folder = sources[index];  // project

  //  does that basename exist in thecurrent  project (sources[index] )
  return !fs.existsSync(folder + path.sep + baseName);
}

gulp.task('default', function () {

      //  loop through all the project folders
  filterSources.forEach(function (project, index) {

    const f = filter(function (file) {
      return isUnique(file, index);
    });

    //  always using project1 files as basis
    const stream = gulp.src('./project1/*.scss')

      //  filter out from the source stream (project1 files) any files that appear in the current project directory
      .pipe(f)

      //  add all files from the current project directory, i.e., project2, project3, etc.
      .pipe(addsrc.append('./' + sources[index] + '/*.scss'))

      .pipe(sass().on('error', sass.logError))

      //  give the concat the filename of the current project
      .pipe(concat(sources[index] + '.css'))

      .pipe(gulp.dest('css'));

    return stream;
  });

这适用于任意数量的项目文件夹，只需确保导入其他文件的非部分 scss 文件不是被过滤掉的文件。

但您似乎并不真正想要任何部分，因为您想concat每个项目中的所有文件，因此请从每个文件名中删除那些前导下划线。

【讨论】：

谢谢。你肯定把我推向了正确的方向。你对部分的看法有些正确。由于它是一个 magento 项目，因此系统可以处理包含哪些内容和不包含哪些内容。不幸的是，我正在尝试进行基础项目，并且似乎不可能不使用部分。我希望我可以在 sass 级别 (@import) 上做这些继承。