Препроцесори SASS і LESS суттєво спрощують фронт-енд розробку. Для їх автоматичної компіляції в CSS автоматично можна використовувати Grunt.js. Давайте подивимося, як це робити.
1. sudo apt-get install npm
Встановлюємо npm (менеджер пакетів для node.js)
2. sudo npm install -g grunt-cli
Встановлюємо grunt-cli — це дозволить запускати grunt у будь-якій директорії, якщо він там є (ця команда не встановлює Grunt).
3. npm init
Ініціалізуємо node проект у папці з темою (чи десь в іншому місці), ця команда запустить діалог, де ми:
- даємо ім’я node проекту (можна дати ім’я теми);
- вказуємо версію;
- пишемо опис;
- для entry point вказуємо Gruntfile.js;
- test command, git repository, keywords можна залишити пустими;
- author — вказуєте себе, або залишаєте пустим;
- вказуєте ліцензію (BSD-2-Clause за замовчуванням);
Далі вас запитають, чи всі дані введені коректно, якщо так — натискаємо Enter.
Згенерується файл package.json, у якому зберігаються налаштування проекту.
4. npm install grunt --save-dev
встановлюємо Grunt у папку з темою
npm install grunt-contrib-watch --save-dev
встановлюємо grunt-contrib-watch, цей пакет відслідковуватиме зміни у Sass/Less файлах.
Далі, залежно від того, потрібна компіляція sass чи less, встановлюємо локально відповідні модулі:
для Sass встановлюємо:
npm install grunt-sass --save-dev
або
npm install grunt-contrib-sass --save-dev
grunt-sass використовує компілятор на C++, завдяки чому компіляція відбувається дуже швидко (0.9с, 6000+ рядків у css файлі), grunt-contrib-sass вважається більш стабільним (компіляція займає 4с, 6000+ рядків у css файлі).
для Less встановлюємо:
npm install grunt-contrib-less --save-dev - для less
Всі встановлені пакети пропишуться у залежностях в файлі package.json.
5. Далі створюємо Gruntfile.js
Ось приклад Gruntfile.js для Sass:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
options: {
sourcemap: false,
compress: false,
yuicompress: false,
style: 'expanded',
},
files: {
'css/style.css' : 'sass/style.scss'
}
},
},
watch: {
css: {
files: '**/*.scss',
tasks: ['sass']
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default',['watch']);
}
Ось приклад Gruntfile.js для Less:
module.exports = function(grunt) {
require('jit-grunt')(grunt);
grunt.initConfig({
less: {
development: {
options: {
compress: false,
yuicompress: false,
optimization: 2
},
files: {
"css/style.css": "less/style.less"
}
}
},
watch: {
styles: {
files: ['less/**/*.less'],
tasks: ['less']
}
}
});
grunt.registerTask('default', ['less', 'watch']);
};
Пояснення щодо конфігурацій:
sass: { та less: {, де sass та less — назви задач;
'css/style.css' : 'sass/style.scss' та "css/style.css": "less/style.less" — шлях до CSS-файлу, куди будуть компілюватися зміни та шлях до Sass/Less файлу, який буде компілюватися;
files: '**/*.scss', files: ['less/**/*.less'] — вказуємо, які файли відслідковувати;
tasks: ['sass'], tasks: ['less'] — при зміні файлів запускаємо вказану задачу;
grunt.registerTask('default',['watch']); — реєструємо задачу;
grunt.loadNpmTasks('grunt-contrib-sass'), grunt.loadNpmTasks('grunt-contrib-watch') — підключаємо модулі, у прикладі з less використано jit-grunt (модуль, який оптимізує підвантаження модулів), тому вказаних рядків тут немає.
6. Все готово, заходимо в папку, куди ми встановили Grunt і запускаємо його:
Якщо отримали помилку типу “/usr/bin/env: node: No such file or directory” — sudo ln -s /usr/bin/nodejs /usr/bin/node.
Якщо отримали помилку Друпала “Segmentation fault” — видаліть всі файли з папки node_modules, які мають розширення .info - find . -name "*.info" -type f -delete.
7. Якщо у вас Grunt уже налаштований, і ви його просто хочете запустити
— за потреби виконайте пункти 1, 2 і перейдіть до пункту 6.
Корисні ресурси
http://gruntjs.com/getting-started
https://github.com/sindresorhus/grunt-sass (швидкий плагін для компіляції sass)
https://github.com/gruntjs/grunt-contrib-sass (плагін для компіляції sass)
https://github.com/gruntjs/grunt-contrib-less (плагін для less)
https://www.npmjs.com/package/jit-grunt (плагін для оптимізації завантаження плагінів)
https://github.com/gruntjs/grunt-contrib-coffee (плагін для компіляції coffee script у js)
https://github.com/esteinborn/bootstrap-sass-grunt (Bootstrap SASS для grunt)
http://stackoverflow.com/questions/26320901/cannot-install-nodejs-usr-bin-env-node-no-such-file-or-directory (про помилку /usr/bin/env: node: No such file or directory)
https://www.drupal.org/node/2309023 (про помилку Segmentation Fault)