node grunt автоматическая компиляция scss

6 февраля 2018 г. 7:52

Очень кратка инструкция без пояснений по тому, как в автоматическом режиме компилировать файлы scss.

Если ещё не установили nodejs, то устанавливаем:

apt-get install node
apt-get install npm

После установки NodeJS нужно добавить ссылку на nodejs, так как в debian исполняемый файл называется nodejs (вместо node):

sudo ln -s /usr/bin/nodejs /usr/bin/node

Убедитесь, что установлены пакеты:

sudo apt-get install sass
sudo apt-get install ruby-compass

Создаём в корне проекта package.json:

{
  "name": "grunt-getting-started",
  "version": "0.1.0",
  "devDependencies": {
    "grunt"                    : ">= 0.4",
    "grunt-cli"                : ">= 0.1.6",
    "grunt-contrib-sass": "latest",
    "grunt-contrib-watch": "latest"
  }
}

devDependencies - содержит список необходимых зависимостей.

Создаём в корне проекта Gruntfile.js:

module.exports = function(grunt) {
    grunt.initConfig({

        sass: {
            dev: {
                options: {
                    style: 'expanded',
                    compass: true
                },
                files: {
                    'css/style.css': 'dev/style.scss'
                }
            }
        },

        watch: {
            sass: {
                files: 'dev/{,*/}*.{scss,sass}',
                tasks: ['sass:dev']
            }
        }

    });

    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.registerTask('default', ['sass:dev', 'watch']);
};

В терминале вводим:

$ grunt

Running "sass:dev" (sass) task

Running "watch" task
Waiting...

Видим, что программа watch находится в ожидании. Если мы изменим scss файл, то терминал выдаст:

>> File "dev/style.scss" changed.
Running "sass:dev" (sass) task

Done, without errors.
Completed in 0.718s at Tue Feb 06 2018 20:47:44 GMT+0800 (+08) - Waiting...

И мы увидим наши изменения в css-файле.

Оцените статью

0 из 5 (всего 0 оценок)

Поля, отмеченные звёздочкой ( * ) , являются обязательными.

Спасибо за ваш отзыв!

После нажатия кнопки "Отправить" ваше сообщение будет доставлено мне на почту.

Автор статьи

Права на использование материала, расположенного на этой странице http://vivazzi.pro/it/grunt-scss/:

Разрешается копировать материал с указанием её автора и ссылки на оригинал без использования параметра rel="nofollow" в теге <a>. Использование:

Автор статьи: Мальцев Артём
Ссылка на статью: <a href="http://vivazzi.pro/it/grunt-scss/">http://vivazzi.pro/it/grunt-scss/</a>

Подробнее: Правила использования сайта

Комментариев: 0

Вы можете оставить комментарий как незарегистрированный пользователь. Но, зарегистрировавшись, вы сможете получать оповещения об ответах, а также иметь доступ к своему личному аккаунту для просмотра своих комментариев.

Чтобы оставить комментарий от своего имени войдите или зарегистрируйтесь обычным способом или через социальные сети:

Отправить

На данный момент нет специального поиска, поэтому я предлагаю воспользоваться обычной поисковой системой, например, Google, добавив "vivazzi" после своего запроса.

Попробуйте