1. 19:55
GRUNT.JS
ДОЛОЙ РУТИННЫЕ ЗАДАЧИ

2. ДВА СЛОВА О СЕБЕ
Дмитрий Кунин
ведущий разработчик AT-Consulting
энтузиаст javascript
жутко ленивый парень

3. ЧТО ТАКОЕ GRUNT.JS?
Система автоматизации, которая может практически все.

4. КАК ЭТА ШТУКА
РАБОТАЕТ?
node.js
npm
package.json
Gruntfile.js

5. КТО ИСПОЛЬЗУЕТ

6. ЧТО ВЫ НЕНАВИДИТЕ
ДЕЛАТЬ?
ЧТО ВЫ ЗАБЫВАЕТЕ
ДЕЛАТЬ?

7. УСТАНОВКА РАЗ И НАВСЕГДА
npm install -g grunt-cli
УСТАНОВКА В ПРОЕКТ
npm install grunt --save-dev

8. УСТАНОВКА И НАСТРОЙКА
ШАБЛОНИЗАТОРА
npm install -g grunt-init
git clone git@github.com:gruntjs/grunt-init-TEMPLATE.git ~/.grunt-ini
TEMPLATES:
grunt-init-commonjs
grunt-init-gruntfile
grunt-init-gruntplugin
grunt-init-jquery
grunt-init-node

9. ЗАГРУЗКА/УСТАНОВКА GRUNTFILE
grunt-init grunt-init-gruntfile || grunt-init gruntfile

10. СТРУКТУРА GRUNTFILE
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.initConfig({
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint']
}
});
grunt.registerTask('default', ['jshint', 'concat', 'uglify']);
};

11. КОММАНДЫ GRUNT
grunt.initConfig
grunt.file.readJSON('package.json')
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default',["..."])
grunt.log.writeln("...");
grunt.log.error("...");
grunt.task.requires('foo');
grunt.event.on('watch')
grunt.template.today("yyyy-mm-dd");
grunt.template.date(847602000000, 'yyyy-mm-dd')

12. УСТАНОВКА ПЛАГИНА
npm install grunt-contrib-concat
npm install grunt-contrib-concat --save
npm install grunt-contrib-concat --save-dev
grunt.loadNpmTasks('grunt-contrib-watch');
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint']
}

13. PACKAGE.JSON
"author": "authorName",
"name": "projectName",
"version": "0.0.1",
"devDependencies" : {
"grunt": ">= 0.4",
"grunt-contrib-watch": "~0.3.1",
"grunt-contrib-cssmin": ">=0.5.0",
"grunt-contrib-uglify": ">=0.2.0",
"grunt-contrib-concat": ">=0.1.3"
}

14. ===
АЛЬТЕРНАТИВНАЯ ЗАГРУЗКА
ПЛАГИНОВ
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-jade');
grunt.loadNpmTasks('grunt-contrib-stylus');
grunt.loadNpmTasks('grunt-contrib-testing');
grunt.loadNpmTasks('grunt-contrib-pixel-perfect');
grunt.loadNpmTasks('grunt-shedevr');
npm install matchdep
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks)

15. ЗАПУСК ЗАДАЧ
grunt build
grunt build:test
grunt connect:smth
grunt.registerTask('update', function(message){
globalConfig.message = message;
grunt.task.run('bgShell:gitCi');
});
bgShell: {
_defaults: {
bg: false
},
gitCi: {
cmd: 'git commit -am "<%= globalConfig.message %>"',
}
},

16. ОБЪЕДИНЕНИЕ НЕСКОЛЬКИХ ЗАДАЧ
grunt.registerTask('default', [
'jshint',
'concat',
'uglify'
]);

17. ПОПУЛЯРНЫЕ
ЗАДАЧИ И
ПЛАГИНЫ

18. ПРЕПРОЦЕССИНГ HTML
grunt-contrib-jade
grunt-contrib-haml
grunt-slim
npm install grunt-contrib-jade --save-dev
npm install grunt-contrib-haml --save-dev
npm install grunt-slim --save-dev

19. GRUNT-CONTRIB-JADE
jade: {
dist: [
{
src: ['views/*.jade'],
dest: '/'
}
],
test: [
{
src: ['test/*.jade'],
dest: '/test'
}
]
}

20. ПРЕПРОЦЕССИНГ СSS
stylus
less
sass
npm install grunt-contrib-stylus --save-dev
npm install grunt-contrib-less --save-dev
npm install grunt-contrib-sass --save-dev

21. ПРИМЕРНАЯ НАСТРОЙКА CSS
ПРЕПРОЦЕССОРА
sass: {
dist: {
'main.css': 'main.scss'
}
}

22. ПРЕПРОЦЕССИНГ/LINTING JS
Coffescript
JSHint
npm install grunt-contrib-jshint --save-dev
npm install grunt-contrib-coffee --save-dev

23. JSHINT
jshint: {
options: {
jshintrc: '.jshintrc'
},
all: [
'Gruntfile.js',
'app/scripts/{,*/}*.js',
'!app/scripts/vendor/*',
'test/spec/{,*/}*.js'
]
}
{
"node": true,
"bitwise": true,
"camelcase": true,
"curly": true,
"eqeqeq": true,
"immed": true,
"indent": 4,
"latedef": true,
"newcap": true,
"jquery": true
}

24. UNIT TESTING
jasmine
npm install grunt-contrib-jasmine --save-dev

25. CONCATINATION/UGLIFY
usemin
uglify
concat
npm install grunt-contrib-usemin --save-dev
npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-uglify --save-dev

26. USEMIN
prepeareUsemin -> concat/uglify-> usemin
<!-- build:css css/main.css -->
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/moon.css">
<link rel="stylesheet" href="css/zenburn.css">
<!-- endbuild -- >
<!-- build:js js/app.js -->
<script src="js/reveal.js"></script>
<script src="js/init.js"></script">
<!-- endbuild -- >

27. ОЧИСТКА КОДА
debug/console cleanup
npm install grunt-groundskeeper --save-dev
npm install grunt-remove-logging --save-dev

28. РАЗНОЕ
Открытие страницы
Удаление временных папок
Архивация
Выгрузка на фтп
Бампинг package.json файла
CDN замена скриптов
npm install grunt-open --save-dev
npm install grunt-contrib-clean --save-dev
npm install grunt-contrib-compress --save-dev
npm install grunt-ftp-deploy --save-dev
npm install grunt-bumpup --save-dev
npm install grunt-google-cdn --save-dev

29. ОБЪЕДИНЕНИЕ
ВСЕГО УКАЗАННОГО В СВЯЗКУ
watch
npm install grunt-contrib-watch --save-dev

30. НАСТРОЙКА WATCH
watch: {
scripts: {
files: [
"public/**/*.js",
"app/assets/stylesheets/stylus/*.styl"
],
tasks:["stylus"],
options: {
livereload: true
},
}
}

31. ГЛАВНЫЙ РЕСУРС
HTTP://GRUNTJS.COM/

32. ФИНАЛЬНЫЙ ХИНТ
~/.bash_profile
# Установка grunt плагина с сохранением в dev зависимости
function gi() {
npm install --save-dev grunt-"$@"
}
# Установка grunt-contrib плагина с сохранением в dev зависимости
function gci() {
npm install --save-dev grunt-contrib-"$@"
}

33. ВОПРОСЫ?
СПАСИБО ЗА ВНИМАНИЕ!
Дмитрий Кунин
brainstorage.me/dkunin
info@dkunin.ru