Constructing the necessary gulp configuration file

Question

Constructing the necessary gulp configuration file

When using Gulp and Gulp-sass, with the use of 'gulp.watch', how can I retrieve the directory name of the modified item on the watchlist in order to compile the sass to css?

Currently, the setup only compiles the sass files from theme 1. If there are changes in the sass files of theme 2 or 3, the css of theme 1 gets updated. The goal is to create a conditional process so that each theme's css gets compiled based on their own changes.

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
    return gulp.src('./wp-content/themes/1/assets/sass/**/*.scss')
         .pipe(sass.sync().on('error', sass.logError))
         .pipe(gulp.dest('./wp-content/themes/1/'));
});

gulp.task('sass:watch', function () {
    gulp.watch('./wp-content/themes/1/assets/sass/**/*.scss', ['sass']);
    gulp.watch('./wp-content/themes/2/assets/sass/**/*.scss', ['sass']);
    gulp.watch('./wp-content/themes/3/assets/sass/**/*.scss', ['sass']);
});

javascript gulp gulp-sass

Answer 1

Answer №1

Even though this solution may seem hard-coded, it has proven to be effective in my case.

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
    // return gulp.src('./wp-content/themes/giggleselc/assets/sass/**/*.scss')
    //      .pipe(sass.sync().on('error', sass.logError))
    //      .pipe(gulp.dest('./wp-content/themes/giggleselc/'));
});

gulp.task('sass:watch', function () {
    var n1 = gulp.watch('./wp-content/themes/1/assets/sass/**/*.scss', ['sass']);
    var n2 = gulp.watch('./wp-content/themes/2/assets/sass/**/*.scss', ['sass']);
    var n3 = gulp.watch('./wp-content/themes/3/assets/sass/**/*.scss', ['sass']);

    n1.on('change', function(f) {
        return gulp.src('./wp-content/themes/1/assets/sass/**/*.scss')
            .pipe(sass.sync().on('error', sass.logError))
            .pipe(gulp.dest('./wp-content/themes/1/'));
    });
    n2.on('change', function(f) {
        console.log('Change Event:', f);
        return gulp.src('./wp-content/themes/2/assets/sass/**/*.scss')
            .pipe(sass.sync().on('error', sass.logError))
            .pipe(gulp.dest('./wp-content/themes/2/'));
    });
    n3.on('change', function(f) {
        return gulp.src('./wp-content/themes/3/assets/sass/**/*.scss')
            .pipe(sass.sync().on('error', sass.logError))
            .pipe(gulp.dest('./wp-content/themes/3/'));
    });
});

Answer 2

Even though this solution may seem hard-coded, it has proven to be effective in my case.

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
    // return gulp.src('./wp-content/themes/giggleselc/assets/sass/**/*.scss')
    //      .pipe(sass.sync().on('error', sass.logError))
    //      .pipe(gulp.dest('./wp-content/themes/giggleselc/'));
});

gulp.task('sass:watch', function () {
    var n1 = gulp.watch('./wp-content/themes/1/assets/sass/**/*.scss', ['sass']);
    var n2 = gulp.watch('./wp-content/themes/2/assets/sass/**/*.scss', ['sass']);
    var n3 = gulp.watch('./wp-content/themes/3/assets/sass/**/*.scss', ['sass']);

    n1.on('change', function(f) {
        return gulp.src('./wp-content/themes/1/assets/sass/**/*.scss')
            .pipe(sass.sync().on('error', sass.logError))
            .pipe(gulp.dest('./wp-content/themes/1/'));
    });
    n2.on('change', function(f) {
        console.log('Change Event:', f);
        return gulp.src('./wp-content/themes/2/assets/sass/**/*.scss')
            .pipe(sass.sync().on('error', sass.logError))
            .pipe(gulp.dest('./wp-content/themes/2/'));
    });
    n3.on('change', function(f) {
        return gulp.src('./wp-content/themes/3/assets/sass/**/*.scss')
            .pipe(sass.sync().on('error', sass.logError))
            .pipe(gulp.dest('./wp-content/themes/3/'));
    });
});

Constructing the necessary gulp configuration file

Answer №1

Similar questions

Executing a function in ExpressJS at regular intervals of 24 hours

Changing the style.backgroundImage property overrides any image transition effects

What steps do I need to take to integrate my RASA assistant into my personal website?

Troubleshooting: React js Project console.logs are not being displayed in the browser's

What is the proper way to utilize the ES6 import feature when using a symbolic path to reference the source file?

Dealing with Errors When Working with Angular Promises

Page showing without banner

What is the best method to update the content of one div with content from another page using AJAX?

The integration of Raphaeljs library with SmartPhones opens up a world of

Building web navigation using a combination of HTML, JavaScript, and PHP within a category, sub

Issues arise when the condition fails to function correctly during the process of form

Updating Angular 5 Views Dynamically Using a While Loop

The collapsible section expands upon loading the page

Issue: Route.get() is expecting a callback function, but instead received an undefined object in app.js

The animation is not updating quickly enough

When using jQuery's .text() method, it updates the "source" content without affecting the actual DOM

Exploring the setTimeout function in JavaScript

Instructions for showcasing a 404 error page in the event that a back-end GET request to an API fails due to the absence of a user. This guide will detail the process of separating the

Send a substantial item for display using Express Layout

Transferring information from a Jade file to a Node.js server