Автоматическая компиляция Less файлов с помощью Grunt

Тема в разделе "Веб разработка", создана пользователем Сергий, 17 янв 2016.

  1. Сергий

    Сергий Живет здесь

    Сообщения:
    57
    Симпатии:
    8
    Данная статья рассчитана для тех, кто уже знаком с html и css и хочет углубить свои знания.

    Уходят времена, когда веб разработчики задавали стили для сайтов на чистом css. Суровые времена, когда приходилось по нескольку раз задавать в стилях одни и те же параметры и значение. Дублируя неимоверное количество кода, который разрастаясь становилось все сложней контролировать, редактировать. Даже при наличии сопутствующих комментариев с течением времени, возвращаясь к css стилю приходилось подолгу вникать, что к чему.

    На сегодняшнее время все эти трудности позади. Так как существуют такие замечательные инструменты как препроцессоры. Наиболее популярные из них Less, Sass и Stylus. О первом из них и пойдет речь в данной статье.

    Less препроцессор как и многие другие препроцессоры компилирует процессорный CSS код в чистый, валидный CSS. Что это значит? Объясню на примитивном примере:

    Стиль без Less препроцессора:

    // Обратите внимание на вложенность классов
    .content {
    width: 960px;
    padding: 20px; // повторение 1
    background: #ebebeb; // повторение 2
    }

    .content article {
    padding: 20px; // повторение 1
    background: #fff;
    }

    .content article p {
    color: #ebebeb; // повторение 2
    }

    Стиль с Less препроцессором:

    @padding: 20px; // переменная
    @gray: #ebebeb; // переменная

    // Обратите внимание на вложенность классов
    .content {
    width: 960px;
    padding: @padding; // повторяющиеся значения
    background: @gray; // заменили переменные

    article {
    padding: @padding; // и тут
    background: #fff;

    p {
    color: @gray; // и здесь
    }

    }

    }

    Не правда удобно? Теперь код благодаря своей вложенности выглядит логически понятным. Так же если необходимо будет изменить повторяющиеся значения, не нужно будет это делать во всех всевозможных местах. Необходимо лишь изменить значения переменных и эти изменения автоматически при компиляции less в css файл подставятся куда нужно.

    Здесь я показал лишь самые скудные возможности Less препроцессора, так же существуют такие понятия как миксины, функции и многое другое, что выходят за рамки данной статьи.

    Довольно предисловия переходим непосредственно к сути статьи. А именно к автоматической компиляции Less файла в обычный CSS. Существуют несколько способов это сделать:

    1. Компиляция в браузере через less.js:

    Здесь подключается less.js файл следующим образом:


    <head>
    <script src="less.js"></script>
    </head>


    Плюсы данного способа в простоте развертке, т.е. достаточно указать путь до скаченного less.js файла и он уже непосредственно при обновлении страницы компилирует нам наш less стиль.

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

    2. Использование инструментов таких как: LiveReload, SimpLESS, CodeKit:

    Плюсы данного способа в простоте использования, не нужна командная строка. Установил и используешь.

    Минусы данного способа, меньше возможностей по сравнению с командной строкой.

    3. Использование Grunt, Gulp (командная строка или терминал):

    Плюсы данного подхода большое поле действия. Подходит для программистов и любящих вникать в команды и код.

    Минусы данного способа, нужно разбираться, а мне лень. :)

    В данной статье рассматривает 3-ий вариант. И так приступим.

    Шаг 1:

    Если у вас Windows:

    Заходим на сайт https://nodejs.org/en скачиваем и устанавливаем последнюю версию nodejs.

    Если у вас семейство Linux:

    sudo apt-get update

    sudo apt-get install nodejs

    sudo apt-get install npm

    Шаг 2:

    Если у вас Windows:

    Заходим в powershell, для этого жмем Ctrl+R, в появившемся окне «Выполнить» пишем powershell. Почему powershell, а не к примеру cmd? Потому что в cmd частенько не работают некоторые команды.

    Если у вас семейство Linux:

    Заходим в терминал, для этого жмем Ctrl+Alt+T.

    Шаг 3:

    Далее все манипуляции одинаковые.

    Создаем каталог (папку) для будущего нашего проекта. Заходим в него через командную строку или терминал. Например:

    cd c:/myproject

    Шаг 4:

    Инициализируем файл package.json (чтобы не вдаваться в дебри назовем этот шаг так).

    npm init

    Package.json – это конфигурационный файл в котором мы прописываем как называется наш проект, какой он версии, какие плагины мы используем в нем и т.п. Благодаря этому файлу, в будущем можно легко будет разворачивать другие подобные проекты.

    Далее будет предложен заполнить параметры. Можно просто пронажимать Enter, а можно вводить запрашиваемые параметры. Пишите как хотите. Главное при параметре ввода «entrypoint» введите package.json.

    Должно получиться, примерно следующее:

    {
    "name": "myproject",
    "version": "1.0.0",
    "description": "My first project",
    "main": "package.json",
    "author": "Serzh"
    }

    Шаг 5:

    Устанавливаем grunt.

    npm install grunt --save-dev

    Grunt — это мощный инструмент для сборки javascript проектов из командной строки. Так же он помогает автоматизировать рутинную работу в веб среде.

    Шаг 6:

    Устанавливаем нужные пакеты для grunt.

    npm install –g grunt-cli --save-dev

    npm install grunt-contrib-less --save-dev

    npm install grunt-contrib-watch --save-dev

    где:

    nmp - это пакетный менеджер node.js, через него мы устанавливаем все необходимые пакеты (плагины);

    –g– это флаг (ключ), означающий, что установку необходимо производить глобально;

    grunt-cli– пакет необходимый, чтобы запустить gruntиз консоли;

    grunt-contrib-less– пакет для работы с less;

    grunt-contrib-watch– пакет для отслеживание изменения в файлах;

    --save-dev– данный флаг (ключ) указывает, что нужно прописать в файле с нашими настройками проекта package.json используемые пакеты (плагины).

    После проделанных манипуляция файл package.jsonдолжен принять следующий вид:

    {
    "name": "myproject",
    "version": "1.0.0",
    "description": "My first project",
    "main": "package.json",
    "author": "Serzh"
    "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-cli": "^0.1.13",
    "grunt-contrib-less": "^1.1.0",
    "grunt-contrib-watch": "^0.6.1"
    }
    }

    При этом в папке с проектом должна появиться папка «node_modules» с необходимыми модулями.

    Небольшое отступление:

    Теперь при создании нового подобного проекта достаточно лишь скопировать файл package.json в каталог нового проекта и повторить Шаг 3, например:

    cd c:/myproject2

    И просто установить все прописанные в файле package.json пакеты, командой:

    npm install

    Шаг 7:

    Создадим файл Gruntfile.js со следующими настройками:

    module.exports = function(grunt) {
    grunt.initConfig({
    less: {
    development: {
    options: {
    compress: true,
    yuicompress: true,
    optimization: 2
    },

    files: {
    "css/style.css": "css/style.less"
    }
    }
    },

    watch: {
    styles: {
    files: ['css/style.less'],
    tasks: ['less'],
    options: {
    nospawn: true
    }
    }
    }
    });

    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default', ['watch']);

    };

    Gruntfile.js– это по сути конфигурационный файл grunt по которому он определяет, что ему делать и как работать.

    Значение кода Gruntfile.js выходит за рамки данной статьи, но вкратце скажу следующее:

    1. less: {…} – тут находится правило того как мы работаем с файлами, имеющими расширение *.less, параметры компиляции.

    Хочется выделить:
    • compress: true| false – компилировать код lessфайла в одну строку или как есть;
    • "css/style.css": "css/style.less" – здесь мы указываем первым файлом куда сохраняется скомпилированный текст, вторым файлом то, что мы собираемся компилировать.

    2. watch: {…} – тут находится правило того за изменением какого файла, какого расширения мы будем следить.

    Хочется выделить:
    • files: ['css/style.less'] – здесь указывается путь к файлу за которым мы следим, можно указывать с учетом маски, например: ['css/**/*.less'].

    Чтобы наш Gruntfile.js заработал, нужно чтобы каталог нашего проекта выглядел следующим образом:

    myproject (папка)
    css (папка)
    style.css
    style.less
    node_modules (папка)
    Gruntfile.js
    package.json
    index.html

    Шаг 8:

    Содержимое файла index.html:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>

    <body>
    <div class="content">
    <article>
    <p>Привет друг!</p>
    </article>
    </div>
    </body>
    </html>

    Содержимое файла style.css:

    @padding: 20px;
    @gray: #ebebeb;

    .content {
    width: 960px;
    padding: @padding;
    background: @gray;

    article {
    padding: @padding;
    background: #fff;

    p {
    color: @gray;
    }
    }
    }

    Шаг 8:

    Ну и наконец то долгожданное завершение, запускаем grunt.

    grunt

    Если мы все сделали правильно, то в командной строке или терминале должен появиться следующий текст:

    Running "watch" task

    Waiting...

    Это означает, что grunt начал следить за изменение нашего *.less файла. При его изменении и сохранении в текстовом редакторе, происходит автоматическая компиляция в файл *.css.


    P.S.
    Это лишь малый кусочек того, на что способен grunt. Надеюсь данная статья вам поможет увеличить скорость веб разработки. ;)
    Последнее редактирование: 23 мар 2016
    Дмитрий BASIC нравится это.
     

Поделиться этой страницей