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