Как настроить gulp-autoprefixer, куда пропал параметр настройки browsers?

Question

[MyQuestion]

Только начинаю осваивать gulp. Смотрю примеры использования, дошёл до autoprefixer и везде используется параметр browsers[' ']. Сейчас на github в примере использования только параметр "cascade: false". В коде browsers['> 0.2% '] или к примеру "last 7 versions" тоже не отработает.
Документацию мне пока что тяжеловато читать. Например нашёл параметр browserslist [], но не совсем понимаю где и как его использовать, в описание говориться, что это параметр для package.json.

Answer 1

[Just Me]

gulpfile.js

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

function scssTask(){    					
	return src(files.scssPath)					
		.pipe(sourcemaps.init()) 					
		.pipe(sass()) 					
		.pipe(autoprefixer())		
		.pipe(sourcemaps.write('.')) 					
		.pipe(dest('public/css')					
	); 					
}

package.json

"main": "gulpfile.js",
  "browserslist": [
    "last 2 version",
    "> 1%",
    "maintained node versions",
    "not dead"
  ],
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },

детали

Comments

[MyQuestion]

Т.е. теперь всё регулируется в package.json? Старый вариант устарел и не работает, так?
А cascade: false что даёт? Он всё же рекомендован к использованию на главной странице модуля.

[Just Me]

Т.е. теперь всё регулируется в package.json? Старый вариант устарел и не работает, так?

да

А cascade: false что даёт? Он всё же рекомендован к использованию на главной странице модуля

Просто разный вариант вывода в css файл.

[Just Me]

MyQuestion, проверь у себя, если работает ( я рабочий вариант тебе дал ) - отметь ответ решением, чтобы другие тоже видели

[MyQuestion]

Just Me,
В функции scssTask все пайпы должны быть возвращены? К примеру у меня не установлен sass, тоже будет работать?
В package.json "main": "lib/autoprefixer", добавить вместо "main": "lib/autoprefixer", ?
Имеется ввиду package.json который лежит в модуле автопрефикса?

function styles(){

	return gulp.src(cssFiles)
				.pipe(concat('all.css'))
				.pipe(autoprefixer())
				.pipe(gulp.dest('./dest/css'));

}

Я так понимаю, такой вариант навряд ли отработает

[Сергей delphinpro]

Там в документации все написано.
Для унификации вынесли эти настройки отдельно. Вы можете задать либо в package.json, либо в файле .browserlistrc (как-то так, не помню точное название).
Причина в том, что эти же настройки могут использоваться другими пакетами, например babel, и удобно прописывать их в одном месте, а не параметрами к вызовам разных плагинов.

[Сергей delphinpro]

MyQuestion,

А cascade: false что даёт?

Дак там все и написано =) В край можно быстро проверить.
Этот параметр регулирует форматирование свойств с вендорными префиксами.
true:

{
       -o-border-radius: 10px;
     -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

false:

{
  -o-border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

[Just Me]

К примеру у меня не установлен sass

я тебе дал кусок кода из моего файла. Если у тебя нет sass просто убери эту строчку

package.json "main"

там прописано имя твоего файла с gulp настройками. Обычно это gulpfile.js

Имеется ввиду package.json который лежит в модуле автопрефикса?

который лежит в директории, где и твой gulp файл

Я так понимаю, такой вариант навряд ли отработает

по куску кода не могу сказать

[Ellerow]

Just Me, вопрос не по теме, но всё же. Как вы подключаете normalize.css и подключаете ли вообще? А то как раз мучаюсь сейчас с этим.
И можете ли, пожалуйста, скинуть ваш gulfile.js. Я как раз сейчас занимаюсь его настройкой, мне бы очень пригодилось.

[Just Me]

Ellerow, если не использую бутстрап, то подключаю к sass. Примерная структура файлов такая:


все импортируются в main.scss

@charset 'UTF-8';

// 1. Configuration and helpers
@import
  'abstracts/variables',
  'abstracts/functions',
  'abstracts/mixins';

// 2. Vendors
@import
  'vendor/normalize';

// 3. Base stuff
@import
  'base/base',
  'base/fonts',
  'base/typography',
  'base/helpers';

//4. Layout-related sections
@import
  'layout/nav';

// 5. Components
@import
  'components/button',
  'components/preloader',
  'components/hamburger',
  'components/vertical-slider';

// 6. Page-specific styles
@import
  'pages/home',
  'pages/works',
  'pages/partners',
  'pages/order';

В бутсрапе сбрасывает стили файл reboot.css

Курс по gulp 4. Исходники под видео

[Ellerow]

Just Me, спасибо, помогли!
И еще вопрос, стоит ли использовать минификацию css и js? Или прирост производительности неощутим для небольших проектов?

[Just Me]

Ellerow, не обязательно. Но, если использую галп или вебпак, то я там прописываю минификацию. Лишней не будет.

Если используется большой css фреймворк типа бутсрапа или tailwindcss, то там также лучше использовать обрезку лишних css стилей. Хотя для бутстрапа, это не обязательно

[Ellerow]

Just Me, понял, спасибо за ответы

[MyQuestion]

который лежит в директории, где и твой gulp файл

А если у меня в корне лежит package-lock.json и нет почему-то package.json?
На данный момент мой код выглядит так:

const gulp = require('gulp');
const concat =  require('gulp-concat' );
const autoprefixer =  require('gulp-autoprefixer' );
cleanCSS =  require('gulp-clean-css');

const cssFiles = [
	'./node_modules/normalize.css/normalize.css',
	'./src/css/some.css',
	'./src/css/other.css'	
];

function styles(){

	return gulp.src(cssFiles)
				.pipe(concat('all.css'))
				.pipe(autoprefixer())
				.pipe(gulp.dest('./build/css'));

}

function script(){

	//return gulp.src('./src/js/')
				//.pipe(gulp.dest('./build/'))

}

gulp.task('styles', styles);

gulp.task('script', script);

[Just Me]

MyQuestion, а как ты инсталлируешь gulp и его плагины без package.json?

[Just Me]

MyQuestion, я выше оставил ссылку на курс галп 4. Пройди его и посмотри, как всё устанавливается

[Just Me]

MyQuestion, если тебе помогло, отметь ответ решением, чтобы другие видели тоже

[MyQuestion]

Just Me,
Кто бы знал ) Я не знаю что происходит ...
Вот так выглядит корень:

Видимо package-lock.json это от npm, в папке модуля gulp так же есть package.json. Его name ссылается на index.js ("main": "index.js",), gulpfile.js лежит в корне, куда был установлен npm, не заходя в node-modules. Получается, gulpfile.js должен лежать в папке gulp?

[MyQuestion]

Just Me,

если тебе помогло, отметь ответ решением, чтобы другие видели тоже

Хорошо, я думаю это рабочий вариант. К сожалению, на данном этапе не имею возможности проверить. Спасибо за помощь.

[Just Me]

MyQuestion, посмотри видео. Тут рассказывается, как оформить галп с нуля. В том числе, как создать package.json и загрузить плагины.

Знание языка не надо. Там всё показывают на экране.

Я использую шаблон оттуда

[Ellerow]

MyQuestion, в package.json модулей ничего не надо менять. Напиши в корне проекта npm init -y. Опять появится package.json.
А в функцию cssTask в gulpfile добавь .pipe(autoprefixer(['last 2 versions'])) - это работает

[MyQuestion]

Just Me, Ellerow,
Спасибо )

[mhtiragla]

Ellerow, так то работает, но как приписать правильно туда cascade: false?