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

323 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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
323
On SlideShare
0
From Embeds
0
Number of Embeds
43
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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
  • 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

    ×