Как настроить gulp-autoprefixer, куда пропал параметр настройки browsers?
Т.е. теперь всё регулируется в package.json? Старый вариант устарел и не работает, так?
А cascade: false что даёт? Он всё же рекомендован к использованию на главной странице модуля
Just Me,
В функции scssTask все пайпы должны быть возвращены? К примеру у меня не установлен sass, тоже будет работать?
В package.json «main»: «lib/autoprefixer», добавить вместо «main»: «lib/autoprefixer», ?
Имеется ввиду package.json который лежит в модуле автопрефикса?
Я так понимаю, такой вариант навряд ли отработает
Дак там все и написано =) В край можно быстро проверить.
Этот параметр регулирует форматирование свойств с вендорными префиксами.
true:
К примеру у меня не установлен sass
я тебе дал кусок кода из моего файла. Если у тебя нет sass просто убери эту строчку
там прописано имя твоего файла с gulp настройками. Обычно это gulpfile.js
Имеется ввиду package.json который лежит в модуле автопрефикса?
который лежит в директории, где и твой gulp файл
Я так понимаю, такой вариант навряд ли отработает
Источник
И снова.. Почему Gulp 4 не работает?
Подскажите, пожалуйста. Почему это не работает?
Может кто-то взять к себе и протестировать?
https://github.com/KononovD/kononovD.github.io/tre.
тут сам gulpfile.js и package.json
Ошибка следующая
[22:37:09] Using gulpfile
\Desktop\testGulp\gulpfile.js
[22:37:09] Starting ‘default’.
[22:37:09] Starting ‘build’.
[22:37:09] Starting ‘clean:build’.
[22:37:09] Finished ‘clean:build’ after 2.01 ms
[22:37:09] Starting ‘html:build’.
[22:37:09] Finished ‘html:build’ after 13 ms
[22:37:09] Starting ‘scss:build’.
[22:37:09] ‘scss:build’ errored after 4.53 ms
[22:37:09] TypeError: dest.on is not a function
at DestroyableTransform.Readable.pipe (C:\Users\я\Desktop\testGulp\node_modules\readable-stream\lib\_stream_readable.js:564:8)
at DestroyableTransform.pipe2 (C:\Users\я\Desktop\testGulp\node_modules\gulp-plumber\index.js:72:14)
at C:\Users\я\Desktop\testGulp\gulpfile.js:82:10
at taskWrapper (C:\Users\я\Desktop\testGulp\node_modules\undertaker\lib\set-task.js:13:15)
at bound (domain.js:395:14)
at runBound (domain.js:408:12)
at asyncRunner (C:\Users\я\Desktop\testGulp\node_modules\async-done\index.js:55:18)
at process._tickCallback (internal/process/next_tick.js:61:11)
[22:37:09] ‘build’ errored after 23 ms
[22:37:09] ‘default’ errored after 26 ms
Мне почему-то кажется, что все дело в автопрефиксере..
И еще может кто объяснить в чем разница 2х наблюдателей? Они в самом низу, первый (закомментированный) не просит модуль «gulp-warch», а 2й просит.. В чем разница?
Спасибо.
Источник
Сборка Gulp c prefix?
Добрый день и наступающим всех!
Очень долго мучает вопрос, он не критический, но облегчил бы жизнь очень сильно, сколько не пробовал прибавить в своей сборке autoprefixer не получилось.
UPD.: Кстати на гранте все нормально.
Вот мой gulpfile:
- Вопрос задан более трёх лет назад
- 354 просмотра
Второй вариант — тот же autoprefixer, но уже через PostCSS. Пример — https://github.com/ApatheticG/breakpoint-less/blob.
Не совсем понятно, у вас билд-таска в принципе нет? Внедрение префиксов обычно нужно уже на этом этапе, делать его каждый раз при компиляции LESS нецелесообразно. Но если очень хочется, то ваш галпфайл может выглядеть, например, так: https://gist.github.com/ApatheticG/b830a0b11c4e42d7f616
Добавлено только две строки. И не забудьте установить gulp-autoprefixer.
спасибо за ответ и с новым годом)
Увы даже первый проект после установки через консоль и всех модулей, не дал результатов, я имею ввиду этот префиксер, компилирует less без префиксов, но за то что есть большая сборка миксинов со всем префиксами.
Вариант прибавить просто и установить autoprefixer не помог. С less этот видимо не так сильно просто и очевидно делается.
sashavol: less не имеет никакого отношения к autoprefixer от слова «вообще». При чём тут препроцессор? Вы знаете, как работает галп? Как вообще работают сборщики? Препроцессор в потоке создаёт файл готовый CSS, который, в свою очередь, обрабатывается PostCSS, в частности, плагином к нему Autoprefixer. И этому PostCSS абсолютно плевать, кто или что ему этот CSS подготавливает, будь это LESS, SCSS, Stylus или ваши руки в Блокноте.
Здесь никто не умеет гадать по кофейной гуще. Покажите, что вы делали и как.
Дмитрий Королёв: я устанавливал по первой ссылке проект, который на выходе дает .css без префиксов с любыми параметрами ie и last browser.
И ваш код тем более не работал, т.к. autoprefixer обрабатывает css а не less, поэтому его надо было ставить в таске с css, в целом у меня складывается впечатление что, что-то не установлено по дефолту-глобально
И да, я не знаю как все работает)
sashavol: только что проверил ваш галп-файл со своими двумя добавленными строками.
body <
opacity: .5;
box-sizing: border-box;
transform: scale(.5);
display: flex;
>
вполне нормально превращается в
body <
opacity: .5;
box-sizing: border-box;
-webkit-transform: scale(0.5);
transform: scale(0.5);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
>
Дмитрий Королёв: все работает, действительно, все из за opacity, для этого:
/* IE 8 */
-ms-filter: «progid:DXImageTransform.Microsoft.Alpha(Opacity=50)»;
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity: 0.5;
/* Safari 1.x */
-khtml-opacity: 0.5;
/* Good browsers */
opacity: 0.5;
Придется миксины использовать
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity: 0.5;
/* Safari 1.x */
-khtml-opacity: 0.5;
Вот это не просто устарело, это безбожно устарело. Уже практически никто не пользуется теми браузерами, в которых это нужно. И уж совершенно точно, что те, кто ими пользуется, не входит в вашу аудиторию. Они ни в какую аудиторию не входят. IE8 тоже на хрен надо слать, на самом деле, и оптимизировать под него верстку только в одном случае — если за это платят.
Источник
Gulp autoprefixer не работает
Autoprefixer 
PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used in Twitter and Alibaba.
Write your CSS rules without vendor prefixes (in fact, forget about them entirely):
Autoprefixer will use the data based on current browser popularity and property support to apply prefixes for you. You can try the interactive demo of Autoprefixer.
Twitter account for news and releases: @autoprefixer.
Autoprefixer uses Browserslist, so you can specify the browsers you want to target in your project with queries like > 5% (see Best Practices).
The best way to provide browsers is a .browserslistrc file in your project root, or by adding a browserslist key to your package.json .
We recommend the use of these options over passing options to Autoprefixer so that the config can be shared with other tools such as babel-preset-env and Stylelint.
See Browserslist docs for queries, browser names, config format, and defaults.
Does Autoprefixer polyfill Grid Layout for IE?
Autoprefixer can be used to translate modern CSS Grid syntax into IE 10 and IE 11 syntax, but this polyfill will not work in 100% of cases. This is why it is disabled by default.
First, you need to enable Grid prefixes by using either the grid: «autoplace» option or the /* autoprefixer grid: autoplace */ control comment. Also you can use environment variable to enable Grid: AUTOPREFIXER_GRID=autoplace npm build .
Second, you need to test every fix with Grid in IE. It is not an enable and forget feature, but it is still very useful. Financial Times and Yandex use it in production.
Third, there is only very limited auto placement support. Read the Grid Autoplacement support in IE section for more details.
Fourth, if you are not using the autoplacement feature, the best way to use Autoprefixer is by using grid-template or grid-template-areas .
- The guide about Grids in IE and Autoprefixer.
- postcss-gap-properties to use new gap property instead of old grid-gap .
- postcss-grid-kiss has alternate “everything in one property” syntax, which makes using Autoprefixer’s Grid translations safer.
Does it add polyfills?
No. Autoprefixer only adds prefixes.
Most new CSS features will require client side JavaScript to handle a new behavior correctly.
Depending on what you consider to be a “polyfill”, you can take a look at some other tools and libraries. If you are just looking for syntax sugar, you might take a look at:
- postcss-preset-env is a plugins preset with polyfills and Autoprefixer to write future CSS today.
- Oldie, a PostCSS plugin that handles some IE hacks (opacity, rgba, etc).
- postcss-flexbugs-fixes, a PostCSS plugin to fix flexbox issues.
Why doesn’t Autoprefixer add prefixes to border-radius ?
Developers are often surprised by how few prefixes are required today. If Autoprefixer doesn’t add prefixes to your CSS, check if they’re still required on Can I Use.
Why does Autoprefixer use unprefixed properties in @-webkit-keyframes ?
Browser teams can remove some prefixes before others, so we try to use all combinations of prefixed/unprefixed values.
How to work with legacy -webkit- only code?
Autoprefixer needs unprefixed property to add prefixes. So if you only wrote -webkit-gradient without W3C’s gradient , Autoprefixer will not add other prefixes.
But PostCSS has plugins to convert CSS to unprefixed state. Use postcss-unprefix before Autoprefixer.
Does Autoprefixer add -epub- prefix?
No, Autoprefixer works only with browsers prefixes from Can I Use. But you can use postcss-epub for prefixing ePub3 properties.
Why doesn’t Autoprefixer transform generic font-family system-ui ?
system-ui is technically not a prefix and the transformation is not future-proof. You can use postcss-font-family-system-ui to transform system-ui to a practical font-family list.
In Gulp you can use gulp-postcss with autoprefixer npm package.
With gulp-postcss you also can combine Autoprefixer with other PostCSS plugins.
And create a postcss.config.js with:
The best way to use PostCSS with CSS-in-JS is astroturf . Add its loader to your webpack.config.js :
Then create postcss.config.js :
You can use the postcss-cli to run Autoprefixer from CLI:
See postcss -h for help.
Other Build Tools
- Grunt:grunt-postcss
- Ruby on Rails: autoprefixer-rails
- Neutrino: neutrino-middleware-postcss
- Jekyll: add autoprefixer-rails and jekyll-assets to Gemfile
- Brunch: postcss-brunch
- Broccoli: broccoli-postcss
- Middleman: middleman-autoprefixer
- Mincer: add autoprefixer npm package and enable it: environment.enable(‘autoprefixer’)
- Less: less-plugin-autoprefix
- Stylus: autoprefixer-stylus
- Compass: autoprefixer-rails#compass
You can use Autoprefixer with PostCSS in your Node.js application or if you want to develop an Autoprefixer plugin for a new environment.
There is also a standalone build for the browser or for a non-Node.js runtime.
You can use html-autoprefixer to process HTML with inlined CSS.
Text Editors and IDE
Autoprefixer should be used in assets build tools. Text editor plugins are not a good solution, because prefixes decrease code readability and you will need to change values in all prefixed properties.
I recommend you to learn how to use build tools like Parcel. They work much better and will open you a whole new world of useful plugins and automation.
If you can’t move to a build tool, you can use text editor plugins:
Autoprefixer uses the PostCSS warning API to warn about really important problems in your CSS:
- Old direction syntax in gradients.
- Old unprefixed display: box instead of display: flex by latest specification version.
You can get warnings from result.warnings() :
Every Autoprefixer runner should display these warnings.
Autoprefixer was designed to have no interface – it just works. If you need some browser specific hack just write a prefixed property after the unprefixed one.
If some prefixes were generated incorrectly, please create an issue on GitHub.
You can use these plugin options to control some of Autoprefixer’s features.
- grid: «autoplace» will enable -ms- prefixes for Grid Layout including some limited autoplacement support.
- supports: false will disable @supports parameters prefixing.
- flexbox: false will disable flexbox properties prefixing. Or flexbox: «no-2009» will add prefixes only for final and IE versions of specification.
- remove: false will disable cleaning outdated prefixes.
You should set them inside the plugin like so:
If you do not need Autoprefixer in some part of your CSS, you can use control comments to disable Autoprefixer.
There are three types of control comments:
- /* autoprefixer: (on|off) */ : enable/disable all Autoprefixer translations for the whole block both before and after the comment.
- /* autoprefixer: ignore next */ : disable Autoprefixer only for the next property or next rule selector or at-rule parameters (but not rule/at‑rule body).
- /* autoprefixer grid: (autoplace|no-autoplace|off) */ : control how Autoprefixer handles grid translations for the whole block:
- autoplace : enable grid translations with autoplacement support.
- no-autoplace : enable grid translations with autoplacement support disabled (alias for deprecated value on ).
- off : disable all grid translations.
You can also use comments recursively:
Note that comments that disable the whole block should not be featured in the same block twice:
Function autoprefixer(options) returns a new PostCSS plugin. See PostCSS API for plugin usage documentation.
Available options are:
- env (string): environment for Browserslist.
- cascade (boolean): should Autoprefixer use Visual Cascade, if CSS is uncompressed. Default: true
- add (boolean): should Autoprefixer add prefixes. Default is true .
- remove (boolean): should Autoprefixer [remove outdated] prefixes. Default is true .
- supports (boolean): should Autoprefixer add prefixes for @supports parameters. Default is true .
- flexbox (boolean|string): should Autoprefixer add prefixes for flexbox properties. With «no-2009» value Autoprefixer will add prefixes only for final and IE 10 versions of specification. Default is true .
- grid (false| «autoplace» | «no-autoplace» ): should Autoprefixer add IE 10-11 prefixes for Grid Layout properties?
- false (default): prevent Autoprefixer from outputting CSS Grid translations.
- «autoplace» : enable Autoprefixer grid translations and include autoplacement support. You can also use /* autoprefixer grid: autoplace */ in your CSS.
- «no-autoplace» : enable Autoprefixer grid translations but exclude autoplacement support. You can also use /* autoprefixer grid: no-autoplace */ in your CSS. (alias for the deprecated true value)
- stats (object): custom usage statistics for > 10% in my stats browsers query.
- overrideBrowserslist (array): list of queries for target browsers. Try to not use it. The best practice is to use .browserslistrc config or browserslist key in package.json to share target browsers with Babel, ESLint and Stylelint. See Browserslist docs for available queries and default value.
- ignoreUnknownVersions (boolean): do not raise error on unknown browser version in Browserslist config. Default is false .
Plugin object has info() method for debugging purpose.
You can use PostCSS processor to process several CSS files to increase performance.
- AUTOPREFIXER_GRID : ( autoplace | no-autoplace ) should Autoprefixer add IE 10-11 prefixes for Grid Layout properties?
- autoplace : enable Autoprefixer grid translations and include autoplacement support.
- no-autoplace : enable Autoprefixer grid translations but exclude autoplacement support.
Environment variables are useful, when you want to change Autoprefixer options but don’t have access to config files. Create React App is a good example of this.
Using environment variables to support CSS Grid prefixes in Create React App
- Install the latest version of Autoprefixer and cross-env:
- Under «browserslist» > «development» in the package.json file, add «last 1 ie version»
- Update «scripts» in the package.json file to the following:
Replace autoplace with no-autoplace in the above example if you prefer to disable Autoprefixer Grid autoplacement support.
Now when you run npm start you will see CSS Grid prefixes automatically being applied to your output CSS.
See also Browserslist environment variables for more examples on how to use environment variables in your project.
Grid Autoplacement support in IE
If the grid option is set to «autoplace» , limited autoplacement support is added to Autoprefixers grid translations. You can also use the /* autoprefixer grid: autoplace */ control comment or AUTOPREFIXER_GRID=autoplace npm build environment variable.
Autoprefixer will only autoplace grid cells if both grid-template-rows and grid-template-columns has been set. If grid-template or grid-template-areas has been set, Autoprefixer will use area based cell placement instead.
Autoprefixer supports autoplacement by using nth-child CSS selectors. It creates [number of columns] x [number of rows] nth-child selectors. For this reason Autoplacement is only supported within the explicit grid.
Beware of enabling autoplacement in old projects
Be careful about enabling autoplacement in any already established projects that have previously not used Autoprefixer’s grid autoplacement feature before.
If this was your html:
The following CSS will not work as expected with the autoplacement feature enabled:
Swapping the rules around will not fix the issue either:
One way to deal with this issue is to disable autoplacement in the grid-declaration rule:
The absolute best way to integrate autoplacement into already existing projects though is to leave autoplacement turned off by default and then use a control comment to enable it when needed. This method is far less likely to cause something on the site to break.
Note that the grid: «no-autoplace» setting and the /* autoprefixer grid: no-autoplace */ control comment share identical functionality to the grid: true setting and the /* autoprefixer grid: on */ control comment. There is no need to refactor old code to use no-autoplace in place of the old true and on statements.
Both columns and rows must be defined
Autoplacement only works inside the explicit grid. The columns and rows need to be defined so that Autoprefixer knows how many nth-child selectors to generate.
Repeat auto-fit and auto-fill are not supported
The repeat(auto-fit, . ) and repeat(auto-fill, . ) grid functionality relies on knowledge from the browser about screen dimensions and the number of available grid items for it to work properly. Autoprefixer does not have access to this information so unfortunately this little snippet will never be IE friendly.
No manual cell placement or column/row spans allowed inside an autoplacement grid
Elements must not be manually placed or given column/row spans inside an autoplacement grid. Only the most basic of autoplacement grids are supported. Grid cells can still be placed manually outside the the explicit grid though. Support for manually placing individual grid cells inside an explicit autoplacement grid is planned for a future release.
If manual cell placement is required, we recommend using grid-template or grid-template-areas instead:
Do not create ::before and ::after pseudo elements
Источник
