Вход

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

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

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

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

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

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

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

1
node -v
1
npm -v

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

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

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

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

 

Через IDE PHP STORM

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

1
npm install less
Установка less через npm в PHP STORM
Установка less через npm в PHP STORM

 

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


 

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

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

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

 

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!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

Компилятор Less Koala
Компилятор Less Koala

 

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

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

1
2
3
4
5
6
7
8
9
10
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

1
npm init

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

1
npm i --save-dev less gulp

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

1
2
3
4
5
6
7
8
9
10
/*
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 с кодом:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
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']);

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

1
gulp

10 января 2018 /

3349 Views /

0 Comment
Ilya Web developer
Author

«Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете.»Martin Golding

Отправить ответ

Please Login to comment
  Получать уведомления о новых комментариях  
Уведомлять