Question

我经常在几个WordPress项目上工作，我同时在这些项目中构建主题和插件。我在我的主题文件夹中有一个gulpfile.js，它将.scss编译成.css文件。我想知道我是否可以构建某种“master”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的最佳方法是什么？如果任务只编译必要的东西（我已经看到一些编译所有东西的任务），那将是理想的。

Answer 1

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

这有效，把它放在你的gulp.watch和gulp.src

中

让我们说你有一个工作空间，也就是root 你在那里安装gulp和gulp sass。在那里创建一个包含所有项目的文件夹，我称之为我的sites。因此，如果您有10个不同的网站，例如site1，site2，site3。它应该全部进入sites文件夹。

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

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

1 个答案: