JSFiddle - React, Tailwind, and code Playground
JavaScript
var gulp = require("gulp"); //подключаем сам gulp
var less = require("gulp-less"); //подключаем less
var plumber = require("gulp-plumber"); //подключаем плагин не дающий остановить ход исполнения команды при ошибке
var postcss = require("gulp-postcss");
var autpprefixer = require("autoprefixer"); //подключаем автопрефиксер
var server = require("browser-sync"); //подключаем браузер
var mqpacker = require("css-mqpacker"); //подключаем плагин объединяющий медиавыражения
var minify = require("gulp-csso"); //подключаем минификатор css
var rename = require("gulp-rename"); //подключаем плагин меняющий имя файла
var imagemin = require("gulp-imagemin"); //подключаем минификатор растровых изображений
var svgstore = require("gulp-svgstore");
var svgmin = require("gulp-svgmin"); //подключаем минификатор свг изображений
var run = require("run-sequence"); //плагин запускает команды поочередно(т.к нет синхронности)
var del = require("del"); // позволяет удалять файлы(для папки dist)
gulp.task("style", function() {
gulp.src("less/style.less") //читвет контент лежащий в файле style.less
.pipe(plumber()) //запрещает ошибкам останавливать ход исполнения команды
.pipe(less()) //компиляция в css
.pipe(postcss([
autpprefixer({
browsers: [ // автопрефиксер
"last 1 version",
"last 2 Chrome versions",
"last 2 Firefox versions",
"last 2 Opera versions",
"last 2 Edge versions"
]
}),
mqpacker({ //объединение медиавыраженией
sort: true
})
]))
.pipe(gulp.dest("dist/css")) //кладет скомпелированный из less файл в папку css
.pipe(minify()) //минифицируем css
.pipe(rename("style.min.css")) //переименовываем в style.min.css
.pipe(gulp.dest("dist/css")) // кладед неминифицированный css
.pipe(server.reload({
stream: true
}));
});
gulp.task("serve", function() { //выводим верстку в браузер, но перед этим запускается [style]
server.init({
server:...