Gulpfile.js 处理多个文件夹中的多个文件答案

【问题标题】：Gulpfile.js to handle multiple files in multiple foldersGulpfile.js 处理多个文件夹中的多个文件
【发布时间】：2017-02-15 19:38:18
【问题描述】：

我经常在几个 WordPress 项目上工作，我在这些项目中同时构建主题和插件。我的主题文件夹中有一个 gulpfile.js，它将 .scss 编译成 .css 文件。我想知道是否可以构建某种“主”gulpfile，将其放在根文件夹中，然后在我们拥有它们时编译 .scss 文件。这个想法是，如果任何文件夹包含 /scss 文件夹，那么 Gulp 将编译它的主要 .scss 文件，然后生成一个 /css 文件夹（同样的想法可以适用于编译的 js 文件、图像等）。

到目前为止，这是我编译 .scss 文件的任务。

var gulp = require( 'gulp' ),
        sass = require( 'gulp-sass' ),
        autoprefixer = require( 'gulp-autoprefixer' ),
        minifycss = require( 'gulp-minify-css' ),
        rename = require( 'gulp-rename' ),
        clean = require( 'gulp-clean' ),
        concat = require( 'gulp-concat' ),
        cache = require( 'gulp-cache' ),
        notify = require( 'gulp-notify' ),
        projectTitle = 'Project Name';

// styles task
gulp.task( 'styles', function() {
    return gulp.src( 'src/styles/*.scss' )
        .pipe( sass({ paths: ['src/styles/'], outputStyle: 'expanded' }) )
        .pipe( notify( {
        title: projectTitle,
        message: 'File: <%= file.relative %> was compiled!'
        } ) )
        .pipe( autoprefixer( 'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4' ) )
        .pipe( gulp.dest( 'assets/css' ) )
        .pipe( rename( { suffix: '.min' } ) )
        .pipe( minifycss() )
        .pipe( gulp.dest( 'assets/css' ) )
        .pipe( notify( {
        title: projectTitle,
        message: 'Minified file: <%= file.relative %> was created / updated!'
        } ) )
} );

// styles task
gulp.task( 'editor-styles', function() {
    return gulp.src( 'src/styles/editor-styles.scss' )
        .pipe( plumber() )
        .pipe( sass({ paths: ['src/styles/'] }) )
        .pipe( notify( {
        title: projectTitle,
        message: 'File: <%= file.relative %> was compiled!'
        } ) )
        .pipe( autoprefixer( 'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4' ) )
        .pipe( gulp.dest( 'assets/css' ) )
        .pipe( rename( { suffix: '.min' } ) )
        .pipe( minifycss() )
        .pipe( gulp.dest( 'assets/css' ) )
        .pipe( notify( {
        title: projectTitle,
        message: 'Minified file: <%= file.relative %> was created / updated!'
        } ) )
} );

// watch task
gulp.task( 'watch', function() {

    // Watch .scss files
    gulp.watch( 'src/styles/**/*.scss', [ 'styles' ] );

});

在这种情况下，构建一个像这样工作的全局 gulpfile.js 的最佳方法是什么？此外，如果任务只编译必要的内容，那将是理想的（我见过一些任务一直编译所有内容）。

【问题讨论】：

标签： javascript css gulp gulp-sass

【解决方案1】：

./sites/**/scss/*.scss

这行得通，把它放在你的 gulp.watch 和 gulp.src 中

假设您有一个工作区，也就是 root。
你在那里安装 gulp 和 gulp sass。在那里创建一个包含你所有项目的文件夹，我称之为我的sites。因此，如果您有 10 个不同的站点，例如站点 1、站点 2、站点 3。它应该都放在sites 文件夹中。

它监视所有站点/[随机文件夹名称]/scss 文件夹中的所有.scss 文件，并在其中输出css。我不知道如何生成css 地图并将输出放在那里。

【讨论】：