From SCSS to Style.css: Transforming Sassy Casc

Recently, the lead developer who worked on this project has left the company and now I have been tasked with taking over the project. Any assistance or guidance in this transition would be greatly appreciated.

I must admit, I am not well-versed in WordPress or SCSS/Foundation, so this will definitely be a learning curve for me. I am trying to make a CSS change and deploy it, but unfortunately, the changes are not reflecting on my local environment at all.

Here is what I know:
- The project was built using Foundation
- SCSS is being converted into Style.css
- - A version is appended at the end of style.css

The tasks listed in my gulpfile.js are:
https://i.sstatic.net/yOjAj.png

Referencing the documentation provided:

The default gulp task runs both gulp scripts and gulp styles. To execute this task, navigate to the project's htdocs directory in Terminal, and type:

gulp

When I run this command, I receive the following message:

[14:00:37] Task never defined: default
[14:00:37] To view available tasks, try running: gulp --tasks

Below, you will find the complete gulpfile.js file

const argv = require('yargs').argv;
const {
    src,
    dest,
    parallel,
    series,
    watch
} = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const concat = require('gulp-concat');
const postcss = require('gulp-postcss');
const cssnano = require('cssnano');
const rename = require('gulp-rename');
const uglify = require('gulp-uglify');

// Usage in gulp: gulp task-name --theme=theme-name
// Default value is 'f-sites'
const themeName = argv.theme ? argv.theme : 'f-sites';

// GULP CONFIG
const config = {
    themeName: themeName,
    themeDirectory: `wp-content/themes/${themeName}`
};

// GULP TASKS

// SCSS/CSS TASKS
//==================================================

function sassToCss() {
    const nodeModulesSassPaths = [
        'node_modules/foundation-sites/scss',
        'node_modules/slick-carousel/slick',
        'node_modules/jquery-fancybox/source/scss',
        'node_modules/font-awesome/scss'
    ];

    const srcPaths = [
        `${config.themeDirectory}/scss/theme.scss`,
        `${config.themeDirectory}/scss/theme-rtl.scss`
    ];

    return src(srcPaths, { sourcemaps: true })
        .pipe(sass({ includePaths: nodeModulesSassPaths }).on('error', sass.logError))
        .pipe(autoprefixer({ browsers: ['last 2 versions', 'ie >= 10'] }))
        .pipe(dest(`${config.themeDirectory}/css`, { sourcemaps: true }));
}

function cssConcatLTR() {
    const srcFiles = [
        `${config.themeDirectory}/css/wordpress.css`,
        './node_modules/animate.css/animate.css',
        `${config.themeDirectory}/css/theme.css`,
    ];

    return src(srcFiles, { sourcemaps: true })
        .pipe(concat('project.css'))
        .pipe(dest(`${config.themeDirectory}/css`, { sourcemaps: true }));
}

function cssConcatRTL() {
    const srcFiles = [
        config.themeDirectory + '/css/wordpress.css',
        './node_modules/animate.css/animate.css',
        config.themeDirectory + '/css/theme-rtl.css'
    ];

    return src(srcFiles, { sourcemaps: true })
        .pipe(concat('project-rtl.css'))
        .pipe(dest(`${config.themeDirectory}/css`, { sourcemaps: true }));
}

function cssMinifyLTR() {
    const plugins = [cssnano()];
    return src(`${config.themeDirectory}/css/project.css`)
        .pipe(postcss(plugins))
        .pipe(rename('style.css'))
        .pipe(dest(config.themeDirectory));
}

function cssMinifyRTL() {
    const plugins = [cssnano()];
    return src(`${config.themeDirectory}/css/project-rtl.css`)
        .pipe(postcss(plugins))
        .pipe(rename('style-rtl.css'))
        .pipe(dest(config.themeDirectory));
}

exports.default = parallel(
    series(
        sassToCss,
        parallel(cssConcatLTR, cssConcatRTL),
        parallel(cssMinifyLTR, cssMinifyRTL)
    ),
    series(jsConcat, jsMinify)
);

exports.styles = series(
    sassToCss,
    parallel(cssConcatLTR, cssConcatRTL),
    parallel(cssMinifyLTR, cssMinifyRTL)
);

exports.scripts = series(jsConcat, jsMinify);

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

Locate specific words within the content and conceal them

Can anyone help me with a jQuery solution to hide certain Text elements from my content? HTML: <div id="name"> Attempting to hide specific Text elements from content. </div> Desired outcome: <div id="name"> Attempting to hide <p st ...

Overlaying images responsively on top of each other

I have successfully achieved the result of displaying an image over another image using the following code: <div class="row"> <div class="col-lg-6 col-md-6 col-sm-12"> <div class="image-with-overlay"> <div clas ...

How to align horizontal UL navigation utilizing CSS sprite background

After numerous attempts, I am struggling to center a 4 element horizontal list using a sprite image as the li background within the footer div. My CSS and HTML code is as follows: #footer-share-links { width:400px; text-align:center; margin:10 ...

Transfer a document to a php server using AJAX and jQuery in place of a traditional form

Is there a way to use AJAX for uploading files in PHP without reloading the page or performing additional functions? I want to keep it simple. Any suggestions? <form action="upload.php" method="post" enctype="multipart/form-data"> <label st ...

Fill the second dropdown menu options based on the selection made in the first dropdown menu

I need assistance with dynamically populating my second drop-down menu based on the selection made in the first drop-down. Here are the steps I've taken so far: form.php - Utilizing javascript, I have set up a function to call getgeneral.php. The se ...

importance of transferring information in URL encoded form

Recently, I started learning about node.js and API development. During a presentation, I was asked a question that caught me off guard. I had created a REST API (similar to a contact catalog) where data was being sent through Postman using URL encoded PO ...

Create a receipt by utilizing jQuery with dynamically generated inputs

Is there a way to insert the descriptions and amounts of invoice items into the receipt, similar to the due date? The input for this section is dynamic with multiple rows that can be added or deleted. I'm considering using a counter that increments e ...

Mobile navbar fails to collapse upon clicking links

I'm attempting to have my code collapse when the links are clicked, but I'm running into some issues. I attempted adding data-toggle to the link, however in doing so, the links stopped functioning. <HTML> <nav class="navbar navbar-expa ...

Error in Laravel: Essential npm dependency (true-case-path) not found when running "npm run watch"

Recently, I encountered an issue while working on a Laravel project (v8.12) on Windows 10. The problem arises when attempting to run "npm run watch". Strangely enough, this script was functioning perfectly fine just a month ago. It appears that the functio ...

Installing third party libraries in Node.js on Google Cloud involves using the npm package manager

As I attempt to deploy my code on Google Cloud, everything runs smoothly during testing. However, when I execute the command: gcloud app deploy An error is displayed. Specifically, I am trying to install Node.js canvas which necessitates certain depend ...

Is it necessary to utilize container or container-fluid within the grid system layout?

While similar questions may already exist on Stackoverflow, I believe the exact answer has yet to be found. Many suggest: "You should nest .col within .row, and ensure that .row is inside of .container." However, this concept still eludes me. I underst ...

Is there a way to optimize downloading multiple identical images using html, css, jquery, etc.?

My chess board features 64 squares, each with a picture of a board piece on either a light or dark square. To ensure proper formatting, a Clear knight is placed on the board. The design utilizes a div element with a background image (representing light or ...

What is the specific significance of the term "next" within package.json dependencies?

Can you explain the significance of using "next" in the package.json dependencies? "dependencies": { "react": "^15.4.2", "react-dom": "^15.4.2", "react-router-dom": "next" } ...

Can the <article> tag and all its content be positioned in the center of the webpage?

Can the <article> and its content remain centrally aligned on the page? Check out my website here: Typically, when you visit a website, the article is positioned in the center of the page. However, in my case, the article only remains centered when ...

Like the Word outline view, the list view can be easily collapsed and expanded with a simple click

I've seen a few examples, but I haven't been able to achieve what I'm looking for. I need to extract text from a field and convert it into an outline view similar to the one in Word. Is this possible? Any help would be greatly appreciated. I ...

Tips for presenting the cards in a professional layout

After creating a group of cards in angular using a for loop, I encountered an issue: <div class="row"> <div *ngFor="let dev_data of data" class="col-3"> <div class="card shadow"> <div class="card-body ...

I am looking to design a pair of Carousels that will be positioned right next to

Is it possible to set up two Carousels next to each other? https://i.sstatic.net/Dv7PB.png <div class="row"> <div class="col-md-2"></div> <div class="col-md-8"> <div id="Carousel" class="carousel slide"> ...

In-line Vertical Ticker Display

I attempted to use vTicker, but I found that it does not function properly when used as an inline element. <h1> <div id="vticker"><ul>...</ul></div> Some other headline text </h1> My goal is to have the vertica ...

The text area within the input group is misaligned with the input group button

Here is an example of how I'm using the input group feature with Bootstrap: <div class="input-group" style="padding-left: 20px;"> <input type="text" name="s" class="form-control input-sm"> <span class="input-group-btn"> ...

Unable to get 'margin: 0 auto' to function properly on mobile devices

We recently created a website at but are facing issues with mobile device compatibility and centering the content using margin: 0 auto along with a specified width. The problem can be seen here: for "topuctovnici.sk" We have set .core to 1240px in widt ...