Getting to Know Grunt by Writing Your Own Plugin
Report
Jamie StrachanFollow
Sep. 16, 2015•0 likes•420 views
Getting to Know Grunt by Writing Your Own Plugin
Sep. 16, 2015•0 likes•420 views
Download to read offline
Report
Technology
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.
Jamie StrachanFollow
Recommended
Cloud Native Progressive Web Applications - Denver JUG 2016Matt Raible
What's New in JHipsterLand - DevNexus 2017Matt Raible
Building a PWA with Ionic, Angular and Spring Boot - Jfokus 2017Matt Raible
When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)Ricardo Castelhano
Introduction to yeomanxydinesh
Headless BDD & Responsive Test AutomationShashikant Jagtap
More Related Content
What's hot
iOS Developers Conference-iOS Automation with Cucumber, Appium and SaucelabsShashikant Jagtap
Lazy angular w/ webpackRich Snapp
Dyno cycling behavior of HerokuShunji Konishi
Dockerising Appium : London Appium MeetupShashikant Jagtap
J hipsterRasmita Jena
Angular & railsneodynamic
Similar to Getting to Know Grunt by Writing Your Own Plugin
Groovy Maven BuildsEvgeny Goldin
Scripting Support in GFv3 Prelude - Full VersionEduardo Pelegri-Llopart
G*なクラウド 雲のかなたに ショートバージョンTsuyoshi Yamamoto
GruntAndrii Siusko
Grunt & Front-end WorkflowPagepro
Let Grunt do the work, focus on the fun!Dirk Ginader
![Let Grunt do the work, focus on the fun! [Open Web Camp 2013]](https://cdn.slidesharecdn.com/ss_thumbnails/2013-gruntjs-openwebcamp-130715113721-phpapp02-thumbnail.jpg?width=2048&height=1162&fit=bounds)
Recently uploaded
Data Integrity TrendsPrecisely
How to DAO?Liveplex
Metadata & Discovery Group Conference 2023 - Day 1 ProgrammeCILIP MDG
Swiss Re Reinsurance Solutions - Automated Claims Experience – Insurer Innova...The Digital Insurer
class and object in c++.pptxAdarsh College, Hingoli
BuilderAI Proposal_MalesniakMichael Lesniak
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
- 8. Running grunt-init
- 9. Running grunt-init
- 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
- 13. README.md Scaffolded plugin
- 14. package.json Scaffolded plugin
- 15. Develop Scaffold Develop Test Publish
- 16. Gruntfile.js grunt-sass-version
- 17. tasks/sass_version.js grunt-sass-version
- 18. Gruntfile.js grunt-sass-version grunt-sass-version tasks/sass_version.js
- 19. tasks/<plugin>.js Scaffolded plugin
- 20. tasks/lib/_sass_version.js grunt-sass-version
- 21. tasks/lib/_sass_version.js grunt-sass-version
- 22. package.json grunt-sass-version
- 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
- 27. Gruntfile.js Scaffolded plugin
- 28. test/<plugin>_test.js Scaffolded plugin
- 29. Scaffold Develop Test Publish nodeunit tests sass_version.js lib/_sass_version.jsGrunt input Grunt output success, message
- 30. test/sass_version_test.js grunt-sass-version
- 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