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/'
    }
}

config 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'));
});

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

2 个答案: