Creating a Gulpfile.js that efficiently manages a multitude of files spread across various folders

For my ongoing WordPress projects, I am simultaneously working on themes and plugins. In my theme folder, I have a gulpfile.js that compiles .scss files into .css. I am considering creating a central "master" gulpfile in the root folder to compile .scss files from any folder that contains a /scss folder, generating a corresponding /css folder (similarly for js files, images, etc).

Here is the task I currently have for compiling .scss files:

var gulp = require( 'gulp' ),
        sass = require( 'gulp-sass' ),
        autoprefixer = require( 'gulp-autoprefixer' ),
        minifycss = require( 'gulp-minify-css' ),
        rename = require( 'gulp-rename' ),
        clean = require( 'gulp-clean' ),
        concat = require( 'gulp-concat' ),
        cache = require( 'gulp-cache' ),
        notify = require( 'gulp-notify' ),
        projectTitle = 'Project Name';

// styles task
gulp.task( 'styles', function() {
    return gulp.src( 'src/styles/*.scss' )
        .pipe( sass({ paths: ['src/styles/'], outputStyle: 'expanded' }) )
        .pipe( notify( {
        title: projectTitle,
        message: 'File: <%= file.relative %> was compiled!'
        } ) )
        .pipe( autoprefixer( 'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4' ) )
        .pipe( gulp.dest( 'assets/css' ) )
        .pipe( rename( { suffix: '.min' } ) )
        .pipe( minifycss() )
        .pipe( gulp.dest( 'assets/css' ) )
        .pipe( notify( {
        title: projectTitle,
        message: 'Minified file: <%= file.relative %> was created / updated!'
        } ) )
} );

// styles task
gulp.task( 'editor-styles', function() {
    return gulp.src( 'src/styles/editor-styles.scss' )
        .pipe( plumber() )
        .pipe( sass({ paths: ['src/styles/'] }) )
        .pipe( notify( {
        title: projectTitle,
        message: 'File: <%= file.relative %> was compiled!'
        } ) )
        .pipe( autoprefixer( 'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4' ) )
        .pipe( gulp.dest( 'assets/css' ) )
        .pipe( rename( { suffix: '.min' } ) )
        .pipe( minifycss() )
        .pipe( gulp.dest( 'assets/css' ) )
        .pipe( notify( {
        title: projectTitle,
        message: 'Minified file: <%= file.relative %> was created / updated!'
        } ) )
} );

// watch task
gulp.task( 'watch', function() {

    // Watch .scss files
    gulp.watch( 'src/styles/**/*.scss', [ 'styles' ] );

});

What would be the most effective way to create a master gulpfile.js that functions in this manner? I am aiming for a task that only compiles what is necessary, as opposed to compiling everything all the time.

Answer №1

./sites/**/scss/*.scss 

Include the code snippet above in your gulp.watch and gulp.src functions.

Imagine you have a main folder called root where you want to work. Within this root folder, install gulp and gulp sass. Create a subfolder named sites to store all of your projects. For example, if you have 10 different sites like site1, site2, site3, they should all be placed inside the sites folder.

Gulp will monitor the scss folders within each site's folder for any .scss files and compile the CSS files within the same directory. Unfortunately, the process of generating a CSS map and directing the output to it remains a mystery to me.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Recall the act of pressing a button on a

Is there a way to make my website remember if the mute button was pressed? Currently, the website plays music with a mute button, but it doesn't retain the mute setting when navigating to a new page or refreshing the current page. The local storage sc ...

Discovering the property name of an object in Angular using $watch

Is there a way to monitor an object for changes in any of its properties, and retrieve the name of the property that changed (excluding newValue and oldValue)? Can this be accomplished? ...

Encountering Internal Server Error when running Node-Express app on render.com with query parameters live

Currently, I am facing an issue while attempting to execute a live route with query using my nodejs express application on render.com. Strangely, all other routes connected to the crud operations are functioning properly except for the search filter route ...

Steering clear of repeating evaluations and dynamically unloading objects requested with `require` is important

I'm currently delving into the intricacies of the nodejs module system. Among the resources I've come across so far are: https://nodejs.org/api/modules.html These readings have shed light on a few aspects, but I still have some lingering ques ...

Guide to finding and saving email addresses from a string output: extracting and storing each one individually in a text file

After collecting data from multiple sources, the output I obtained is as follows: "addressId":"132234","businessEntryCount":2026},{"district":"Nordend-West","districtSlug":"frankfurt-am-main- ...

Tips for managing and modifying information with a dropdownlist in asp.net core mvc and angular js

In my asp.net core MVC project, I am incorporating AngularJs to manage two dropdown lists and a textbox. While the textbox functionality for saving and editing data works well, I am facing issues with resetting the dropdown lists after posting data and not ...

How to Handle Empty Input Data in JQuery Serialization

Having an issue with a form that triggers a modal window containing another form when a button is clicked. The second form includes an input field and send/cancel buttons. The goal is to serialize the data from the modal form and send it to a server using ...

Integrate jQuery-ui into your Angular 5 application

Having some trouble integrating jquery-ui into my Angular 5 project. I need to use a feature that requires jquery-ui, but I keep encountering this error: TypeError: WEBPACK_MODULE_10_jquery(...).droppable is not a function I initially attempted to plac ...

Syntax error encountered with the null-coalescing operator (`??`)

Encountering Syntax Errors After Upgrading Angular Plugin I am facing some syntax errors after attempting to upgrade a plugin in a system that was originally developed by someone else. Although I am relatively new to Angular, I tried to simply replace the ...

Guide on how to combine the strings retrieved from an API

I'm having trouble concatenating multiple sentences together and highlighting specific words in each sentence. Although I can successfully highlight one sentence using the code below, I haven't been able to concatenate more than one sentence: th ...

The issue with the smooth scrolling feature in next/link has not been resolved

I am currently facing an issue where smooth scrolling is not working when using next/Link, but it works perfectly fine with anchor tags. However, the downside of using anchor tags is that the page reloads each time, whereas next/link does not reload the pa ...

Trouble with Divs and Element Placement

I am struggling to recreate this layout example. I attempted to make it align correctly, but I am having trouble looping the comment box under the review score. Can someone provide an example or guide me on how to achieve this design? Example image: http ...

Issues with jQuery slide operation

I'm facing an issue with jQuery and I can't figure out where it's coming from. Here is the error message that keeps showing up in the console: Uncaught TypeError: Object [object Object] has no method 'getElement' script_16.js:46Un ...

What steps can I take to prevent the [Vue warn]: Potential infinite update loop detected in a component render function issue in my VueJS project?

What are some tips to prevent an infinite update loop in a component render function using VUEJS? I have created a simple show password button with the following structure: <div class="mt-4 switchContainerGenPassword"> <div class="switchGene ...

Attempting to convert PHP tables into PDF format by utilizing jsPDF-auto-table to generate a beautifully structured PDF file containing the results of a PHP query with multiple records

I'm new to stackoverflow but I find myself visiting it regularly for helpful tips. I've taken some code from the simple.html file that comes with the jsPDF auto-table plugin. However, I'm having trouble making it work with data generated by ...

Facing issues when attempting to link two databases using Express

Encountering an issue while attempting to use two Oracle databases simultaneously. My startup function only executes the first connection try-catch block, but displays the console log connection message of the second try-catch block without actually estab ...

Having trouble with your Ajax post request?

I am currently working on creating a form that allows users to input information and submit it without the page refreshing. The processing of the form data will occur after the user clicks the submit button. To achieve this, I am utilizing jQuery and Ajax ...

Deconstructing JavaScript scripts to incorporate HTML5/CSS3 functionality for outdated browsers such as Internet Explorer

I have been researching various resources and guides related to different scripting libraries, but none of them seem to address all the inquiries I have regarding performance and functionality. With so many scripts available, it can be overwhelming to dete ...

Exploring the Towers of Hanoi Puzzle with Javascript

Recently, I've been working on a school project where I need to present an algorithm for solving the Towers of Hanoi puzzle. Utilizing my knowledge in HTML/CSS, I decided to visually represent the algorithm using JavaScript on a webpage. I've se ...

Current recommended method for updating innerHTML with properly formatted text?

My understanding is that using innerHTML on an element can be risky, as malicious users could potentially inject harmful content such as <script> tags. This question shows there are multiple alternative tags, some of which are non-standard. In my s ...