Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Automating your workflow with Grunt

Automating your workflow with Grunt

Ca017edd68f0d216c4761445bf9f28e7?s=128

Dimitris Tsironis

December 20, 2013
Tweet

Transcript

  1. Automate your front-end workflow with grunt.js

  2. About this This talk is about workflow patterns using Grunt

    reinvent your work, love JS more make your life easier
  3. Who Dimitris Tsironis Front-end Engineer at Splunk (ex-Bugsense) ! passionate

    about bringing BigData to the masses, eating bacon & geeing around
  4. First, a story from good ol’ days

  5. <a href="javascript:void(0)" onclick=“myJsFunc();”> Run JavaScript Code!!!!11! </a> First

  6. <a href="javascript:void(0)" onclick=“myJsFunc();”> Run JavaScript Code!!!!11! </a> First

  7. Now

  8. Now

  9. None
  10. None
  11. None
  12. *cough* *cough*

  13. Problem typical js file, named stuff.js

  14. grunt is a task-based command line build tool for JavaScript

    projects
  15. Grunt.js is used for Concatenation Testing with headless browsers JS

    linting basically, whatever
  16. Installation $ npm install -g grunt-cli Install the grunt cli

    tool
  17. 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" } } grunt.loadNpmTasks(‘grunt-contrib-uglify'); Then in your Gruntfile.js add
  18. 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']); ! };
  19. 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’] }
  20. Compiling LESS module: grunt-contrib-less less: { dashboard: { files: {

    "css/main.css": "less/style.less", "css/landing.css": "less/landing.less", } } }
  21. 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 } },
  22. Running specs #2 module: grunt-contrib-connect connect: { server: { options:

    { port: 7000 } } } grunt.registerTask('specs', ['connect', 'jasmine']); Registering our custom “specs” tasks
  23. 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’] } }
  24. Live reload module: grunt-reload reload: { port: 6001, proxy: {

    host: 'localhost' } }, watch: { less: { files: “less/**/*.less”, /* or use an array */ tasks: [‘less’, ‘concat’, ‘reload’] } }
  25. bower a package manager for the web

  26. Installation $ npm install -g bower Install the bower tool

  27. Usage $ bower install <package> Install the bower tool $

    bower install <package>#<version> or just install dependencies from bower.json $ bower install
  28. Search $ bower search <search-term> Search the packages

  29. /etc/ $ bower help Help is always provided

  30. 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>" } }
  31. 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!
  32. Bugsense.js plugin (see Gruntfile.js & bower.json) Addy Osmani presentation Grunt

    plugins Bower homepage (incl. Yeomann) Grunt homepage
  33. Thanks! twitter @tsironakos github @tsironis