>WikiSysop в 22:38, 22 серпня 2015

2015-08-22T22:38:02Z

Нова сторінка

Настройка Grunt в связке с темой Drupal, SASS, Compass и [[LiveReload]].

== Подготовка ==

Установите Node.js, NPM, Ruby и SASS, а также настройте тему Drupal, как описано в статье: [[SASS, Compass, Bootstrap]].

== Установка Grunt ==

<source lang="bash">
sudo npm install -g grunt-cli
</source>

== Установка Grunt плагинов ==

<source lang="bash">
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
</source>

Создайте файл в папке темы файл <code>package.json</code> с таким содержимым:

<source lang="javascript">{
"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"
}
}</source>

Чтобы автоматически установить необходимые плагины Grunt, перечисленные в ''devDependencies'', перейдите в папку темы и выполните команду:

<source lang="bash">
sudo npm install
</source>

Эту команду нужно запускать только когда в начале создается файл <code>package.json</code> или когда в него добавляются новые плагины.

После выполнения команды в папке темы будет создана папка <code>node_modules</code> с плагинами. Она может быть довольно большого размера — десятки мегабайт, поэтому ее нужно исключать при использовании git и во время создания резервных копий.

Чтобы исключить папку <code>node_modules</code> из git, нужно создать файл <code>.gitignore</code>, в который добавить строку:

node_modules/

Чтобы исключить папку <code>node_modules</code> из архива при создании резервной копии, нужно использовать параметр ''exclude'':

<source lang="bash">
--tar-options="--exclude=%themes/*/node_modules"
</source>

== Настройка Grunt ==

Настроим Grunt, чтобы он использовал наши плагины и автоматизируем основные задачи.

Внутри папки темы создайте файл <code>Gruntfile.js</code> и вставьте в него следующий код:

<source lang="javascript">
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');
};
</source>

== Запуск Grunt ==

Перейти в терминале в папку темы и выполнить команду:

<source lang="bash">
grunt watch
</source>

Теперь при каждом редактировании scss файла, Grunt будет компилировать его в файл style.css и автоматически обновлять страницу в браузере.

== LiveReload ==

Настройка [[LiveReload]].

== Ссылки ==

* [http://habrahabr.ru/post/244721/ Пересмотренное руководство по Grunt для начинающих]
* [https://www.deeson.co.uk/labs/using-grunt-bootstrap-compass-and-sass-drupal-sub-theme Using Grunt, bootstrap, Compass and SASS in a Drupal sub theme]

Grunt - Історія редагувань

>WikiSysop в 22:38, 22 серпня 2015