Getting to Know Grunt by Writing Your Own Plugin
•
0 likes•420 views
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.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Getting to Know Grunt by Writing Your Own Plugin
Similar to Getting to Know Grunt by Writing Your Own Plugin (20)
Recently uploaded
Recently uploaded (20)
Getting to Know Grunt by Writing Your Own Plugin
- 1. Getting to Know Grunt By Writing Your Own Plugin @jamiestrachan
- 5. 1. Scaffold 2a. Develop 2b. Test 3. Publish
- 6. Scaffold Scaffold Develop Test Publish
- 7. Scaffold Develop Test Publish
- 10. ? Scaffold Develop Test Publish
- 11. “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
- 12. Scaffold Develop Test Publish
- 15. Develop Scaffold Develop Test Publish
- 23. Test Scaffold Develop Test Publish
- 24. Scaffold Develop Test Publish
- 25. Code Quality Scaffold Develop Test Publish
- 26. Unit Testing Scaffold Develop Test Publish
- 29. Scaffold Develop Test Publish nodeunit tests sass_version.js lib/_sass_version.jsGrunt input Grunt output success, message
- 31. Integration Testing Scaffold Develop Test Publish
- 32. 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
- 33. npm link
- 34. Publish Scaffold Develop Test Publish
- 35. npm publish Scaffold Develop Test Publish 1. register at npmjs.com 2. npm adduser 7. (npm unpublish)
- 36. So what?
- 37. Scaffolding solid tools available: grunt-init, Yeoman saves time avoids mistakes makes dull work easier you can find existing templates or make your own
- 38. Testing develop with testing in mind use an automated testing tool like nodeunit
- 39. Managing Dependencies npm link for local dependencies git repos for unregistered dependencies create distributed projects with npm
- 40. Contributing process is similar for: gulp plugins grunt-init templates Yeoman generators hubot scripts
- 41. Learn your tools
- 42. 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