Automating Front-End Workflow

1,686 views

Published on

Automating and optimize your everyday workflow with Grunt.js, bower, be more productive, happier with your work.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,686
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
20
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Automating Front-End Workflow

  1. 1. Automate your front-end workflow with grunt.js
  2. 2. About this This talk is about workflow patterns using Grunt reinvent your work, love JS more make your life easier
  3. 3. Who Dimitris Tsironis Front-end Engineer at Splunk (ex-Bugsense) ! passionate about bringing BigData to the masses, eating bacon & geeing around
  4. 4. First, a story from good ol’ days
  5. 5. First <a href="javascript:void(0)" onclick=“myJsFunc();”> Run JavaScript Code!!!!11! </a>
  6. 6. First <a href="javascript:void(0)" onclick=“myJsFunc();”> Run JavaScript Code!!!!11! </a>
  7. 7. Now
  8. 8. Now
  9. 9. *cough* *cough*
  10. 10. Problem typical js file, named stuff.js
  11. 11. grunt is a task-based command line build tool for JavaScript projects
  12. 12. Grunt.js is used for Concatenation Testing with headless browsers JS linting basically, whatever
  13. 13. Installation Install the grunt cli tool $ npm install -g grunt-cli
  14. 14. Installation Edit your package.json file { "name": "my-project-name", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.2", "grunt-contrib-jshint": "~0.6.3" } } Then in your Gruntfile.js add grunt.loadNpmTasks(‘grunt-contrib-uglify');
  15. 15. Gruntfile.js module.exports = function(grunt) { ! // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */n' }, build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } } }); ! // Load the plugin that provides the "uglify" task. grunt.loadNpmTasks('grunt-contrib-uglify'); ! // Default task(s). grunt.registerTask('default', ['uglify']); ! };
  16. 16. Concatenating module: grunt-contrib-concat concat: { ‘assets/js/main.js’: [ ‘js/libs/jquery.js’, ‘js/libs/underscore.js’ ‘js/libs/backbone.js, ‘js/src/app.js’], ‘assets/css/style.css’: [ ‘css/bootstrap.css’, ‘css/main.css’] }
  17. 17. Compiling LESS module: grunt-contrib-less less: { dashboard: { files: { "css/main.css": "less/style.less", "css/landing.css": "less/landing.less", } } }
  18. 18. Running specs #1 module: grunt-contrib-jasmine jasmine: { src: [ 'specs/project.js'], options: { host: 'http://localhost:7000/', vendor: [ ‘libs/jquery.js’], helpers: [ 'specs/jasmine-jquery/lib/jasmine-jquery.js', ‘specs/bower_components/sinonjs/sinon.js' ], template: 'specs/index.tmpl', specs: 'specs/build/specs.js', keepRunner: true } },
  19. 19. Running specs #2 module: grunt-contrib-connect connect: { server: { options: { port: 7000 } } } Registering our custom “specs” tasks grunt.registerTask('specs', ['connect', 'jasmine']);
  20. 20. Watching files module: grunt-contrib-watch watch: { gruntfile: { files: '<%= jshint.gruntfile.src %>', tasks: ['jshint:gruntfile', 'concat', 'less'] }, less: { files: “less/**/*.less”, /* or use an array */ tasks: [‘less’, ‘concat’] }, specs: { files: “specs/**/*Specs.js” tasks: [‘specs’] } }
  21. 21. Live reload module: grunt-reload reload: { port: 6001, proxy: { host: 'localhost' } }, watch: { less: { files: “less/**/*.less”, /* or use an array */ tasks: [‘less’, ‘concat’, ‘reload’] } }
  22. 22. bower a package manager for the web
  23. 23. Installation Install the bower tool $ npm install -g bower
  24. 24. Usage Install the bower tool $ bower install <package> $ bower install <package>#<version> or just install dependencies from bower.json $ bower install
  25. 25. Search Search the packages $ bower search <search-term>
  26. 26. /etc/ Help is always provided $ bower help
  27. 27. Defining a new package $ bower init { "name": "my-project", "version": "1.0.0", "main": "path/to/main.css", "ignore": [ ".jshintrc", "**/*.txt" ], "dependencies": { "<name>": "<version>" }, "devDependencies": { "<test-framework-name>": "<version>" } }
  28. 28. Registering a package $ bower register <package-name> <git-endpoint> a valid manifest JSON Git tags (using semver) be available at a Git endpoint (e.g., GitHub); remember to push your Git tags!
  29. 29. Grunt homepage Bower homepage Bugsense.js plugin (see Gruntfile.js & bower.json) Addy Osmani presentation (incl. Yeomann) Grunt plugins
  30. 30. Thanks! twitter @tsironakos github @tsironis

×