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