Gulp - 编译多个 sass src 和 dest

Question

我对 Gulp 还是很陌生，但我认为我已经掌握了它，直到我继承了一个需要一些开发工作的 WordPress 主题。

在编译 editor-styles.scss 之前，我一直在编译我的样式，没有任何问题

这是我的样式的基本文件结构：

theme-name
  _static
    styles
      _admin
          editor-styles.scss
          editor-styles.min.css
          admin-styles.scss
          admin-styoles.min.css
          login-styles.scss
          login-styles.min.css
      _layout
          _block.scss
          _header.scss
      _utils
          _mixins.scss
          _variables.scss
      styles.scss
styles.css

对 _layout 和 _utils 文件夹中任何 scss 文件的所有更改都会正确编译到主索引中的 styles.css。

当我在 _admin 文件夹中编辑 scss 文件时，我需要将其编译为同一文件夹中的 .min.css 版本。 相反，它使用 .css 文件在主主题索引中编译并创建一个新的 _admin 文件夹。

我知道为什么会这样，因为这就是我在 gulpfile.js 中告诉我的编译要做的事情 但是，我不知道如何拆分这两个来源？

这是我的 gulpfile.js：

// MODULES
var gulp = require('gulp');
var sass = require('gulp-sass');
var js = require('gulp-uglify');
var imagemin = require('gulp-imagemin');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
var plumber = require('gulp-plumber');
var gutil = require('gulp-util');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var rename = require('gulp-rename');
var concat = require('gulp-concat');


// COMPILE AND MINIFY SASS
gulp.task('sass', function () {
    return gulp.src('./wp-content/themes/theme-name/_static/styles/**/*.scss')
        .pipe(plumber())
        .pipe(sass.sync().on('error', sass.logError))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('./wp-content/themes/theme-name'))
        .pipe(browserSync.stream())
        done();
});


// MINIFY JS
gulp.task('js', function () {
    return gulp.src('./wp-content/themes/theme-name/_static/js/*.js')
    .pipe(js())
    .on('error', onError)
    .pipe(rename({
        suffix: '.min'
    }))
    .pipe(concat('all.min.js'))
    .pipe(gulp.dest('./wp-content/themes/theme-name/_static/js/min/'))
    .pipe(browserSync.stream())
    done();
});


// IMAGES
gulp.task('imagemin', function () {
    return gulp.src('./wp-content/themes/theme-name/*')
    .pipe(imagemin())
    .pipe(gulp.dest('./wp-content/themes/theme-name/images'))
    done();
});


// BROWSERSYNC
gulp.task('browser-sync', function(done) {
    browserSync.init({
        proxy: 'http://localhost/project-name'
    })
    done();

});


// RELOAD
gulp.task('reload', function (done) {
    browserSync.reload();
    done();
});


// ERROR LOG
var onError = function (err) {
    console.log('An error occurred:', gutil.colors.magenta(err.message));
    gutil.beep();
    this.emit('end');
};


// WATCH
gulp.task('watch', function() {
    gulp.watch('./wp-content/themes/theme-name/_static/styles/**/*.scss', gulp.series('sass'));

    gulp.watch('./wp-content/themes/theme-name/_static/js/*.js', gulp.series('js'));
    gulp.watch('./wp-content/themes/theme-name/images/*', gulp.series('imagemin'));

    gulp.watch('./wp-content/themes/theme-name/**/*.php').on('change', browserSync.reload);
    gulp.watch('*/theme-name/**/*.php').on('change', browserSync.reload);
});


gulp.task('default', gulp.series('sass', 'js', 'imagemin', 'browser-sync', 'watch'));

在此先感谢您提供的任何帮助/建议 - 我正在用头撞墙，我确信这是我忽略的超级简单的事情。

Answer 1

有不止一种方法可以实现您想要的。您可以有单独的 watch 语句为您的不同目录触发单独的 sass 语句。这样做的好处是您不会每次都运行所有 .scss 文件。

但是考虑一下。使用 gulp-if 插件，它允许您在中途做出 if/else 决定。

const gulpif = require('gulp-if');
const path = require('path');       // needed to get the last directory name in a path

const condition = function (file) {
  const match = path.basename(path.dirname(file.path));
  return match === "_admin";
}

// COMPILE AND MINIFY SASS
gulp.task('sass', function () {

  return gulp.src('./_static/styles/**/*.scss')

    .pipe(plumber())
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(sourcemaps.write())

      // if condition is true use first gulp.dest, else use second
      //   condition is true if current file parent directory is _admin
    .pipe(gulpif(condition, gulp.dest('./_static/styles/'), gulp.dest('./')))


    .pipe(browserSync.stream());
    // done();   // not needed with the return 
});

这种方法的缺点是每次都会重新编译所有.scss文件。

Answer 2

如果有人需要知道如何为单独的 src 和目标运行任务，这对我有用 :) 感谢您的帮助 Mark。

// This is my main sass files.
// It compiles all my sass files, EXCEPT any files in the _admin folder
// and compiles them to styles.css in my main theme index/root
gulp.task('sass', function () {
    return gulp.src([
        './wp-content/themes/theme-name/_static/styles/**/*.scss',
        '!./wp-content/themes/theme-name/_static/styles/_admin/*.scss'
    ])

        .pipe(plumber())
        .pipe(sass.sync().on('error', sass.logError))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('./wp-content/themes/andra-birkerts-design'))
        .pipe(browserSync.stream())
        done();
});

// This is my main admin sass file.
// It compiles just the sass files in the _admin folder
// and compiles them to filename.min.css in the same _admin folder
gulp.task('admin_sass', function () {
    return gulp.src('./wp-content/themes/theme-name/_static/styles/_admin/*.scss')
        .pipe(plumber())
        .pipe(sass.sync().on('error', sass.logError))
        .pipe(sourcemaps.write())
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest('./wp-content/themes/theme-name/_static/styles/_admin'))
        .pipe(browserSync.stream())
        done();
});

gulp.task('default', gulp.series('sass', 'admin_sass', 'browser-sync', 'watch'));