Grunt Sass установка и настройка
Чтобы установить Sass, просто откройте командную строку и перейдите в директорию вашего проекта:
1 | cd <путь к папке с проектом> |
Запустите установку Sass:
1 | npm install grunt-contrib-sass --save-dev |
Добавим задачу Sass в файл gruntfile.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | /** * Sass */ sass: { dev: { options: { style: 'expanded', compass: true }, files: { 'dev/css/style.css': 'style.scss' } }, prod: { options: { style: 'compressed', compass: true }, files: { 'prod/css/style.css': 'style.scss' } } }, |
1 2 | grunt.loadNpmTasks('grunt-contrib-sass'); grunt.registerTask('default', ['sass']); |
Мы разбили конфигурацию Sass на две секции. Секция dev — рабочая ветка проекта, которая находится в папке dev/. Секция prod —
В настройках options мы задали style: 'expanded' для dev и style: 'compressed' для prod.
style: 'expanded' — скомпилированный css будет в несжатом виде.
style: 'compressed' — css будет сжат.
В
1 | files |
мы указываем какие файлы scss компилировать и в какой файл css сохранять.
Компиляция Sass «на лету»
Запуск компиляции Sass через команду grunt может быть очень неудобно в процессе разработке. Для автоматизации процесса компиляции используем плагин grunt watch.
Установим watch в проект:
1 | npm install grunt-contrib-watch --save-dev |
Добавим конфигурацию watch в файл gruntfile.js:
1 2 3 4 5 6 7 8 9 | /** * Watch */ watch: { sass: { files: 'dev/scss/{,*/}*.{scss,sass}', tasks: ['sass:dev'] } } |
Мы указали, что надо запустить задачу sass:dev при изменении любого файла .scss или .sass в папке scss .
Чтобы задача watch запускалась при введении grunt добавим в gruntfile.js:
1 2 3 4 5 6 7 8 | /** * Default задача * Запустите команду grunt */ grunt.registerTask('default', [ 'sass:dev', 'watch' ]); |
Подробнее про установку Grunt.