Reduce the size of your CSS files using Gulp through the .pipe method

Is it feasible to incorporate a plugin like clean-css to minify CSS every time a page is refreshed or saved? How can I chain it through pipes to ensure that the minified file ends up in the dist folder? Thank you for any assistance!

Presented below is the existing code snippet:


        gulp.task('styles', function(){
            return gulp.src('css/style.css')
                .pipe(postcss([cssImport, mixins, cssvars, nested, hexrgba, autoprefixer]))
                .on('error', function(errorInfo){
                    console.log(errorInfo.toString());
                    this.emit('end');
                })
                // Specify destination folder for stylesheet
                .pipe(gulp.dest('dist/styles'));
        });
    

Answer №1

If you're aiming for optimized CSS, consider using uglifycss:

uglifycss = require('gulp-uglifycss');

gulp.task('minifyStyles', function(){
    return gulp.src('src/css/main.css')
        .pipe(postcss([autoprefixer, cssnano]))
        .on('error', function(error){
            console.log(error.toString());
            this.emit('end');
        })
        .pipe(uglifycss({
            "maxLineLen": 100,
            "uglyComments": false
        }))
        //output folder for minified styles
        .pipe(gulp.dest('dist/styles'));
});

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

Ways to avoid divs overlapping on a mobile device?

If you visit this page: The recent searches section displays correctly on a computer, but it overlaps with the footer when viewed on an iPhone 6. What steps can I take to avoid this issue? ...

Are there any possible resolutions to the issues plaguing Next.Js?

After switching from React to Next.JS, I've encountered some challenges that I'm hoping to find solutions for: In contrast to React, Next.JS doesn't allow me to change a specific part of a webpage and maintain a static element like a navb ...

JavaScript code that activates several hovering elements

I am a beginner in the world of JavaScript and I'm attempting to create a simple function that will activate multiple div hover effects. I have tried various approaches so far, but I believe this code is closer to the solution. Any assistance from som ...

Display function not functioning properly following AJAX request

I'm working on a functionality where I want to initially hide a table when the page loads, and then display it with the results when a form is submitted using Ajax. The issue I'm facing is that the code refreshes the page and sets the table back ...

"Bootstrap 4 introduces a new feature where adjusting the spacing between columns causes them to wrap underneath one another

My goal is to create two divs that each take up 6 columns with a space of 1px between them. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoA ...

Navigation Menu in Motion

I'm currently working on a website for my F1 in Schools team and I'm looking to implement a feature where the button in the navigation bar changes its background color and font color when that section of the page is active, even while scrolling o ...

Utilizing Unicode characters within the content of a pseudo element in data-content

Is there a way to include unicode in the data-content attribute using JQuery for pseudo element content? I'm having trouble with the correct formatting. How can I properly display unicode characters? Currently, all I see is &#x25BC;. a::after { ...

Am I on the right track in my understanding of how document and viewport relate to mouse position in JavaScript?

After reviewing responses from a previous inquiry, it is evident that both pertain to the x and y coordinates of mouse positions. In relation to the document and In relation to the viewport. I have delved into an article on QuirksMode, yet I feel ther ...

Arrangement of words within a silhouette

I am looking to insert text into a specific shape. The parameters I have include the font, text width, text height, and margin of the text. The text is positioned within a shape with coordinates x and y. Here is an example image: https://i.sstatic.net/Mpq ...

What is the proper way to input a valid path?

I am facing an issue with the path to the CSS folder in the linked picture. The HTML code is working fine, but the CSS seems to be not loading correctly. I suspect that the problem lies in the path. How can I rectify this? I'm unsure of what steps to ...

How to Style Bootstrap 4 Tables with Rounded Borders

Currently, I am in the process of enhancing the design of a Bootstrap 4 table within a Node application using handlebars (.hbs). While I have been able to adjust the width of the table with CSS, I am encountering challenges in creating the desired borders ...

The primary division containing two inner divisions, one centered and the other positioned to the right

I would like the layout to resemble the image provided. The div header contains two nested divs - the logo div should be centered, and the info div should be positioned to the right with some margin. ...

Create a layout with a single column that features a dynamic image, paired with another column housed within a modal using Bootstrap

I'm facing a design issue with a row that has two columns - one with an image and the other with a list of users in a modal window. As more users are loaded when scrolling down the modal, I want the image to remain fixed in its position. Here's t ...

Tips for eliminating any default white space visible between tags:

What is the best way to eliminate white space gaps between div tags and adjust pixel differences between them in HTML code? My current alignment is off and there are noticeable white spaces between div tags. I have tried using a reset link but it didn&apo ...

Ways to add extra dots to your listing style

Is there a CSS property or list style that can display an expanding list? For example: Order now for a discount! <ol style="list-style: none"> <li>* Available only for the first 12 months</li> <li>** Only for new customers ...

Challenges arise with the height settings of ui-grid

Currently, I am facing an issue with using height: auto on an angularJS ui-grid. The problem arises from an inline style that specifies a fixed height on the div to which the ui-grid attribute is added. Additionally, the function getViewPortStyle() dynamic ...

(CSS) Unusual phantom white outline surrounding menu with no visible border

I've just finished creating my first multi-level drop-down menu, but I'm encountering two white border issues. The first white border appears at the bottom of the menu and seems to be related to the padding of the a-elements. The specific area in ...

Ways to implement CSS in my JQuery Plugin

In the process of creating a unique JQuery component plugin that relies on some essential default CSS for its layout, I am faced with a dilemma. Should I: Create a separate .css file and load it dynamically within my plugin code (How would this be accomp ...

Tips for moving a title sideways and adjusting the bottom section by x pixels

I am seeking to accomplish a design similar to this using CSS in order to create a title of <h1>DISCOVER <span>WEB 3</span> DIMENSIONS</h1>. How do you recommend achieving this? Thank you, I have searched on Google and asked frie ...

Creating a stunning effect with radial-gradient on an image element

I am looking to achieve a fading effect on an element using a radial gradient. While it works when I set an image as a background image, it does not work on the element directly. Is there a way I can accomplish this? My goal is to have the image fade fro ...