Front End Development Tool Chain
•Download as PPTX, PDF•
0 likes•1,364 views
In this slides I am mainly talking about how to install the tools and how to run it locally. I have not covered in depth each concept. Just I am giving the overview.
Recommended
More Related Content
Similar to Front End Development Tool Chain
Similar to Front End Development Tool Chain (20)
Recently uploaded
Recently uploaded (20)
Front End Development Tool Chain
- 1. Front End Development Tool Chain
- 2. About Me Ashwin Preetham Lobo MTS.
- 3. Roadmap Total Time: 2 hours 1. Templates a. Traditional way of loading data, rendering html, appending b. How we can solve this? c. Examples of templates - underscore, handlebars 2. Modular Development a. Traditional way of loading script b. Dependency Management c. RequireJS 3. CSS Pre-processors a. SASS 1. Build Tool a. Grunt
- 4. Tools needed What do I need to code? 1. Local HTTP server – WAMP/MAMP 2. Text/Code editor – I prefer Sublime Text
- 5. Templates
- 6. 1. Traditional way of loading data, rendering html, appending 2. By using templates how we solve this issue. More faster - regex. 3. Types of Templates * Embedded JavaScript Templates (Underscore, jQuery-templates, ….) *Logic Less Templates (Mustache, Handlebars, DustJs, …) Templates
- 7. Template pre-compilation. Install “handlebars” npm module $sudo npm install –g handlebars $handlebars <input_file_name>.handlebars –f <output_file_name>.js
- 10. What is RequireJs? *Module loader for JavaScript *Loads the files in asynchronous mode
- 11. How RequireJs Works • data-main property • Configure Call • Define Call • Require Call
- 13. How to install SASS Using Ruby If you are using Windows, first you need to install Ruby. Download the RubyInstaller.exe from http://rubyinstaller.org/ If you are using Linux/Mac, Ruby will be by default Installed. Install Compass Gem install compass //for windows Sudo gem install compass //for Linux/Mac
- 14. Create sass project using compass $compass create <project-name>
- 15. Compass – clean, compile, watch $ compass compile Compiles the sass files into css $ compass clean Clean the files from the css directory $compass watch Watch the folder and compile the sass into css, when there is a change
- 16. Using libsass(nodejs) Install “node-sass” node module $sudo npm install node-sass Compiling the sass to CSS
- 17. What is Grunt?
- 18. How to configure Grunt NodeJs Download and install nodejs from https://nodejs.org/ Install grunt-cli $npm install -g grunt-cli
- 19. Grunt Project Setup • package.json • Gruntfile.js
- 20. Configuring a task Registering a Task grunt.registerTask(taskName, [description, ] taskList)
- 21. Running a task $ grunt <target_name>
- 22. Thanks Q/A