Gulp 编译 scss 文件并将 css 和 css.map 文件移动到相对于 scss 文件位置的父文件夹

Question

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('sass', function () {
    return gulp.src(['./project/**/*.scss', '!./project/**/_*/'])
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(function (file) {
            return file.base;
        }));
});

/project  
    --> Module1  
        --> scss  
            --> Test1.scss  
    --> Module2  
        --> scss 
            --> Test2.scss 

点击这里查看文件夹结构

我有一个包含多个模块的项目。我正在尝试编写一个 gulp 任务来编译 sass 文件并在每个模块中创建 css 文件。我有以下 文件夹结构和 gulpfile。

该任务目前旨在编译 scss 文件并在与 scss 文件相同的位置创建 css 和 css.map 文件。
如何将它们都移到 scss 文件夹之外，但仍位于各自的模块中？

Answer 1

您可以添加一个配置文件来指定文件的构建位置，以便可以在您选择的文件夹中生成它们，如下所示：

let gulp = require('gulp');
let sass = require('gulp-sass');
let sourcemaps = require('gulp-sourcemaps');
let rename = require('gulp-rename');
let gulpUtil = require('gulp-util');
let merge = require('merge-stream');

const CONFIGS = [require('./gulp.module1.config'), require('./gulp.module2.config')];

gulp.task('sass', function () {
    let tasks = CONFIGS.map(config => {
        return gulp.src(config.sass.src)
            .pipe(sass())
            .on('error', error => console.log(error))
            .pipe(rename('app.min.css'))
            .pipe(gulp.dest(config.buildLocations.css));
    });

    return merge(tasks);
});

配置1：

module.exports = {
    app: { baseName: 'module1' },
    sass: {
        src: ['./project/module1/scss/*.scss']
    },
    buildLocations: {
        css: './project/module1/'
    }
}

配置2

module.exports = {
    app: { baseName: 'module1' },
    sass: {
        src: ['./project/module2/scss/*.scss']
    },
    buildLocations: {
        css: './project/module2/'
    }
}

Folder Structure

更新：如果您不想编写单独的配置文件，您可以使用路径库对其进行重命名，将文件保留在父级。

gulp.task('sass', function () {
return gulp.src('./project/**/scss/*.scss')
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(sourcemaps.write('.'))
        .pipe(rename(function(file) {
            file.dirname = path.dirname(file.dirname)
            return file;
        }))
        .pipe(gulp.dest('./project'))
});

Answer 2

gulp-flatten 非常方便选择要从最终结构中包含或排除的目录。

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');

var flatten = require("gulp-flatten");

gulp.task('sass', function () {
    return gulp.src(['./project/**/*.scss', '!./project/**/_*/'])
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(sourcemaps.write('.'))

        // keep one parent directory: "Module1", "Module2"
        // relative to your glob bae, so first after "project"

         .pipe(flatten({ includeParents: 1}))

        .pipe(gulp.dest('project'));
});