Установка препроцессора LESS

Препроцессоры существенно упрощают написание css стилей, позволяют избавить от избыточности и превращают привычный нам css в полноценный язык программирования. В данной статье мы рассмотрим как производится установка препроцессора Less.

Официальный сайт LESS

Для работы нам потребуется NODE.JS и пакетный менеджер npm

Установка NODE.JS и NPM

Первым делом нам необходимо скачать NODE.JS с официального сайта https://nodejs.org/
Чтобы проверить всё ли мы правильно установили, откроем терминал и введём две команды:

node -v

npm -v

Данные команды выводят версию node.js и npm

Способы компиляции LESS

Есть несколько способов как можно компилировать less:

Через IDE (например PHP STORM)
Запуск через терминал
Подключение в HTML файле
Специальные программы (Koala)
NODE.JS
Компиляция через GULP

Через IDE PHP STORM

Если вы работаете в IDE PHP STORM, то создайте новый проект, откройте терминал программы и напишите данную команду в нем.

1	npm install less

Чтобы установить компиляцию Less в PHP STROM необходимо выполнить следующие действия:

Компиляция через Терминал

Данный способ неудобен постоянной подачей команды на компиляцию, что существенно замедляет разработку.

// Данной командой мы устанавливаем пакет less глобально
npm i -g less
 
// Команда для компиляции в файл css (перед файлом less необходимо указать путь от корня)
lessc ./style.less new_style.css

Компиляция через HTML файл

Неудобство данного способа в подключении избыточного файла less.js.

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
        <script src="less.js" type="text/javascript"></script>
 
        <!--Для IDE PHP STORM-->
        <script src="node_modules/less/dist/less.js" type="text/javascript"></script>
        <title>Document</title>
</head>
<body>
 
</body>
</html>

Компиляция через программу Koala

Koala является одним из самых простых и удобных способов компиляции Less файлов. Кроме Less данная программа поддерживает ещё и Sass. Koala реализована под Windows, Mac, Linux и является бесплатной.

Компиляция происходит в режиме реального времени (вам не нужно подавать никакие команды). Не мало важной особенностью данной программы является настройка компрессии.

Официальный сайт Koala

Компиляция через NODE.JS

Создаём файл fileconpile.js:

var less = require('less');
var fs = require('fs');
 
var lessContent = fs.readFileSync('style.less', {encoding : 'utf-8'});
 
less.render(lessContent, function(err, output){
    if(err) throw new Error(err);
 
    fs.writeFileSync('rez_style.css', output.css);
});

Теперь в терминале вызовем наш файл:

1	node fileconpile.js

Компиляция через GULP

Создаём файл зависимостей packege.json

npm init

Установка пакетов less gulp без сохранения на продакшене

1	npm i --save-dev less gulp

Установка дополнительный пакетов

/*
gulp-less - преобразует less в css,
gulp-concat - сборка одного css из файлов less,
gulp-autoprefixer - добавление автопрефиксов,
gilp-sourcemaps - отслеживание позиции изменений less файла
gulp-clean-css - минификация css
browser-sync - синхронизация 
*/
 
npm i --save-dev gulp-less gulp-concat gulp-autoprefixer gilp-sourcemaps gulp-clean-css browser-sync

Создаём файл gulp.js с кодом:

var gulp = require('gulp');
var less = require('gulp-less'); (преобразуем все файлы less в css)
var autoprefixer = require('gulp-autoprefixer'); (автоматическое добавление префиксов для разных браузеров)
var concat = require('gulp-concat'); (все файлы less, данного проекта, сохраняем в один файл rezstyle.css)
var sourcemaps = require('gulp-sourcemaps'); (отслеживание позиции изменения less файла)
var cleancss = require('gulp-clean-css'); (сжатие css файла)
var browsersync = require('browser-sync').create(); (автоматическое обновление)
 
var config = {
	paths:{
		less: './lessfiles/**/*.less', // путь к файлам less
		html: './index.html' // путь к index.html
	}
	output:{
		cssname: 'rezstyle.css', // все файлы less, данного проекта, сохраняем в один файл rezstyle.css
		path: 'css' // путь к файлу css
	}
};
 
gulp.task('less', function(){
	// получаем все файлы less, инициализируем sourcemaps, компилируем less в css, объединение всех less в rezstyle.css, добавление автопрефиксов, минификация css, куда сохранять результат, синхронизация
 
	return gulp.src(config.paths.less).pipe(sourcemaps.init()).pipe(less()).pipe(concat(config.output.cssname)).pipe(autoprefixer()).pipe(cleancss()).pipe(sourcemaps.write()).pipe(gulp.dest(config.output.path)).pipe(browsersync.stream());
});
 
gulp.task('serve', function(){
	browsersync.init({
		server: {
			basedir: config.output.path
		}
	});
 
	// смотреть за файлами всеми less
	gulp.watch(config.paths.less, ['less']);
 
	gulp.watch(config.paths.html).on('change', browsersync.reload);
});
 
// запуск функций less и serve
gulp.task('default', ['less', 'serve']);

Подаём команду в терминале