question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to use browserlist with gulp and autoprefixer

See original GitHub issue

Hi,

After updating my gulp system, I get this message when I run it:

Replace Autoprefixer browsers option to Browserslist config.
  Use browserslist key in package.json or .browserslistrc file.

But I don’t find example to convert my actual code to work with these new practices. Here is my starting actual code in gulp.js file:

// Autoprefixer : Navigateurs à cibler pour le préfixage CSS
var AUTOPREFIXER = [

'> 1%',
'ie >= 8',
'edge >= 15',
'ie_mob >= 10',
'ff >= 45',
'chrome >= 45',
'safari >= 7',
'opera >= 23',
'ios >= 7',
'android >= 4',
'bb >= 10'
];

//Tableau pour utiliser les plugins de PostCSS
//https://webdesign.tutsplus.com/tutorials/postcss-quickstart-guide-gulp-setup--cms-24543
var processors = [
  autoprefixer(  {
                                browsers: AUTOPREFIXER,
                                cascade: false,
                                //activation du prefixage pour grid
                                grid: true
                            })
];

What do I need to change to get this work with browserlist now ?

Thanks

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:5
  • Comments:25 (9 by maintainers)

github_iconTop GitHub Comments

30reactions
aicommented, Jun 19, 2019

Open package.json and add:

  "browserslist": [
    "> 1%",
    "ie >= 8",
    "edge >= 15",
    "ie_mob >= 10",
    "ff >= 45",
    "chrome >= 45",
    "safari >= 7",
    "opera >= 23",
    "ios >= 7",
    "android >= 4",
    "bb >= 10"
  ]

Remove browsers: AUTOPREFIXER option and AUTOPREFIXER variable.

11reactions
aicommented, Jun 19, 2019

You can create .browserslistrc instead of editing package.json:

> 1%
ie >= 8
edge >= 15
ie_mob >= 10
ff >= 45
chrome >= 45
safari >= 7
opera >= 23
ios >= 7
android >= 4
bb >= 10
Read more comments on GitHub >

github_iconTop Results From Across the Web

How to use Browserlist with Gulp and Autoprefixer
First, we need install “Gulp-Browserlist” – which will make sure that when you start gluing any file from within NPM packages or locally ......
Read more >
Replace Autoprefixer browsers option to Browserslist
The problem will be in gulpfile.js . Look for autoprefixer() , this function will have some options passed as parameter.
Read more >
Move Autoprefixer browsers gulp-option to .browserslistrc file
Replace Autoprefixer browsers option to Browserslist config. Use browserslist key in package.json or .browserslistrc file. The browsers: option ...
Read more >
GettingStartedwithGulpSecondE...
Autoprefixer uses Browserslist, so you can specify the browsers you want to target in your project by queries like last 2 versions or...
Read more >
gulp-autoprefixer - npm
Prefix CSS. Latest version: 8.0.0, last published: 2 years ago. Start using gulp-autoprefixer in your project by running `npm i ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found