Question

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

|-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 / folder
project2.css 这个应该包含项目1的file1和file3以及项目2的file2。

这可能吗？需要什么模块？

谢谢

Answer 1

这是应该适合你的东西。我注意到你的项目文件夹中只包含部分，即_file1.scss，_file2.scss等。你必须至少有一个不是部分的文件来导入这些部分为了工作。

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 每个项目中的所有文件，所以从每个文件名中删除那些前导下划线。

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

1 个答案: