Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Getting to Know Grunt
By Writing Your Own Plugin
@jamiestrachan
1. Scaffold
2a. Develop
2b. Test
3. Publish
Scaffold
Scaffold Develop Test Publish
Scaffold Develop Test Publish
Running grunt-init
Running grunt-init
?
Scaffold Develop Test Publish
“This scaffolding task was always an odd-duck, and it really
deserves it’s own project. So, we’ve broken it into a separat...
Scaffold Develop Test Publish
README.md
Scaffolded plugin
package.json
Scaffolded plugin
Develop
Scaffold Develop Test Publish
Gruntfile.js
grunt-sass-version
tasks/sass_version.js
grunt-sass-version
Gruntfile.js
grunt-sass-version grunt-sass-version
tasks/sass_version.js
tasks/<plugin>.js
Scaffolded plugin
tasks/lib/_sass_version.js
grunt-sass-version
tasks/lib/_sass_version.js
grunt-sass-version
package.json
grunt-sass-version
Test
Scaffold Develop Test Publish
Scaffold Develop Test Publish
Code Quality
Scaffold Develop Test Publish
Unit Testing
Scaffold Develop Test Publish
Gruntfile.js
Scaffolded plugin
test/<plugin>_test.js
Scaffolded plugin
Scaffold Develop Test Publish
nodeunit tests
sass_version.js
lib/_sass_version.jsGrunt input Grunt output
success,
message
test/sass_version_test.js
grunt-sass-version
Integration Testing
Scaffold Develop Test Publish
package.json
{ "dependencies" : {
"til" : "~1.2",
"elf" : "^1.2.3",
"asd" : "http://asdf.com/asdf.tar.gz",
"gitproj" : "gi...
npm link
Publish
Scaffold Develop Test Publish
npm publish
Scaffold Develop Test Publish
1. register at npmjs.com
2. npm adduser
7. (npm unpublish)
So what?
Scaffolding
solid tools available: grunt-init, Yeoman
saves time
avoids mistakes
makes dull work easier
you can find exist...
Testing
develop with testing in mind
use an automated testing tool like nodeunit
Managing Dependencies
npm link for local dependencies
git repos for unregistered dependencies
create distributed projects ...
Contributing
process is similar for:
gulp plugins
grunt-init templates
Yeoman generators
hubot scripts
Learn your tools
Thanks!
Getting to Know Grunt By Writing Your Own Plugin
@jamiestrachan
Getting to Know Grunt by Writing Your Own Plugin
Getting to Know Grunt by Writing Your Own Plugin
Getting to Know Grunt by Writing Your Own Plugin
Upcoming SlideShare
Loading in …5
×

Getting to Know Grunt by Writing Your Own Plugin

351 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

×