Gulp - compile multiple sass sources and destinations


HippySunshine

Senior Member
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:

Code:
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:

JavaScript:
// 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.
 
Top