Download - GruntJs Installation and popular plugins. MoscowJS

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

 <link rel="stylesheet" href="css/reveal.css"> <link rel="stylesheet" href="css/moon.css"> <link rel="stylesheet" href="css/zenburn.css">  <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-"$@" }

ВОПРОСЫ?СПАСИБО ЗА ВНИМАНИЕ!

Дмитрий Кунинbrainstorage.me/[email protected]

Download - GruntJs Installation and popular plugins. MoscowJS

Top Related