Date post: | 27-Jan-2015 |
Category: |
Technology |
Upload: | dmitri-kunin |
View: | 113 times |
Download: | 1 times |
19:55
GRUNT.JSДОЛОЙ РУТИННЫЕ ЗАДАЧИ
ДВА СЛОВА О СЕБЕДмитрий Кунинведущий разработчик AT-Consultingэнтузиаст javascriptжутко ленивый парень
ЧТО ТАКОЕ GRUNT.JS?Система автоматизации, которая может практически все.
КАК ЭТА ШТУКАРАБОТАЕТ?
node.jsnpmpackage.jsonGruntfile.js
КТО ИСПОЛЬЗУЕТ
ЧТО ВЫ НЕНАВИДИТЕДЕЛАТЬ?
ЧТО ВЫ ЗАБЫВАЕТЕДЕЛАТЬ?
УСТАНОВКА РАЗ И НАВСЕГДАnpm install -g grunt-cli
УСТАНОВКА В ПРОЕКТnpm install grunt --save-dev
УСТАНОВКА И НАСТРОЙКАШАБЛОНИЗАТОРА
npm install -g grunt-init git clone [email protected]:gruntjs/grunt-init-TEMPLATE.git ~/.grunt-init/TEMPLATE
TEMPLATES:
grunt-init-commonjs grunt-init-gruntfile grunt-init-gruntplugin grunt-init-jquery grunt-init-node
ЗАГРУЗКА/УСТАНОВКА GRUNTFILEgrunt-init grunt-init-gruntfile || grunt-init gruntfile
СТРУКТУРА GRUNTFILE
module.exports = function(grunt) { grunt.loadNpmTasks('grunt-contrib-watch'); grunt.initConfig({ watch: { files: ['<%= jshint.files %>'], tasks: ['jshint'] } }); grunt.registerTask('default', ['jshint', 'concat', 'uglify']); };
КОММАНДЫ 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')
УСТАНОВКА ПЛАГИНА
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'] }
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" }
===
АЛЬТЕРНАТИВНАЯ ЗАГРУЗКАПЛАГИНОВ
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)
ЗАПУСК ЗАДАЧ
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 %>"', } },
ОБЪЕДИНЕНИЕ НЕСКОЛЬКИХ ЗАДАЧ
grunt.registerTask('default', [ 'jshint', 'concat', 'uglify' ]);
ПОПУЛЯРНЫЕЗАДАЧИ ИПЛАГИНЫ
ПРЕПРОЦЕССИНГ HTMLgrunt-contrib-jadegrunt-contrib-hamlgrunt-slim
npm install grunt-contrib-jade --save-dev npm install grunt-contrib-haml --save-dev npm install grunt-slim --save-dev
GRUNT-CONTRIB-JADE
jade: { dist: [ { src: ['views/*.jade'], dest: '/' } ], test: [ { src: ['test/*.jade'], dest: '/test' } ] }
ПРЕПРОЦЕССИНГ СSSstyluslesssass
npm install grunt-contrib-stylus --save-dev npm install grunt-contrib-less --save-dev npm install grunt-contrib-sass --save-dev
ПРИМЕРНАЯ НАСТРОЙКА CSSПРЕПРОЦЕССОРА
sass: { dist: { 'main.css': 'main.scss' } }
ПРЕПРОЦЕССИНГ/LINTING JSCoffescriptJSHint
npm install grunt-contrib-jshint --save-dev npm install grunt-contrib-coffee --save-dev
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 }
UNIT TESTINGjasmine
npm install grunt-contrib-jasmine --save-dev
CONCATINATION/UGLIFYuseminuglifyconcat
npm install grunt-contrib-usemin --save-dev npm install grunt-contrib-concat --save-dev npm install grunt-contrib-uglify --save-dev
USEMINprepeareUsemin -> 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 -- >
ОЧИСТКА КОДАdebug/console cleanup
npm install grunt-groundskeeper --save-dev npm install grunt-remove-logging --save-dev
РАЗНОЕОткрытие страницыУдаление временных папокАрхивацияВыгрузка на фтпБампинг 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
ОБЪЕДИНЕНИЕВСЕГО УКАЗАННОГО В СВЯЗКУ
watch
npm install grunt-contrib-watch --save-dev
НАСТРОЙКА WATCH
watch: { scripts: { files: [ "public/**/*.js", "app/assets/stylesheets/stylus/*.styl" ], tasks:["stylus"], options: { livereload: true }, } }
ГЛАВНЫЙ РЕСУРСHTTP://GRUNTJS.COM/
ФИНАЛЬНЫЙ ХИНТ
~/.bash_profile # Установка grunt плагина с сохранением в dev зависимости function gi() { npm install --save-dev grunt-"$@" } # Установка grunt-contrib плагина с сохранением в dev зависимости function gci() { npm install --save-dev grunt-contrib-"$@" }