| Установка | ||
|---|---|---|
| Grunt |
1. Устанавливаем node.js для вашей ОС, проверяем: node -v
Также вместе с node должен установиться пакетный менеджер npm, проверяем: npm -v
2. Устанавливаем grunt cli (command line interface), обязательно нужны ПРАВА АДМИНИСТРАТОРА В MAC OS и Linux пишем: sudo npm install grunt-cli -gВ Windows запускаем консоль с правами админа и пишем: npm install grunt-cli -g
3. Устанавливаем grunt: npm install grunt
проверяем: npm grunt -v
|
Официальный сайт Grunt
Все установки нужно производить в директории с проектом |
| Настройки проекта package.json |
npm init
|
Будет создан файл package.json с информацией о проекте |
| Плагины | ||
| Компилятор less-кода в css |
|
less: {
style: {
files: {
'css/style.css': 'sass/style.less'
}
}
}, |
| Компилятор sass-кода в css |
|
sass: {
style: {
files: {
'css/style.css': 'sass/style.scss'
}
}
},
|
| Компилятор coffee-кода в js |
|
coffee: {
// Выкл. обёртку при компиляции
options: {bare: true},
// Компиляция
scripts: {
expand: true,
flatten: true,
cwd: 'coffee/', // Исходная папка
src: ['*.coffee'],//Разреш. файлов
dest: 'js/',//Куда сохр. скомп. файлы
ext: '.js' // Фомат сохранения файлов
}
},
|
| Мнгновенное сохранение изменений |
|
watch: {
// Перезагрузка страницы
options: {liveReload: true},
// Компиляция
scripts: {
//Форматы и пути к файлам для наблюдения
files: ['coffee/*.coffee'],
//Какую задачу запускать при изменении
task: ['newer:coffee']
//или task: ['process']
}
},
//newer компил. только изменёный файл
|
| Конкатинатор |
|
Склеевает все файлы в один
concat: {
// Форматы и пути к файлам для конкат.
dist: {
// Где и какие файлы
src: ['js/*.js'],
// Куда складывать
dest: [dist/js/all.js]
}
},
|
| Минификатор js-кода |
|
uglify: {
// Форматы и пути к файлам для конкат.
dist: {
//Комментарий перед мин. кодом
options: {banner: ''},
//Какой файл минифицировать и куда сохр.
files: {
'dist/js/all.min.js': ['dist/js/all.js']
}
}
},
|
| Минификатор css-кода |
|
cssmin: {
target: {
files: [{
expand: true,
cwd: 'release/css',
src: ['*.css', '!*.min.css'],
dest: 'release/css',
ext: '.min.css'
}]
}
}
|
| Настройка | ||
| Настройки Gruntfile.js |
// 1. Присваиваем module.exports анонимную функцию, так пишутся все модули к node.js
// 2. Прописываем основной конфиг initConfig и загружаем все нужные плагины loadNpmTasks // 4. Запускаем автоматизацию: grunt// будут работать дефолтные настройки |
В нём будут содержаться таски(задачи) и конфиги для всех плагинов Sample Gruntfile.js |