Issues with Gulp Autoprefixer Functionality

I'm struggling to make Autoprefixer work with Gulp. Despite using opacity, gradients, and transforms in my CSS, I can't see any vendor prefixes being added. However, everything else seems to be functioning correctly.

Below is my gulp file:

var gulp = require('gulp');

var lr = require('tiny-lr');
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var minifycss = require('gulp-minify-css');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var livereload = require('gulp-livereload');
var server = lr();
var plumber = require('gulp-plumber');

var onError = function (err) {  
  gutil.beep();
  console.log(err);
};

gulp.task('lint', function() {
    return gulp.src('js/all.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

gulp.task('sass', function() {
    return gulp.src('scss/*.scss')
        .pipe(sass({errLogToConsole: true}))
        .pipe(autoprefixer('last 2 versions', 'safari 5', 'ie6', 'ie7', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(minifycss())
        .pipe(gulp.dest(''))
        .pipe(plumber({
            errorHandler: onError
        }))
        .pipe(livereload(server));
});


gulp.task('scripts', function() {
    return gulp.src(['js/fittext.js', 'js/fitvids.js', 'js/snap-scroll.js', 'js/cycle-min.js', 'js/all.js', 'js/respond.js'])
        .pipe(concat('all.js'))
        .pipe(gulp.dest('js/min'))
        .pipe(rename('main.min.js'))
        .pipe(gulp.dest('js/min'))
        .pipe(plumber({
            errorHandler: onError
        }))
        .pipe(livereload(server));
});

gulp.task('watch', function() {
    livereload.listen();
    gulp.watch('**/*.php').on('change', livereload.changed);
    gulp.watch('js/*.js', ['scripts']);
    gulp.watch('scss/**/*.scss', ['sass']);  
});

gulp.task('default', ['lint', 'sass', 'scripts', 'watch']);
  • I've exhaustively researched various solutions to this issue but have not found a resolution yet. I also attempted changing .pipe(gulp.dest('')) to a specific directory following suggestions like this one, unfortunately with no success.

Your assistance would be greatly appreciated.

* UPDATE *

I must admit my misunderstanding regarding Autoprefixer's behavior with opacity properties.

Answer №1

Here is the gulpfile I am using:

var gulp = require('gulp');
var sass = require('gulp-sass');
var prefix = require('gulp-autoprefixer');
var minify = require('gulp-minify-css');
var plumber = require('gulp-plumber');

function handleErrors(err) {
    console.log(err);
}

gulp.task('sass', function(){
    return gulp.src('src/style.scss')
        .pipe(sass())
        .pipe(prefix('last 2 versions'))
        .pipe(minify())
        .pipe(gulp.dest('css/'))
        .pipe(plumber({
            errorHandler: handleErrors
        }))
});

This is the SCSS file associated with it:

body {
    opacity: .5;
    box-sizing: border-box;
    transform: scale(.5);
    display: flex;
}

The resulting CSS output looks like this:

body{opacity:.5;box-sizing:border-box;-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}

I am not entirely sure what could be causing the difference in your case, except for maybe the way browsers are listed. Have you tried removing those?

Answer №2

To improve functionality, consider grouping browsers within an array rather than passing them as arguments:

.pipe(autoprefixer({
    overrideBrowserslist: ['last 2 version', 'safari 5', 'ie 6', 'ie 7', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4']
})

You can also enable or disable cascade by adjusting the value to true or false: cascade: true

Answer №3

Although this question was previously asked, I recently encountered a similar issue.

Here is the solution I implemented:

  1. Add the following browserlist entry to your package.json:
{
"browserslist": [
    'last 2 versions', 
    'safari 5', 
    'ie6', 
    'ie7', 
    'ie 8',
    'ie 9', 
    'opera 12.1', 
    'ios 6', 
    'android 4'
]
}
  1. Proceed by installing autoprefixer

npm i --save-dev autoprefixer

  1. Next, install postcss

npm i --save-dev postcss

  1. Make adjustments to the pipe in your gulpfile.js like so:
gulp.task('sass', function() {
return gulp.src('scss/*.scss')
.pipe(sass({errLogToConsole: true}))
.pipe(postcss([autoprefixer()]))
.pipe(minifycss())
.pipe(gulp.dest(''))
.pipe(plumber({
errorHandler: onError
}))
.pipe(livereload(server));
});

Answer №4

This solution should do the trick.

const gulp = require('gulp');
const autoprefixer = require('gulp-autoprefixer');

gulp.task('styles', function(){
    return gulp.src('css/styles.css')
   .pipe(autoprefixer('last 2 versions'))
   .pipe(gulp.dest ('build'));
});

gulp.task('watch', function(){
    gulp.watch('css/styles.css', gulp.series(['styles']));
});

Answer №5

As I analyze the code, my attention is drawn to:

.pipe(autoprefixer('last 2 versions'))

Upon closer examination, a minor syntax adjustment can be made:

.pipe(autoprefixer('last 2 version'))

Furthermore, I have achieved positive results by directing the compiled sass to the specified destination and then implementing autoprefixer.

.pipe(sass())
.pipe(gulp.dest(''))
.pipe(autoprefixer())

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

Modify the button's text with jQuery after it has been clicked

I've been struggling to update the text of a button after it's clicked, and I'm encountering an issue where it works in one part of my code but not in another. Could someone please guide me on what might be missing in my code? The first bl ...

Creating a unique look for unordered list items in a dropdown navigation

I'm currently working on creating a drop-down menu using nested unordered lists. The functionality of the menu is all set, but I'm running into some styling issues. The main link that triggers the drop-down should have a blue background with whit ...

Could really use a hand getting this card grid to be more responsive

Recently, I delved into using HTML & CSS for work. However, I encountered a major hurdle: creating responsive Grid card elements. I have four card elements in a column, each with text that increases opacity when hovering over the card. When viewed on a t ...

The best way to organize and position a Label and TextBox in C#

I need help styling the aspx file. The Label and TextBox elements are not aligned properly. I want the Label and TextBox to be positioned side by side with appropriate spacing. <div class="col-md-12"> <p> ...

SleekScroll, SafariAssist, and Adaptive Navigation

I have a few queries regarding this side here Is there a way to implement smooth scrolling? I've experimented with different options, but removing the .slim from jquery breaks the dropdown functionality. How can I resolve this issue? I encounter ...

Creating a fixed sidebar in Bootstrap 3 that spans the full width of the column

I'm working with two columns - col-md-8 and col-md-4. In the second column, I have a fixed sidebar that I want to be 100% width of the col-md-4 column. The black box in the image below represents the second column. Despite trying setting the width to ...

Ways to restrict input text to a specific set of values

When using an input text form, I need to ensure that users only insert values ranging from 1 to 10. However, my attempts to utilize a mask for customization have resulted in allowing values higher than 10. How can I restrict the input to only be allowed b ...

How can I make an image disappear after animation with CSS?

I experimented with this code snippet in an attempt to fade out an image, .splash-wrapper { animation: fadeIn 4s; -webkit-animation: fadeIn 4s; -moz-animation: fadeIn 4s; -o-animation: fadeIn 4s; -ms-animation: fadeIn 4s; animation-duration: ...

Menu with option to delete next to each selection item

My task is to create a drop-down menu with a delete 'X' option next to each item. This functionality should work even when the drop-down is dynamically populated, without resorting to using a list as an alternative. UPDATE: The icons next to eac ...

Control input for filtering and searching using Bootstrap

My goal is to create a search and filter user input field. I found an example on an old bootstrap page that showcases exactly what I need, but I'm facing some issues with displaying the results. Here's the Bootstrap example page. The search bar ...

Change the size of a custom cursor on click using React

I have customized the cursor on my react app, but I want to make it animate when the user clicks. Perhaps by decreasing its size or some other effect. The cursor is within a component that I've included in my Index.js file. I am unsure how to create a ...

CSS Trick: How to Clear Content in a 3-Column Div arrangement

I've been struggling to clear the content below my three div columns, each consisting of a span with centered text and a textarea. It seems that the issue arises from the floating div tags without proper clearing. When viewed in Firefox, the next ele ...

Tips for arranging five images side-by-side in a row

I have a collection of 5 images: Image 1: Image 2: Image 3: Image 4: Image 5: The dimensions of each image are as follows: Image 1: 70x40 Image 2: 80x42 Image 3: 90x44 Image 4: 100x46 Image 5: 120x48 I would like to arrange these images ...

An HTML table featuring rows of input boxes that collapse when the default value is not filled in

My table is populated with dynamic rows of input boxes, some of which may have a default value while others return an empty string ''. This causes the table to collapse on those inputs. <tr *ngFor="let d of displayData"> < ...

AmCharts Axis renderer mistakenly renders an additional grid line

I have successfully created a basic XYChart using amcharts4. To get rid of the grid lines on the x-axis, I changed the stroke opacity for the x-axis grid to 0 using the following code: xAxis.renderer.grid.template.strokeOpacity = 0; Everything was workin ...

The sequence of HTML5 DragDrop Enter and Leave events occur consecutively

I am encountering a problem with a simple drag & drop effect where the class name is changed when the drag enters or leaves, resulting in continuous entering and leaving. Take a look at this basic HTML code: <div class="box"> <div cla ...

What is the best method for displaying the toggle button for Drawer/Sidebar above the main content and appbar?

After reviewing Vatsal's suggestion, it appears that moving the toggle button above the drawer is the solution to our main issue. By taking advantage of the open state of the drawer, we can adjust the left property of the button in the toggleButton cl ...

I'm having trouble grasping the concept of serving gzip-compressed JavaScript and CSS files

Why is it important to serve compressed JavaScript and CSS files? I understand that it reduces file size, but does the browser/webserver have to decompress them to read them? It's been mentioned that the webserver handles the compression. Does this me ...

Node.js route error: no script MIME types allowed with 'X-Content-Type: nosniff' header present

I'm facing an issue where my css and js files do not load on the second route, but they work perfectly fine on the first route. Could someone explain why this discrepancy occurs? // ********************** INDEX PAGE ******************************* ...

Persistent change issue with JQuery CSS function

Looking for some help with a button-bar div that I want to display only after the user clicks on a "settings" button. Currently, I have set the button-bar div to have a display:none property in my css file. However, when the settings button is clicked, t ...