19:55
GRUNT.JS
ДОЛОЙ РУТИННЫЕ ЗАДАЧИ
ДВА СЛОВА О СЕБЕ
Дмитрий Кунин
ведущий разработчик AT-Consulting
энтузиаст javascript
жутко ленивый парень
ЧТО ТАКОЕ GRUNT.JS?
Система автоматизации, которая может практически все.
КАК ЭТА ШТУКА
РАБОТАЕТ?
node.js
npm
package.json
Gruntfile.js
КТО ИСПОЛЬЗУЕТ
ЧТО ВЫ НЕНАВИДИТЕ
ДЕЛАТЬ?
ЧТО ВЫ ЗАБЫВАЕТЕ
ДЕЛАТЬ?
УСТАНОВКА РАЗ И НАВСЕГДА
npm install -g grunt-cli
УСТАНОВКА В ПРОЕКТ
npm install grunt --save-dev
УСТАНОВКА И НАСТРОЙКА
ШАБЛОНИЗАТОРА
npm install -g grunt-init
git clone git@github.com:gruntjs/grunt-init-TEMPLATE.git ~/....
ЗАГРУЗКА/УСТАНОВКА GRUNTFILE
grunt-init grunt-init-gruntfile || grunt-init gruntfile
СТРУКТУРА GRUNTFILE
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.initConfig({
watch...
КОММАНДЫ GRUNT
grunt.initConfig
grunt.file.readJSON('package.json')
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.regi...
УСТАНОВКА ПЛАГИНА
npm install grunt-contrib-concat
npm install grunt-contrib-concat --save
npm install grunt-contrib-conca...
PACKAGE.JSON
"author": "authorName",
"name": "projectName",
"version": "0.0.1",
"devDependencies" : {
"grunt": ">= 0.4",
"...
===
АЛЬТЕРНАТИВНАЯ ЗАГРУЗКА
ПЛАГИНОВ
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-jade');
...
ЗАПУСК ЗАДАЧ
grunt build
grunt build:test
grunt connect:smth
grunt.registerTask('update', function(message){
globalConfig....
ОБЪЕДИНЕНИЕ НЕСКОЛЬКИХ ЗАДАЧ
grunt.registerTask('default', [
'jshint',
'concat',
'uglify'
]);
ПОПУЛЯРНЫЕ
ЗАДАЧИ И
ПЛАГИНЫ
ПРЕПРОЦЕССИНГ HTML
grunt-contrib-jade
grunt-contrib-haml
grunt-slim
npm install grunt-contrib-jade --save-dev
npm install ...
GRUNT-CONTRIB-JADE
jade: {
dist: [
{
src: ['views/*.jade'],
dest: '/'
}
],
test: [
{
src: ['test/*.jade'],
dest: '/test'
}...
ПРЕПРОЦЕССИНГ СSS
stylus
less
sass
npm install grunt-contrib-stylus --save-dev
npm install grunt-contrib-less --save-dev
n...
ПРИМЕРНАЯ НАСТРОЙКА CSS
ПРЕПРОЦЕССОРА
sass: {
dist: {
'main.css': 'main.scss'
}
}
ПРЕПРОЦЕССИНГ/LINTING JS
Coffescript
JSHint
npm install grunt-contrib-jshint --save-dev
npm install grunt-contrib-coffee -...
JSHINT
jshint: {
options: {
jshintrc: '.jshintrc'
},
all: [
'Gruntfile.js',
'app/scripts/{,*/}*.js',
'!app/scripts/vendor/...
UNIT TESTING
jasmine
npm install grunt-contrib-jasmine --save-dev
CONCATINATION/UGLIFY
usemin
uglify
concat
npm install grunt-contrib-usemin --save-dev
npm install grunt-contrib-concat --s...
USEMIN
prepeareUsemin -> concat/uglify-> usemin
<!-- build:css css/main.css -->
<link rel="stylesheet" href="css/reveal.cs...
ОЧИСТКА КОДА
debug/console cleanup
npm install grunt-groundskeeper --save-dev
npm install grunt-remove-logging --save-dev
РАЗНОЕ
Открытие страницы
Удаление временных папок
Архивация
Выгрузка на фтп
Бампинг package.json файла
CDN замена скриптов...
ОБЪЕДИНЕНИЕ
ВСЕГО УКАЗАННОГО В СВЯЗКУ
watch
npm install grunt-contrib-watch --save-dev
НАСТРОЙКА WATCH
watch: {
scripts: {
files: [
"public/**/*.js",
"app/assets/stylesheets/stylus/*.styl"
],
tasks:["stylus"],...
ГЛАВНЫЙ РЕСУРС
HTTP://GRUNTJS.COM/
ФИНАЛЬНЫЙ ХИНТ
~/.bash_profile
# Установка grunt плагина с сохранением в dev зависимости
function gi() {
npm install --sav...
ВОПРОСЫ?
СПАСИБО ЗА ВНИМАНИЕ!
Дмитрий Кунин
brainstorage.me/dkunin
info@dkunin.ru
Upcoming SlideShare
Loading in …5
×

GruntJs Installation and popular plugins. MoscowJS

2,154 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,154
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

GruntJs Installation and popular plugins. MoscowJS

  1. 1. 19:55 GRUNT.JS ДОЛОЙ РУТИННЫЕ ЗАДАЧИ
  2. 2. ДВА СЛОВА О СЕБЕ Дмитрий Кунин ведущий разработчик AT-Consulting энтузиаст javascript жутко ленивый парень
  3. 3. ЧТО ТАКОЕ GRUNT.JS? Система автоматизации, которая может практически все.
  4. 4. КАК ЭТА ШТУКА РАБОТАЕТ? node.js npm package.json Gruntfile.js
  5. 5. КТО ИСПОЛЬЗУЕТ
  6. 6. ЧТО ВЫ НЕНАВИДИТЕ ДЕЛАТЬ? ЧТО ВЫ ЗАБЫВАЕТЕ ДЕЛАТЬ?
  7. 7. УСТАНОВКА РАЗ И НАВСЕГДА npm install -g grunt-cli УСТАНОВКА В ПРОЕКТ npm install grunt --save-dev
  8. 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. 9. ЗАГРУЗКА/УСТАНОВКА GRUNTFILE grunt-init grunt-init-gruntfile || grunt-init gruntfile
  10. 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. 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. 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. 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. 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. 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. 16. ОБЪЕДИНЕНИЕ НЕСКОЛЬКИХ ЗАДАЧ grunt.registerTask('default', [ 'jshint', 'concat', 'uglify' ]);
  17. 17. ПОПУЛЯРНЫЕ ЗАДАЧИ И ПЛАГИНЫ
  18. 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. 19. GRUNT-CONTRIB-JADE jade: { dist: [ { src: ['views/*.jade'], dest: '/' } ], test: [ { src: ['test/*.jade'], dest: '/test' } ] }
  20. 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. 21. ПРИМЕРНАЯ НАСТРОЙКА CSS ПРЕПРОЦЕССОРА sass: { dist: { 'main.css': 'main.scss' } }
  22. 22. ПРЕПРОЦЕССИНГ/LINTING JS Coffescript JSHint npm install grunt-contrib-jshint --save-dev npm install grunt-contrib-coffee --save-dev
  23. 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. 24. UNIT TESTING jasmine npm install grunt-contrib-jasmine --save-dev
  25. 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. 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. 27. ОЧИСТКА КОДА debug/console cleanup npm install grunt-groundskeeper --save-dev npm install grunt-remove-logging --save-dev
  28. 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. 29. ОБЪЕДИНЕНИЕ ВСЕГО УКАЗАННОГО В СВЯЗКУ watch npm install grunt-contrib-watch --save-dev
  30. 30. НАСТРОЙКА WATCH watch: { scripts: { files: [ "public/**/*.js", "app/assets/stylesheets/stylus/*.styl" ], tasks:["stylus"], options: { livereload: true }, } }
  31. 31. ГЛАВНЫЙ РЕСУРС HTTP://GRUNTJS.COM/
  32. 32. ФИНАЛЬНЫЙ ХИНТ ~/.bash_profile # Установка grunt плагина с сохранением в dev зависимости function gi() { npm install --save-dev grunt-"$@" } # Установка grunt-contrib плагина с сохранением в dev зависимости function gci() { npm install --save-dev grunt-contrib-"$@" }
  33. 33. ВОПРОСЫ? СПАСИБО ЗА ВНИМАНИЕ! Дмитрий Кунин brainstorage.me/dkunin info@dkunin.ru

×