GDG Kraków - Intro to front-end automation using bower.js & grunt.js
•
0 likes•1,225 views
This document provides an introduction and overview of front-end automation tools bower.js and grunt.js. It discusses motivation for using these tools, how to set them up and configure projects, and examples of common tasks they can perform. Bower is presented as a front-end package manager for managing dependencies. Grunt is introduced as a task automation tool for performing repetitive front-end tasks like linting, minification, and live reloading. The document provides configuration files, commands, and code snippets to demonstrate setting up and using these tools in a sample project.
Report
Share
GDG Kraków - Intro to front-end automation using bower.js & grunt.js
- 1. Into the parrots & boars world INTRODUCTION TO FRONT-END AUTOMATION
- 2. Hi! I’m Dominik FE/UX focused web dev @ Making Waves Engaged into projects for FIFA A little bit of a control freak Baking&cooking in between
- 3. 1. Motivation 2. Tools required 3. Part I - The Ingredients 4. Part II - The Recipes 5. Live example Agenda
- 4. Motivation
- 5. Tools required Ruby, SASS, Stylus, nib, #younameit
- 8. General information • Download • Manage • Share
- 9. Setup & usage • npm install –g bower • bower.json Hint: use bower init to bootstrap bower.json file
- 10. bower.json PROJECT METADATA & DEPENDENCY MANAGEMENT { ‘name’ : ‘project name’, ‘version’ : ‘project version’, ‘dependencies’ : { ‘package-name’ : ‘package version’ }, ‘devDependencies’ : { ‘package-name’ : ‘package version’, ‘package-name’ : ‘package version’ } }
- 11. Bower commands • bower search <package name> • bower install <package name>#<package version> • bower install --save-dev <package name>#<package version> Detailed package versioning info: https://www.npmjs.org/doc/json.html#dependencies
- 12. So… how to use bower.js?
- 13. .bowerrc GENERAL BOWER CONFIGURATION { ‘directory’ : ‘packages dir’, } Detailed bower specs: http://bit.ly/1aJGFf8
- 14. PART I The Ingredients - yay, we got it!
- 17. Task automation • watching files for changes & live reload • CSS/JS linting, minification • CSS preprocessors compilation • JS unit tests running • HTML processing • … and many many other boring tasks
- 18. Setup • npm install –g grunt-cli • package.json • Gruntfile.js
- 19. What grunt-cli is? grunt-cli Project A using grunt v. X Project B using grunt v. Y
- 20. Project setup • package.json • Gruntfile.js
- 21. package.json PROJECT METADATA & GRUNT PLUGINS MANAGEMENT { ‘name’ : ‘project name’, ‘version’ : ‘project version’, ‘devDependencies’ : { ‘package-name’ : ‘package version’ } } Hint: use npm init to create & preconfigure package.json Useful commands npm init npm install <package> npm install <package> --save-dev
- 22. Let’s see it in action
- 23. Gruntfile.js GENERAL STRUCTURE module.export = function(grunt) { grunt.initConfig({ ‘pkg’ : grunt.file.readJSON(’package.json’), taskName : { task configuration } }); grunt.loadNpmTask(’plugin-name’); grunt.registerTask(’complexTask’, [’taskName1’,’taskName2’,…]); }
- 24. Gruntfile.js grunt.initConfig({ ‘pkg’ : grunt.file.readJSON(’package.json’), taskName : { targetName : { options: { task options }, src: ’files to be processed’, dest:’output files’ } } }); grunt.loadNpmTask(’grunt-contrib-taskName’); TASK DEFINITION & CONFIGURATION
- 26. Gruntfile.js TASK CONFIGURATION – FILES MAPPING Compact version taskName : { targetName : { options: { task options }, src: ’input files’, dest:’output file’ } } Object version taskName : { targetName : { options: { task options }, files: { ’output file1’:[’input file1’,…], ’output file2’:[’input fileX’,…] } } }
- 27. Let’s bake!