Gulp - compile multiple sass src and dest

user_13110705 0
Viewed 544

I'm pretty new to Gulp, but I thought I had a handle on it, until I inherited a WordPress theme that needed some development work on.

I've been compiling my styles with no issues until it came to compiling the editor-styles.scss

This is the basic file structure for my styles:

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

All changes to any scss file in the _layout and _utils folders are compiled correctly to the styles.css in the main index.

When I edit an scss file in the _admin folder, I need it to compile to the .min.css version in that same folder. Instead, it's compiling and creating a new _admin folder in the main theme index with .css files.

I know why this is, because that is what I have told my compiling to do in my gulpfile.js However, I can't get my head around how to split these two sources?

This is my 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'));

Thanks in advance for any help/advice - I'm banging my head against a wall and I'm sure it's something super simple I've overlooked.

gulp sass wordpress
2 Answers

There is more than one way to accomplish what you want. You could have separate watch statements triggering separate sass statements for your different directories. The advantage to that is you are not running all your .scss files everytime.

But consider this. Using the gulp-if plugin which allows you to make if/else decisions mid-stream.

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

The disadvantage of this method is that all .scss files are re-compiled each time.

user_8363300

If anyone needs to know how to run tasks for separate src and destinations, this is what works for me :) Thanks for your help 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'));
user_131107050
Related