Не работают gulp-autoprefixer?

Question

[Илья]

Добрый день!
Я только учусь, и у меня возникла ситуация, что при сборке проекта не работает autoprefixer.
Подскажите пожалуйста, какая информация от меня нужна для полного понимания ошибки?
const gulp = require("gulp");
const plumber = require("gulp-plumber");
const sourcemap = require("gulp-sourcemaps");
const less = require("gulp-less");
const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer");
const sync = require("browser-sync").create();

// Styles

const styles = () => {
return gulp.src("source/less/style.less")
.pipe(plumber())
.pipe(sourcemap.init())
.pipe(less())
.pipe(postcss([
autoprefixer()
]))
.pipe(sourcemap.write("."))
.pipe(gulp.dest("source/css"))
.pipe(sync.stream());
}

exports.styles = styles;

// Server

const server = (done) => {
sync.init({
server: {
baseDir: 'source'
},
cors: true,
notify: false,
ui: false,
});
done();
}

exports.server = server;

// Watcher

const watcher = () => {
gulp.watch("source/less/**/*.less", gulp.series("styles"));
gulp.watch("source/*.html").on("change", sync.reload);
}

exports.default = gulp.series(
styles, server, watcher
);

Comments

[DanielTonne]

Прикрепите код вашего gulpfule.js

[Ankhena]

А также настройки автопрефиксера и свойства, для которых он не сработал.

[Илья]

Ankhena, Добрый день! Не подскажете как я могу поместить в эту форму большой текст?

[Илья]

const gulp = require("gulp");
const plumber = require("gulp-plumber");
const sourcemap = require("gulp-sourcemaps");
const less = require("gulp-less");
const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer");
const sync = require("browser-sync").create();

// Styles

const styles = () => {
return gulp.src("source/less/style.less")
.pipe(plumber())
.pipe(sourcemap.init())
.pipe(less())
.pipe(postcss([
autoprefixer()
]))
.pipe(sourcemap.write("."))
.pipe(gulp.dest("source/css"))
.pipe(sync.stream());
}

exports.styles = styles;

// Server

const server = (done) => {
sync.init({
server: {
baseDir: 'source'
},
cors: true,
notify: false,
ui: false,
});
done();
}

exports.server = server;

// Watcher

const watcher = () => {
gulp.watch("source/less/**/*.less", gulp.series("styles"));
gulp.watch("source/*.html").on("change", sync.reload);
}

exports.default = gulp.series(
styles, server, watcher
);

[Илья]

Ankhena,
const gulp = require("gulp");
const plumber = require("gulp-plumber");
const sourcemap = require("gulp-sourcemaps");
const less = require("gulp-less");
const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer");
const sync = require("browser-sync").create();

// Styles

const styles = () => {
return gulp.src("source/less/style.less")
.pipe(plumber())
.pipe(sourcemap.init())
.pipe(less())
.pipe(postcss([
autoprefixer()
]))
.pipe(sourcemap.write("."))
.pipe(gulp.dest("source/css"))
.pipe(sync.stream());
}

exports.styles = styles;

// Server

const server = (done) => {
sync.init({
server: {
baseDir: 'source'
},
cors: true,
notify: false,
ui: false,
});
done();
}

exports.server = server;

// Watcher

const watcher = () => {
gulp.watch("source/less/**/*.less", gulp.series("styles"));
gulp.watch("source/*.html").on("change", sync.reload);
}

exports.default = gulp.series(
styles, server, watcher
);

[Ankhena]

sun7, для вставки кода есть специальная кнопочка, оборачивающая его в специальные теги <code></code>
Большой код можно убирать в спойлеры. Тоже есть кнопочка.
Обратите внимание на панельку редактора...

[Илья]

Ankhena, Как то пробовал выслать реестр ошибок) обернув его в . Отправить не получилось. Система написала, большой текст

[Илья]

Ankhena, Извиняюсь
Как то пробовал выслать реестр ошибок) обернув его в "Спойлер" Отправить не получилось. Система написала, большой текст

[Ankhena]

sun7, полно разнообразных песочниц для кода.

Ладно, ответы на мои опросы будут?

[Илья]

Ankhena, Извините, что долго. Не подскажете, где их найти)?
На компьютере с которого пиши нет Node

[Илья]

DanielTonne,
const gulp = require("gulp");
const plumber = require("gulp-plumber");
const sourcemap = require("gulp-sourcemaps");
const less = require("gulp-less");
const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer");
const sync = require("browser-sync").create();

// Styles

const styles = () => {
return gulp.src("source/less/style.less")
.pipe(plumber())
.pipe(sourcemap.init())
.pipe(less())
.pipe(postcss([
autoprefixer()
]))
.pipe(sourcemap.write("."))
.pipe(gulp.dest("source/css"))
.pipe(sync.stream());
}

exports.styles = styles;

// Server

const server = (done) => {
sync.init({
server: {
baseDir: 'source'
},
cors: true,
notify: false,
ui: false,
});
done();
}

exports.server = server;

// Watcher

const watcher = () => {
gulp.watch("source/less/**/*.less", gulp.series("styles"));
gulp.watch("source/*.html").on("change", sync.reload);
}

exports.default = gulp.series(
styles, server, watcher
);

[Ankhena]

sun7,

Не подскажете, где их найти)?

Там где вы их написали - это про настройки версий браузеров.
Например, в package.json
Что-то типа:

"browserslist": [
    "last 2 versions",
    "not dead",
    "not ie <= 11"
  ],

А свойства, для которых не срабатывает просто перечислите.

[Илья]

Ankhena,
Я их не писал. Получил обновление от Академии.
Смогу выслать вечером

[Ankhena]

sun7, короче, открываете https://autoprefixer.github.io/ru/
Ставите версии, как у вас в настройках.
Проверяете нужные вам свойства.

[Илья]

Ankhena, Анна, не Вы были у меня наставником на первом уровне в Академии?)

[Ankhena]

sun7, даже интересно, как по нику sun7 я могла бы это определить? ;)
Это скорее со мной всё понятно.

[Илья]

Ankhena, Действительно, всё зашифровано)
Илья, пару лет назад проходил первый уровень в Академии. Но к сожалению не защитился(

[Ankhena]

Илья, у вас в интерфейсе Академии могло сохранится имя наставника с его профилями и оно же должно быть написано в readme репозитория.

[Ankhena]

Илья, у вас в интерфейсе Академии могло сохранится имя наставника с его профилями и оно же должно быть написано в readme репозитория.

[Илья]

Ankhena,
Спасибо за подсказку!
"browserslist": [
"last 2 versions",
"not dead",
"not ie <= 11"
],
такие настройки есть. А ещё в галп файле const autoprefixer = require("...autoprefixer"); там где ... ,при наведении на них, есть запись

Не удалось найти файл объявления модуля "autoprefixer". "C:/Users/up/Desktop/Sedona/1307571-sedona-21/node_modules/autoprefixer/lib/autoprefixer.js" имеет неявный тип "any".
Попробуйте использовать команду "npm i --save-dev @types/autoprefixer", если он существует, или добавьте новый файл объявления (.d.ts), содержащий "declare module 'autoprefixer';".ts(7016)

тут https://autoprefixer.github.io/ru/ префиксы, по моим версиям, стоят везде
а у меня нигде

[Ankhena]

Илья, 21 поток был 1,5 года назад.
Я бы начала с удаления папки node-modules и заново npm i. Этот способ будет самым простым для вас.
Хорошо бы знать, что нет конфликтов в версиях node.js
Например, у вас в зависимостях 13 нода. А актуальная 16. Какая стоит у вас неизвестно. Проверьте.

И можно сравнить ваши файлы автоматизации и теми, что в материалах к курсу.

[Ankhena]

Илья, Если стоит 14+ и в зависимостях поменять на "^14.x", то все заработает.
Попробовала на вашем коде из последней ветки.

[Илья]

Да, пробую сам наверстывать. Хорошо, что есть люди у кого спросить можно!
node-modules удалял, и заново всё устанавливал.
На курсе была речь про node.js 14.х, у меня стоит виндовс семерка, и пришлось 13.х устанавливать. А как узнать есть ли конфликты версий?

[Илья]

Ankhena,
А, то, что эту ошибку выдает?

Не удалось найти файл объявления модуля "autoprefixer". "C:/Users/up/Desktop/Sedona/1307571-sedona-21/node_modules/autoprefixer/lib/autoprefixer.js" имеет неявный тип "any".
Попробуйте использовать команду "npm i --save-dev @types/autoprefixer", если он существует, или добавьте новый файл объявления (.d.ts), содержащий "declare module 'autoprefixer';".ts(7016)

[Ankhena]

Илья, ну можете делать то, что рекомендуется в этой ошибке. И дальше по обстоятельствам следующих сообщений.
Я написала то, что для вас, на мой взгляд, будет проще.

[Илья]

Ankhena,
если я в зависимостях
"engines": {
"node": "14.15.0"
}
поменяю версию node на версию node которая у меня стоит(13.х), потом сделаю npm i, зависимости установятся для моей версии, потом npm run duild. соберутся стили, и появятся префиксы, я правильно понял?
Стараюсь разобраться. Спасибо Вам за ответы!)

[Ankhena]

Илья, разумнее обновить node до актуальной.

[Илья]

Ankhena, у меня 7 стоит, а она не дает установить версии node выше 13.х.. Если я правильно Вас понимаю?

[Ankhena]

Илья,

у меня 7 стоит

Ладно, развлекайтесь с 13 :)

[Илья]

Ankhena, Анна, можно спросить? версии зависимостей которые дали в академии, они для 14.х версии node. Они для 13.х, не подойдут? Нужно искать версии для 13.х?

[Ankhena]

Илья, да, это возможно.

Answer 1

[Сергей delphinpro]

Включу телепата и предположу, что вы оставили настройки автопрефиксера по умолчанию и сейчас не видите на выходе префиксов для свойств, которым они уже давно не нужны. Например -webkit-border-radius.
Это не значит, что автопрефиксер не работает. Он на то и авто, что добавляет только актуальные префиксы, а ненужные удаляет.

Comments

[Илья]

А, для гридов префиксы не нужны?
Во время лекции у лектора префиксы появились везде

[Сергей delphinpro]

sun7, Нет https://caniuse.com/css-grid
Только для старой версии, которая была реализована в IE

[Илья]

Сергей delphinpro, Понятно. Спасибо!