gulp-minify-css-names not altering any files during processing

For quite some time, I have been on the search for a solution that can assist me in automating the process of renaming/minifying class names in HTML, JS, CSS files simultaneously throughout my entire project using gulp.

While there are many solutions available for either css or js individually, I came across gulp-minify-css-names which claims to work for all 3 types of source files. However, despite installing it and setting up a gulp task similar to the example provided on the npm site, I have been unable to get it to function properly.

Instead of producing modified css files, it simply outputs the same content (similarly for html and js).

Here is the code snippet of the task:

    var gulp = require('gulp');
    var gulpMinifyCssNames = require('gulp-minify-css-names');

    gulp.task('minify-css-names', function() {
        return gulp.src(['src/*.css'])
            .pipe(gulpMinifyCssNames())
            .pipe(gulp.dest('build'))
    });

You can find the project page at - https://www.npmjs.com/package/gulp-minify-css-names

What could be causing it to not work as expected?

Upon inspecting the source code of gulp-minify-css-names in my node_modules folder, I noticed that it is surprisingly small in size: only 78 lines total

Answer №1

To effectively use this library, you must add a prefix or suffix to your CSS names. The provided example includes the following CSS:

.-pre-menu-post- {color: red;}
.-pre-menu_top-post- {color: black;}
.-pre-menu_item-post- {color: green;}
.-pre-menu_item_active-post- {color: blue;}
.-pre-menu_item_active-post-::before {content: 'active'}

The default prefix is -pre- and the default suffix is -post-.

Reasoning:

Why is a prefix or suffix necessary?
This plugin uses RegExp to match all instances of CSS names in files/streams. This helps prevent incorrect replacements.

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

Send in 3 sets of HTML forms along with a single JavaScript button to save all data in a single row within

I'm facing an issue with submitting multiple forms on a page without submit buttons. I have a script that submits all three forms at the same time, but it's creating separate rows in the database instead of one combined row. Any suggestions on ho ...

Selecting radio button does not update corresponding label

I am having an issue with setting a radio button as checked. In the example snippet, it works perfectly fine but on my localhost, it is not working. Even though the input gets checked, the label does not change. Surprisingly, if I set another radio button ...

What is the best way to update the flag in my mongoose schema depending on the value of another field?

Storing comments in mongoose is done within this model: var CommentsSchema = new Schema({ username: {type: String, required: true}, comment_id: {type: String, required: true}, text_content: {type: String}, reportedUsers: {type: [String]}, ...

Obtaining the href content from a specific class using Selenium

I am attempting to extract information from a webpage that contains the following HTML: <div class="someclass"> <p class="name"><a href="#/word/1/">helloworld</a></p> </div> My objective is to retr ...

Error caused by improper syntax in NPM script containing parentheses

I'm encountering an issue with a specific NPM script in my package.json file. Here's the script causing trouble: { "scripts": { "lint": "tslint -c tslint.json src/**/**?(.test).ts?(x)" } } Upon running npm run lint, I receive the follo ...

leveraging multiple arguments in npm scripts

I have a command line script specified in the package.json file. "entity:create": "./node_modules/.bin/ts-node ./node_modules/.bin/typeorm entity:create", Now, I am trying to pass two flags into this script - -n and -d. The desired execution format is li ...

Ways to identify when a browser has disabled JavaScript and present a notification

Is there a way to detect if JavaScript is disabled in the browser and show an error div instead of the body? ...

Opening a Material Dialog automatically scrolls the body to the top of the page

I'm currently using Material UI within a React application and I'm facing an issue where opening a dialog causes the body of my page to scroll to the top. This behavior also occurs when opening a Material Popover or a Material TextBox selector. D ...

Node.js runs into SSH connection refusal while executing bash script

Here is the structure I am working with: main.js folder1/ jsFile1.js folder2/ jsFile2.js bashFile.sh main.js requires jsFile1.js, which in turn requires and executes jsFile2.js. Finally, jsFile2.js runs bashFile.sh using ShellJS and passes three ...

The image is exceeding the boundaries of its parent element, even though a height has been specified

I need assistance with aligning an image inside a div that should take the height of its parent div, specifically the .hero class. Despite setting the image's height to 100%, it still extends beyond the parent div and doesn't adhere to the specif ...

Vercel React App encounters compilation issue with error code 127 in "react-scripts build" operation

I am new to React and facing issues deploying my React Application using CRA on vercel. I keep encountering an error message "react-scripts build" exited with 127. I have attempted to remove node modules, package.json lock file, and reinstall them. Additi ...

Seamless transition animation using jquery

I'm attempting to create a smoother transition when the button is clicked, but so far it's not working as expected. I tried using $slideToggle, but I may have implemented it incorrectly. <button class="btn btn-warning" id="btn-m ...

Cannot detect react-script in the "npm run build" command when setting up the create-next-app project

Here is the content of my package.json file: "name": "food-recipe", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": &quo ...

Can the line "as is" be included in HTML code?

Can I incorporate the following JavaScript and JSON expressions directly into HTML code? CONTRATE > 50 && SALINC <= 50 || RETAGE >= 50 { "CONTRATE": 0, "SALINC": 0, "MARSTATUS": "single", "SPOUSEDOB": "1970-01-01" } I want to be able to ...

Loading CSS files conditionally in Angular2's index.html

Currently, my index.html page features a dark theme: <base href="/"> <html> <head> <title>XXX</title> </head> <body> <link rel="stylesheet" type="text/css" href="assets/dark_room.css"> <my-app ...

Styling the large drop-down menu for Internet Explorer 7

Check out the code snippet at http://jsfiddle.net/jN5G4/1/ Is there a way to align the drop-down menu for "5 Columns" to match the alignment of the other drop-downs? After removing the <a href...> </a> tags from the 5 Columns list item, the d ...

Publishing a NodeJS + Express + MySQL application on Heroku involves deploying the server side only, excluding the React frontend

I have a React + NodeJS + Express + MySQL project that we're trying to deploy on Heroku. It's set to auto deploy whenever something is pushed to the master branch of GitHub. The problem we're facing is that while the server routes are deplo ...

Troubleshooting: Issues with jQuery's Class selector

Having trouble setting up an alert to trigger when a specific class anchor tag is clicked inside a div. This is what my HTML section looks like... <div id="foo"> <a class='bar' href='#'>Next</a> </div> And h ...

How can I stop a character from showing up as an emoji in CSS using the 'before' and 'content' attributes?

My iPhone is displaying the character ✅︎ as a green checkbox instead of a standard grayscale thick check mark. I have already come across this question and I am familiar with the technique of adding the invisible special character \FE0E afterward ...

Is there a way to guide users to their designated page on Node.js?

My goal is to seamlessly redirect users to their designated pages based on their role. If the user is a regular user, they should be redirected to the user menu. On the other hand, if it's an employee, they should be directed to the employee menu. E ...