![СТРУКТУРА GRUNTFILE
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.initConfig({
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint']
}
});
grunt.registerTask('default', ['jshint', 'concat', 'uglify']);
};](https://image.slidesharecdn.com/grunt-130908013616-/85/GruntJs-Installation-and-popular-plugins-MoscowJS-10-320.jpg)
![КОММАНДЫ 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')](https://image.slidesharecdn.com/grunt-130908013616-/85/GruntJs-Installation-and-popular-plugins-MoscowJS-11-320.jpg)
![УСТАНОВКА ПЛАГИНА
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']
}](https://image.slidesharecdn.com/grunt-130908013616-/85/GruntJs-Installation-and-popular-plugins-MoscowJS-12-320.jpg)
![ОБЪЕДИНЕНИЕ НЕСКОЛЬКИХ ЗАДАЧ
grunt.registerTask('default', [
'jshint',
'concat',
'uglify'
]);](https://image.slidesharecdn.com/grunt-130908013616-/85/GruntJs-Installation-and-popular-plugins-MoscowJS-16-320.jpg)
![GRUNT-CONTRIB-JADE
jade: {
dist: [
{
src: ['views/*.jade'],
dest: '/'
}
],
test: [
{
src: ['test/*.jade'],
dest: '/test'
}
]
}](https://image.slidesharecdn.com/grunt-130908013616-/85/GruntJs-Installation-and-popular-plugins-MoscowJS-19-320.jpg)
![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
}](https://image.slidesharecdn.com/grunt-130908013616-/85/GruntJs-Installation-and-popular-plugins-MoscowJS-23-320.jpg)
![НАСТРОЙКА WATCH
watch: {
scripts: {
files: [
"public/**/*.js",
"app/assets/stylesheets/stylus/*.styl"
],
tasks:["stylus"],
options: {
livereload: true
},
}
}](https://image.slidesharecdn.com/grunt-130908013616-/85/GruntJs-Installation-and-popular-plugins-MoscowJS-30-320.jpg)
GruntJs Installation and popular plugins. MoscowJS
- 2. ДВА СЛОВА О СЕБЕ Дмитрий Кунин ведущий разработчик AT-Consulting энтузиаст javascript жутко ленивый парень
- 3. ЧТО ТАКОЕ GRUNT.JS? Система автоматизации, которая может практически все.
- 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']); };
- 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' ]);
- 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 }, } }
- 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