GruntJs Installation and popular plugins. MoscowJS

Download GruntJs Installation and popular plugins. MoscowJS

Post on 27-Jan-2015

104 views

Category:

Technology

1 download

DESCRIPTION

 

TRANSCRIPT

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: [''], 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: [''], 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 ""', } }, 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