• Шаблоны для вашего сайта
  • Сделать сайт
  • Реклама
  • Berry CSS
  • Albireo Framework
  • Бесплатный HTML-курс
  • Telegram-канал
  • Обратная связь
MaxSite.org
О создании сайтов и не только
Создание сайтов под ключ →
Вход
×
или зарегистрироваться

LESS-компиляция через Node.js и Grunt

CSS, HTML, LESS, SASSПросмотров: 12116Комментарии: 09 декабря 2015 г.

Смысл этой затеи в том, чтобы автоматизировать компиляцию less-файлов. Работать должно так: сохранили любой less-файл, сам запускается компилятор и на выходе получается готовый css-файл. Сейчас я расскажу про вариант, который может использоваться любым вебмастером, но самое главное, что он универсальный и подходит и для других целей, например компиляция SCSS.

Перед началом, давайте определимся с основными понятиями.

Всё будет работать на Node.js. Node.js — это интерпретатор JavaScript. То есть исходные/исполняемые файлы для Ноды — это js-файлы. По большому счёту, нам вообще всё-равно как там что работает. Для нас главное — установить Node.js на свой компьютер. Делается это очень просто — загружается msi-файл с официального сайта и устанавливаем как обычную windows-программу.

Сразу отдельное замечание о том, как обновлять Node.js. В теории он может обновить себя сам. На практике же, проще скачать новую версию и её установить. Тогда никаких проблем не возникает.

В комплекте Node.js есть т.н. пакетный менеджер npm. Он позволяет устанавливать, удалять, обновлять и т.п. модули Node.js. Модули или пакеты — это что-то вроде программ, ради которых всё это безобразие и затевалось. Например Grunt — это модуль для автоматизации различных задач.

Работать с Node.js придется командной строкой через консоль. Стандартная консоль Windows — вещь не для слабонервных, поэтому я рекомендую поставить альтернативную. Сам я пользуюсь conemu. Консоль годится не только для Node.js, но и для кучи других задач. Для удобства conemu можно добавить в панель Total Commander.

Проверить работу Node.js можно выполнив команду

node -v

— которая выводит свою версию.

Для less-компиляции нужно установить модуль less. Делается это командой:

npm install -g less

Эта команда выполняет установку (install) модуля «less». Ключ «-g» указывает выполнить установку глобально. Если не указывать этот ключ, то установка модуля будет осуществляться только в текущий каталог. Таким образом делается установка любого другого модуля. Node.js сам скачивает через Интернет нужные файлы.

У модуля могут быть свои плагины. Например у «less» есть плагин сжатия css «less-plugin-clean-css». Устанавливается он точно также:

npm install -g less-plugin-clean-css

После такой установки в консоли будет доступна команда lessc, которой и выполняется ручная компиляция less-файлов.

Модули могут использовать другие модули (пакеты). Причём каких-то определенных версий. Человеческий мозг не в состоянии охватить всё это великолепие взаимодействие, поэтому все эти зависимости прописываются в самих модулях разработчиками. Отсюда получается, что устанавливая какой-то модуль, будет автоматом установлен еще один, там еще и т.д. В итоге модулей может оказаться довольно прилично. Я об этом специально упоминаю, потому что требуемый модуль может весить 2МБ, а подтянет за собой ещё 20МБ.

Сложность ещё в том, что все требуемые модули располагаются в каталоге проекта. Ну например, less-компиляция. Если у нас 10 шаблонов, то придется настроить все 10 проектов в каждом каталоге шаблона. То есть к 200КБ less-файлов придется таскать по 20МБ node-файлов.

Как обхитрить это недоразумение, я расскажу ниже, пока же рассмотрим еще одну особенность работы с Node.js.

Для того, чтобы управлять пакетами в проекте (проект — по сути это просто рабочий каталог), используется специальный файл package.json. В нём задаются настройки проекта, включая и используемые модули. То есть перед тем, как запустить Node.js для проекта, нужно создать package.json. Вот пример файла, который мы будем использовать для Grunt:

{
   "author" : "author",
   "name" : "ProjectName",
   "version" : "1.0.0",

   "devDependencies" : {
      "grunt" : ">= 0.4",
      "grunt-cli" : ">= 0.1.6",
      "grunt-contrib-watch" : "~0.3.1",
      "grunt-contrib-less" : ">=0.12.0"
   }
}

Секция devDependencies как раз и указывает какие модули будет использовать проект.

Инсталяция/инициализация проекта выполняется командой:

npm install

После этого Node.js немного пошурстит и в результате появится каталог node_modules. Этот каталог (и package.json) можно просто копировать между одинаковыми проектами без инсталяций.

Теперь поговорим о Grunt.

Grunt используется для автоматизации самых разных задач. Там гиганское количество плагинов и я предлагаю просто пробежаться глазами, чтобы оценить всю мощь этого инструмента. Нас будут интересовать grunt-contrib-less, который выполняет задачу less-компиляции и grunt-contrib-watch, который отслеживает каталоги на изменения и запускает нужные задачи (в нашем случае less).

Установить Grunt можно такими командами:

npm install -g grunt-cli
npm install -g grunt-contrib-less --save-dev
npm install -g grunt-contrib-watch --save-dev

Настраивать Grunt в проекте нужно через файл Gruntfile.js. Для основы возьмем такой вариант:

module.exports = function(grunt) {
   grunt.initConfig({
      less: {
         development: {
            options: {
               compress: true,
               yuicompress: true,
               optimization: 2
            },
            files: {
               // target.css file: source.less file
               "css/main.css": "less/main.less"
            }
        }
   },
   watch: {
      styles: {
         files: ['less/**/*.less'], // which files to watch
         tasks: ['less'],
         options: {
            nospawn: true
         }
      }
   }
});

grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');

grunt.registerTask('default', ['watch']);
};

В секции watch в параметре files указывается маска (можно явно файл) для less-файлов в каталоге less. Все пути указываются относительно каталога проекта.

В секции less задаются непосредственно параметры компиляции. Здесь указан исходный и конечный файлы: less/main.less скомпилируется в css/main.css.

После этого запускаем Grunt командой:

grunt

Если не было ошибок, то появится что-то вроде этого

Running "watch" task Waiting...

Теперь изменим less/main.less и увидим сообщение

Completed in 2.752s at Wed Dec 09 2015 13:07:24 - Waiting...OK
File "less/main.less" changed.

То есть любые изменения в less, автоматом приводят к компиляции css-файла. Чтобы остановить отслеживание, нажмите Ctrl+C.

Когда у вас 1-2 проекта, то в принципе можно на node_modules не обращать особого внимания. Но, когда проектов десятки, да ещё и в разных местах, то это уже проблема. Чтобы обойти это безобразие я придумал небольшую хитрость. Дело в том, что Grunt позволяет одновременно отслеживать несколько каталогов и не обязательно в каталоге проекта.

Таким образом можно создать проект где-то совершенно отдельно (вообще пофиг где), а в задачи Grunt добавить пути к нужным нам less-каталогам (например шалоны MaxSite CMS). Делается это в Gruntfile.js так (показываю только изменные строчки):

less: {
	...
           files: {
               "d:/xampp/htdocs/cms/application/maxsite/templates/default/assets/css/style.css": "d:/xampp/htdocs/cms/application/maxsite/templates/default/assets/less/style.less",
 
               "d:/xampp/htdocs/cms/application/maxsite/templates/d2000/assets/css/style.css": "d:/xampp/htdocs/cms/application/maxsite/templates/d2000/assets/less/style.less"
            } 
	...
	
watch: { 
	...
        files: [
		'd:/xampp/htdocs/cms/application/maxsite/templates/default/assets/less/**/*.less',
		'd:/xampp/htdocs/cms/application/maxsite/templates/d2000/assets/less/**/*.less'
	],
...

— то есть здесь просто перечисляются каталоги и файлы с полными путями на диске. Если нужно добавить новый проект, то достаточно добавить две его строчки и заново запустить Grunt.

В conemu, кстати, есть пункт меню «Hide to TSA», который сворачивает консоль в иконку «к часикам» и не маячит на панели задач. Довольно удобно получается.


Создание сайтов (Украина) →
Примеры верстки с UniCSS.Builder
Создание сайта на github.io с помощью Landing Pages Framework
twitter.com facebook.com
Другие записи сайта
Новое интервью
Новое интервью
Использование SQLite в PHP
Использование SQLite в PHP
Какой язык программирования учить новичку
Какой язык программирования учить новичку
Отправка произвольной формы на AJAX без перезагрузки страницы
Отправка произвольной формы на AJAX без перезагрузки страницы
Лучшие программы для вебмастера
Лучшие программы для вебмастера
Обновление Albireo Framework (январь 2021)
Обновление Albireo Framework (январь 2021)
Оставьте комментарий!

Комментарий будет опубликован после проверки. Вы соглашаетесь с правилами сайта.

(обязательно)

Навигация
  • Шаблоны для MaxSite CMS 22
  • jQuery и JavaScript 6
  • Java и Android 5
  • PHP/ООП 25
  • SQL 17
  • Albireo Framework 11
  • Berry CSS 7
  • CSS, HTML, LESS, SASS 23
  • PHP 37
  • Тайм-менеджмент 9
  • Софт 37
  • SEO 13
  • Git. GitHub 3
  • CodeIgniter 5
  • Landing Page 3
  • Alpine.js 14
  • Фильмы 2
  • Дневник 55

Вот здесь можно заказать создание сайта, шаблона или лендинга. Также вы можете выбрать готовые шаблоны для MaxSite CMS по небольшой цене. Также можно купить отдельные модули, компоненты для вашего сайта.

MaxSite.org
Как создать свой сайт

Услуги по созданию сайтов, блогов, лендингов
Обратная связь • Реклама на сайте
Карта сайта
Мои проекты
  • Шаблоны для вашего сайта
  • Заказать создание сайта
  • MaxSite CMS
  • Berry CSS (CSS Utilities)
  • Albireo Framework
  • UniCSS (Universal Atomic CSS)
  • Landing Page Framework
  • Бесплатные НТML-курсы
Ссылки
  • Telegram-канал
  • Github
  • Twitter
  • Telegram-бот
  • RSS
© MaxSite.org, 2006-2022. Работает на MaxSite CMS | Время: 0.3123 | SQL: 20 | Память: 4.61MB | Вход