Сборка Gulp c prefix?

Question

[sashavol]

Добрый день и наступающим всех!

Очень долго мучает вопрос, он не критический, но облегчил бы жизнь очень сильно, сколько не пробовал прибавить в своей сборке autoprefixer не получилось.

UPD.: Кстати на гранте все нормально.

Вот мой gulpfile:

"use sctrict";

var gulp = require("gulp"),
		connect = require("gulp-connect"),
    less = require('gulp-less'), 
		opn = require("opn");

// Запускаем локальный сервер
gulp.task('connect', function() {
  connect.server({
    root: 'app',
    livereload: true,
    port: 8888
  });
  opn('http://localhost:8888');
});

//LESS compiler
gulp.task('less', function () {
  gulp.src('app/less/*.less')
    .pipe(less())
    .pipe(gulp.dest('app/css/'));
});

// Работа с HTML
gulp.task('html', function () {
  gulp.src('app/*.html')
    .pipe(connect.reload());
});

// Работа с CSS
gulp.task('css', function () {
  gulp.src('app/css/*.css')    
    .pipe(connect.reload());
});

// Работа с JS
gulp.task('js', function () {
  gulp.src('app/js/*.js')
    .pipe(connect.reload());
});

// Слежка
gulp.task('watch', function () {
  gulp.watch(['app/*.html'], ['html']);
  gulp.watch(['app/js/*.js'], ['js']);
  gulp.watch(['app/css/*.css'], ['css']);
  gulp.watch(['app/less/*.less'], ['less']);
});

// Задача по-умолчанию
gulp.task('default', ['connect', 'watch']);

Answer 1

[Дмитрий Королёв]

Первый вариант: gulp-autoprefixer. Пример внедрения - https://github.com/MUSTdigital/md-base/blob/master...

Второй вариант - тот же autoprefixer, но уже через PostCSS. Пример - https://github.com/ApatheticG/breakpoint-less/blob...

Не совсем понятно, у вас билд-таска в принципе нет? Внедрение префиксов обычно нужно уже на этом этапе, делать его каждый раз при компиляции LESS нецелесообразно. Но если очень хочется, то ваш галпфайл может выглядеть, например, так: https://gist.github.com/ApatheticG/b830a0b11c4e42d7f616
Добавлено только две строки. И не забудьте установить gulp-autoprefixer.

Comments

[sashavol]

спасибо за ответ и с новым годом)

Увы даже первый проект после установки через консоль и всех модулей, не дал результатов, я имею ввиду этот префиксер, компилирует less без префиксов, но за то что есть большая сборка миксинов со всем префиксами.

Вариант прибавить просто и установить autoprefixer не помог. С less этот видимо не так сильно просто и очевидно делается.

[Дмитрий Королёв]

sashavol: less не имеет никакого отношения к autoprefixer от слова "вообще". При чём тут препроцессор? Вы знаете, как работает галп? Как вообще работают сборщики? Препроцессор в потоке создаёт файл готовый CSS, который, в свою очередь, обрабатывается PostCSS, в частности, плагином к нему Autoprefixer. И этому PostCSS абсолютно плевать, кто или что ему этот CSS подготавливает, будь это LESS, SCSS, Stylus или ваши руки в Блокноте.

Здесь никто не умеет гадать по кофейной гуще. Покажите, что вы делали и как.

[sashavol]

Дмитрий Королёв: я устанавливал по первой ссылке проект, который на выходе дает .css без префиксов с любыми параметрами ie и last browser.

И ваш код тем более не работал, т.к. autoprefixer обрабатывает css а не less, поэтому его надо было ставить в таске с css, в целом у меня складывается впечатление что, что-то не установлено по дефолту-глобально

И да, я не знаю как все работает)

[Дмитрий Королёв]

sashavol: > autoprefixer обрабатывает css а не less
Еще раз. Gulp работает в потоке. В том месте, где я добавил вторую строку, autoprefixer получает уже готовый CSS. И да, разумеется, нужно доустановить: |npm install --save-dev gulp-autoprefixer".

[Дмитрий Королёв]

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;
}

[Дмитрий Королёв]

sashavol: перед запуском "gulp less", установил все пять нужных модулей: "npm install --save-dev gulp gulp-autoprefixer gulp-connect gulp-less opn"

[sashavol]

Дмитрий Королёв: все работает, действительно, все из за 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;

Придется миксины использовать

[Дмитрий Королёв]

sashavol: а теперь краткий ликбез о том, как работает Autoprefixer: он добавляет фоллбеки только там, где это необходимо. Opacity? Серьезно?

[Дмитрий Королёв]

/* IE 5-7 */
filter: alpha(opacity=50);

/* Netscape */
-moz-opacity: 0.5;

/* Safari 1.x */
-khtml-opacity: 0.5;

Вот это не просто устарело, это безбожно устарело. Уже практически никто не пользуется теми браузерами, в которых это нужно. И уж совершенно точно, что те, кто ими пользуется, не входит в вашу аудиторию. Они ни в какую аудиторию не входят. IE8 тоже на хрен надо слать, на самом деле, и оптимизировать под него верстку только в одном случае - если за это платят.

[sashavol]

Дмитрий Королёв: вы правы на счет устаревших префиксов, для повседневных сборок стандартных сайтов, они вряд ли будут востребованы