Grunt
Настройка Grunt в связке с темой Drupal, SASS, Compass и LiveReload.
Установите Node.js, NPM, Ruby и SASS, а также настройте тему Drupal, как описано в статье: SASS, Compass, Bootstrap.
sudo npm install -g grunt-cli
sudo npm install grunt-contrib-watch -save-dev
sudo npm install grunt-contrib-compass -save-dev
sudo npm install grunt-contrib-sass -save-dev
sudo npm install grunt-w3c-markup-validation -save-dev
Создайте файл в папке темы файл package.json с таким содержимым:
{
"name": "tiun",
"version": "1.0.0",
"author": "Zina Design",
"homepage": "http://zina.com.ua",
"engines": {
"node": ">= 0.8.0"
},
"devDependencies": {
"grunt-contrib-compass": "v0.9.0",
"grunt-contrib-sass": "v0.7.3",
"grunt-contrib-watch": "v0.6.1"
"grunt-w3c-markup-validation": "v0.0.1"
}
}
Чтобы автоматически установить необходимые плагины Grunt, перечисленные в devDependencies, перейдите в папку темы и выполните команду:
sudo npm install
Эту команду нужно запускать только когда в начале создается файл package.json или когда в него добавляются новые плагины.
После выполнения команды в папке темы будет создана папка node_modules с плагинами. Она может быть довольно большого размера — десятки мегабайт, поэтому ее нужно исключать при использовании git и во время создания резервных копий.
Чтобы исключить папку node_modules из git, нужно создать файл .gitignore, в который добавить строку:
node_modules/
Чтобы исключить папку node_modules из архива при создании резервной копии, нужно использовать параметр exclude:
--tar-options="--exclude=%themes/*/node_modules"
Настроим Grunt, чтобы он использовал наши плагины и автоматизируем основные задачи.
Внутри папки темы создайте файл Gruntfile.js и вставьте в него следующий код:
module.exports = function (grunt) {
grunt.initConfig({
watch: {
src: {
files: ['**/*.scss', '**/*.php'],
tasks: ['compass:dev']
},
options: {
livereload: true,
},
},
compass: {
dev: {
options: {
sassDir: 'custom-sass',
cssDir: 'css',
imagesPath: 'assets/img',
noLineComments: false,
outputStyle: 'compressed'
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-w3c-markup-validation');
};
Перейти в терминале в папку темы и выполнить команду:
grunt watch
Теперь при каждом редактировании scss файла, Grunt будет компилировать его в файл style.css и автоматически обновлять страницу в браузере.
Настройка LiveReload.