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

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

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

# взято с https://github.com/nodesource/distributions/blob/master/README.md
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y 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-файле.