Embed Size (px)
Citation preview
Что такое grunt.js• Инструмент для сборки проектов.
• Написан на node.js, устанавливается через npm.
• Запускается из консоли.
• Мы сегодня обсуждаем версию 0.4.0, в версии 0.3.x все сильно по-
другому.
Компоненты1. grunt — основное приложение, может ставиться как локально, так
и на system path. Запускает таски.
2. grunt-cli — глобальный враппер выбирающий использовать
локальную версию grunt или глобальную.
3. grunt-init — утилита занимающаяся разворачиванием новых
проектов по шаблонам.
4. Конкретные таски и шаблоны (тысячи их).
Какие бывают таски1. Запуск препроцессоров: less, stylus, coffeescript.
2. Сжатие css и js: yui, csso, uglify.js.
3. Проверка синтаксиса: csslint, jshint.
4. Запуск юнит-тестов: jasmine, qunit.
5. Обработка картинок и сборка спрайтов: imgo.
6. Сохранение скриншотов из html в статику: capser.js.
7. Автозапуск тасков при изменения в файлах и собственный сервер.
Настройка1. В корень проекта добавляется файл Gruntfile.js с конфигом.
2. Рядом с ним кладем файл package.json для установки grunt.js и
тасков (можно генерировать автоматом из шаблонов).
3. Перед первым запускам делаем npm install
4. Теперь таски и группы тасков можно запускать через консоль в папке
проекта.
Конфигmodule.exports = function( grunt ) {
grunt.initConfig({
// тут живут конфиги тасков
});
grunt.loadNpmTasks('grunt-sample');
grunt.registerTask('default', [ 'concat', 'sample' ]);
};
01.
02.
03.
04.
05.
06.
07.
Конфиг таскаjshint: {
src: [ "lib/**/*.js", "!lib/jquery.js" ],
options: {
curly: true,
globals: {
jQuery: true
}
}
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
Конфиг мультитаскаhandlebars: {
compile: {
options: { namespace: "JST" },
files: {
"result.js": "path/to/source.hbs",
"another.js": ["path/*.hbs", "more/*.hbs"]
}
}
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
Переназначение опцийhandlebars: {
compile: {
options: { namespace: "JST" },
files: {
"result.js": "path/to/source.hbs",
}
},
options: { namespace: false },
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
Автогенерация src/deststyletto: {
files: [ {
expand: true,
src: [ 'i-reset/i-reset.styl', 'b-*/**/*.styl' ],
dest: 'publish/',
ext: '.css',
flatten: true
} ]
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
Запуск из папки проекта1. grunt
2. grunt lint
3. grunt concat:main
Ссылки по теме1. https://github.com/gruntjs/grunt
2. https://github.com/gruntjs/grunt-cli
3. https://github.com/gruntjs/grunt-init
