Successfully reported this slideshow.
Your SlideShare is downloading. ×

Getting to Know Grunt by Writing Your Own Plugin

Ad

Getting to Know Grunt
By Writing Your Own Plugin
@jamiestrachan

Ad

1. Scaffold
2a. Develop
2b. Test
3. Publish

Ad

Scaffold
Scaffold Develop Test Publish

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Check these out next

1 of 42 Ad
1 of 42 Ad

Getting to Know Grunt by Writing Your Own Plugin

Download to read offline

Sure, you use Grunt to build your projects, but have you ever wondered how it all works? Where do those Grunt plugins come from? How are they put together? What do you do if there isn’t a plugin that meets your needs?

I wrote my first Grunt plugin to solve a very specific problem but ended up learning things about npm and Grunt that have benefited all of my projects. In this talk, I’ll walk you through how I created my plugin and how you can do the same. Even if you never get that far, you’ll take away useful ideas you can apply to your existing Grunt workflow.

Originally presented at Web Unleashed 2015.

Sure, you use Grunt to build your projects, but have you ever wondered how it all works? Where do those Grunt plugins come from? How are they put together? What do you do if there isn’t a plugin that meets your needs?

I wrote my first Grunt plugin to solve a very specific problem but ended up learning things about npm and Grunt that have benefited all of my projects. In this talk, I’ll walk you through how I created my plugin and how you can do the same. Even if you never get that far, you’ll take away useful ideas you can apply to your existing Grunt workflow.

Originally presented at Web Unleashed 2015.

Advertisement
Advertisement

More Related Content

Advertisement

Getting to Know Grunt by Writing Your Own Plugin

  1. 1. Getting to Know Grunt By Writing Your Own Plugin @jamiestrachan
  2. 2. 1. Scaffold 2a. Develop 2b. Test 3. Publish
  3. 3. Scaffold Scaffold Develop Test Publish
  4. 4. Scaffold Develop Test Publish
  5. 5. Running grunt-init
  6. 6. Running grunt-init
  7. 7. ? Scaffold Develop Test Publish
  8. 8. “This scaffolding task was always an odd-duck, and it really deserves it’s own project. So, we’ve broken it into a separate npm module, grunt-init … In the coming weeks, the Yeoman team will be replacing this task entirely, using their rails- inspired generator system.” February 18, 2013 https://bocoup.com/weblog/tearing-grunt-apart/ Scaffold Develop Test Publish
  9. 9. Scaffold Develop Test Publish
  10. 10. README.md Scaffolded plugin
  11. 11. package.json Scaffolded plugin
  12. 12. Develop Scaffold Develop Test Publish
  13. 13. Gruntfile.js grunt-sass-version
  14. 14. tasks/sass_version.js grunt-sass-version
  15. 15. Gruntfile.js grunt-sass-version grunt-sass-version tasks/sass_version.js
  16. 16. tasks/<plugin>.js Scaffolded plugin
  17. 17. tasks/lib/_sass_version.js grunt-sass-version
  18. 18. tasks/lib/_sass_version.js grunt-sass-version
  19. 19. package.json grunt-sass-version
  20. 20. Test Scaffold Develop Test Publish
  21. 21. Scaffold Develop Test Publish
  22. 22. Code Quality Scaffold Develop Test Publish
  23. 23. Unit Testing Scaffold Develop Test Publish
  24. 24. Gruntfile.js Scaffolded plugin
  25. 25. test/<plugin>_test.js Scaffolded plugin
  26. 26. Scaffold Develop Test Publish nodeunit tests sass_version.js lib/_sass_version.jsGrunt input Grunt output success, message
  27. 27. test/sass_version_test.js grunt-sass-version
  28. 28. Integration Testing Scaffold Develop Test Publish
  29. 29. package.json { "dependencies" : { "til" : "~1.2", "elf" : "^1.2.3", "asd" : "http://asdf.com/asdf.tar.gz", "gitproj" : "git://github.com/user/project.git#commit-ish", "dyl" : "file:../dyl" } } Scaffold Develop Test Publish
  30. 30. npm link
  31. 31. Publish Scaffold Develop Test Publish
  32. 32. npm publish Scaffold Develop Test Publish 1. register at npmjs.com 2. npm adduser 7. (npm unpublish)
  33. 33. So what?
  34. 34. Scaffolding solid tools available: grunt-init, Yeoman saves time avoids mistakes makes dull work easier you can find existing templates or make your own
  35. 35. Testing develop with testing in mind use an automated testing tool like nodeunit
  36. 36. Managing Dependencies npm link for local dependencies git repos for unregistered dependencies create distributed projects with npm
  37. 37. Contributing process is similar for: gulp plugins grunt-init templates Yeoman generators hubot scripts
  38. 38. Learn your tools
  39. 39. Thanks! Getting to Know Grunt By Writing Your Own Plugin @jamiestrachan

Editor's Notes

  • workflow problem using Sass and Grunt (ruby + node)
    grunt-sass-version to ensure Sass version since it can't be directly managed by npm
  • workflow problem using Sass and Grunt (ruby + node)
    grunt-sass-version to ensure Sass version since it can't be directly managed by npm
  • you publishing a plugin isn’t the point
    I got a lot out of the process of building one that I’ve used in other projects and wanted to share
    I went into the process looking at these tools as black boxes and benefited from getting better understanding
    I want you to think about your tool and consider what you could get out of investigating them more deeply
  • not that complicated
    really, 1-4 are just scaffolding, 5 is build, 6 is publish
  • not that complicated
    really, 1-4 are just scaffolding, 5 is build, 6 is publish
  • not that complicated
    really, 1-4 are just scaffolding, 5 is build, 6 is publish
  • sounds a lot like Yeoman
  • grunt-init is kind of replaced by Yeoman but both work
    point is that scaffolding projects is really useful but the tool isn’t that important
    grunt-init seems simpler but Yeoman has more community support
  • *highlight grunt.loadTasks('tasks');*
    this is the line that actually includes your plugin code
    I don’t like “black magic” code where things happen because of naming convention etc…
  • Start of my plugin
    this.options and this.data are how you talk to a plugin
  • The options object is used to override the default value you identify in your plugin
    Any key/value pairs provided in the task get passed into this.data
  • *collapse warnings*
    don’t need to go into too much detail here but a quick read makes it clear that this if file I/O
    maybe fine for your plugin but not for mine
  • my plugin
    gets expected version
    generated regex for testing based on options
    runs `sass –v` to get available Sass version
    compares available version to regex and return result object
  • need to include shelljs which means it’s a dependency for the module
  • devDependencies are what you need when you `git clone`
    dependencies are what you need when you `npm install`
    peerDependencies are required for a plugin relationship
  • don’t follow the order of this presentation
    think about testing with or before development, not after

    https://www.flickr.com/photos/catherinekolodziej/8866489274
    I wish: https://www.flickr.com/photos/37423935@N00/10373620734
  • included in scaffolding
    nice sanity check for your js
    make sure it’s checking all your js files
  • *show clean, webu, nodeunit tasks and registering test task*
    scaffolded Gruntfile.js sets up way to run the plugin itself, identifies the tests, then created the test task
  • scaffolded test/plugin_test.js runs tests against created output files using ‘fixtures’ and ‘expected’
  • my tests call on _sass_version which is my library
  • Catch-22
    don’t want to publish module until it’s testing
    can’t test until published (at least with normal way of using npm)
  • we can acquire dependencies by version number, tarball, git URL, or local path
  • npm link creates a symbolic link to a local dependency
  • Started as scratching my own itch
    Became about contributing to something bigger
    But ultimately was a powerful opportunity to “level up” my skills
    You can read the docs and browse the code but building something is the best way to learn

×