Modern Development Tools
Download as PPTX, PDF5 likes1,238 views
Presentation about Modern Development Tools (2014) including NPM, Bower, Grunt, Yo, Gulp, Browserify, RequireJS and CSS Precessors.
Ad
More Related Content
What's hot (20)
Similar to Modern Development Tools (20)
Ad
Recently uploaded (20)
![Pixologic ZBrush Crack Plus Activation Key [Latest 2025] New Version](https://cdn.slidesharecdn.com/ss_thumbnails/fashionevolution2-250322112409-f76abaa7-250428124909-b51264ff-250504160528-fc2bb1c5-thumbnail.jpg?width=560&fit=bounds)
Ad
Modern Development Tools
- 2. Traditional Development Project is started. 1. Start writing the project scaffolding codes. 2. Download jquery > move it to project folder > link in html. 3. . 4. Write project specific server side codes > compile/restart > test > ... 5. Write project specific client side codes > refresh browser > check > ... 6. . 7. Finish coding. Then concat, minify, change links to minified files > test > deploy . . . . 8. . 9. Add new features > append new codes > getting slow > bugs > fix > … 10. . 11. Few months later, Designer wants to change the current theme. 12. So > find the colors and layout in css files > make changes one by one > ... 13. .
- 4. NPM ● Package manager for Node.js javascript modules, but many development tools are also distributing through NPM. ● Installation ○ Comes with node.js ● Initializing ○ npm init ○ It’ll create package.json ● Install packages (front-end libraries) ○ npm install --save express ○ npm install --save async
- 5. Bower ● Package manager for front-end libraries. ● Installation ○ npm install -g bower ● Initializing ○ bower init ○ It’ll create bower.json ● Install packages (front-end libraries) ○ bower install --save jquery ○ bower install --save bootstrap ● Uninstall packages ○ bower uninstall --save jquery
- 6. Grunt ● Javascript task runner and build tool. ● Can use in many kinds of automations. ● Need to use it’s plugins to perform a specific task (eg. auto refresh browser). ● Plugins are distribute through NPM. ● Plugin names on NPM are prefix with grunt- or grunt-contrib- ● Installation o npm install -g grunt-cli ● Initializing o no easy way to generate Gruntfile.js o grunt-init ● Install Plugins o npm install --save-dev grunt-*
- 8. wiredep - inject installed bower components into specified html file. nodemon forever - auto restart nodejs process on file changes. - auto restart nodejs process on server crash. watch livereload - watching the file changes, and do something. - reload the browser with a script. jshint csslint - can detect js errors, warnings and other informations from js files - can detect css errors, warnings and other informations from css files concat uglify cssmin htmlmin - combine multiple js files into single file. - combine, minify js files. - combine, minify css files. - minify html files. More … http://gruntjs.com/plugins
- 9. Demo
- 10. Yo ● A kind of code generator and scaffolding tool. ● Need to use it’s generators to generate a code template. ● Generators are distribute through NPM ● Generator names on NPM are prefix with generator- ● Installation o npm install -g yo ● Initializing o yo > enter enter enter ● Install Generator o npm install --save-dev generator-* o or o yo > install plugins >
- 11. Demo
- 12. Installation @ OS Level • Install NodeJS & NPM • Install Git (to system path) • Install Bower : npm install -g bower • Install Grunt : npm install -g grunt-cli • Install Yo : npm install -g yo @ Project Level • yo enter enter enter • (or) • Install Grunt : npm install --save-dev grunt • Initialize NPM : npm init • Initialize Bower : bower init • (or) • grunt-int • Gruntfile.js generator • git clone https://github.com/gruntjs/grunt-init-gruntfile.git • grunt-init grunt-init-gruntfile/ @ Task Level • npm install --save-dev grunt-watch • npm install --save-dev grunt-nodemon • npm install --save-dev grunt-contrib-jshint • npm install --save-dev grunt-contrib-csshint • npm install --save-dev grunt-contrib-concat • npm install --save-dev grunt-contrib-uglify • npm install --save-dev grunt-contrib-cssmin • npm install --save-dev grunt-contrib-htmlmin • npm install --save-dev grunt-wiredep • npm install --save-dev grunt-shell • ...
- 13. Grunt vs Gulp
- 14. JavaScript Module Loaders AMD Asynchronous Module Definition CommonJS
- 15. CommonJS AMD
- 16. Demo
- 17. CSS Preprocessors Sass LESS Stylus - gem based - 4k+ github stars Common Features - Variables - Nesting - Mixins (Function) - Inheritance - Color functions - Operations - ... - npm based - 11k+ github stars - less.js browser support - npm based - 5k+ github stars
- 18. Demo
Editor's Notes
- #3: This is traditional dev. We need some problems to use additional tools. Talk about traditional dev, line by line. All ok but can reduce repetitive jobs.
- #4: (Also use the next screen) talk about Yoeman workflow talk about NPM talk about Bower talk about Grunt talk about Yo Relation each other, workflow, levels
- #11: Whole project scaffolding with generator-express Projects codes scaffolding with angular-fullstack Bower : bower install --save underscore yo angular-fullstack:endpoint cat yo angular-fullstack:route cat2 grunt build yo angular-fullstack:heroku
- #15: After writing js in modular way, we need to load it in modular way.
- #16: All the amd modules are loaded in asynchronous, so suitable for browser.