![Page 1: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/1.jpg)
Using Grunt to Manage Drupal Build and Testing Tools
DrupalCon Los Angeles 2015 5/13/2015
![Page 2: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/2.jpg)
Director of Engineering
Email: [email protected]
Joe Turgeon
GitHub: @arithmetricTwitter: @arithmetric
![Page 3: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/3.jpg)
Does Drupal Need a Build Tool?
![Page 4: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/4.jpg)
Drupal development evolvedInstall and run approach:
Downloadfrom d.o
Add custom code
Rsync to server
Drush make
Add custom code
git commit/ deploy
Run code checks
Compile Sass
Behat tests
Build and test approach:
![Page 5: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/5.jpg)
Why build Drupal?• End anti-pattern of mixing core/contrib and
custom code
• Improve visibility into projects with a make file
• Simplify use of external libraries and resources
• Enforce reproducibility and automation
![Page 6: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/6.jpg)
Why test Drupal?• Complex sites need more testing than “clicking
around”
• Empower devs to produce quality code
• Find regressions, code style issues before integration
![Page 7: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/7.jpg)
Open questions• How can we make sure everyone uses the same
tools in the same way?
• How can we separate source code from dependencies and build output?
![Page 8: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/8.jpg)
Enter Grunt
![Page 9: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/9.jpg)
Why Grunt?• JavaScript-based task runner
• Community-supported, widely-adopted, flexible
• Only requirement is Node.js
• Straightforward approach: tasks in JS, config in JSON
• 4,000+ contributed plugins
![Page 10: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/10.jpg)
Grunt, sold!• Tutorial on writing a Grunt script to minify
JavaScript using the “uglify” tool: http://gruntjs.com/getting-started
![Page 11: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/11.jpg)
Introducing Grunt Drupal Tasks• Grunt plugin for common Drupal build and
testing tasks
• Started as R&D project in January 2014
• Since March 2014, used for many client projects
• Released on GitHub in September 2014
• Supports Drupal 7 and 8
![Page 12: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/12.jpg)
It has opinions• Enforces practice across team and CI env
• Presumes code workflow
• Verify quality of custom code
• Assemble core and contrib with Drush make
• Run tests
• Project scaffolding
![Page 13: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/13.jpg)
It brings greatness together
![Page 14: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/14.jpg)
It stays out of your way• Sensible defaults that can be overridden
• Manages its own dependencies
• Tools are ready to use and discoverable
![Page 15: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/15.jpg)
Introducing Gadget• Easy to start a Drupal project with Grunt Drupal
Tasks
• Yeoman Generator
• Released on GitHub in April 2015
![Page 16: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/16.jpg)
Getting Started
![Page 17: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/17.jpg)
Dependencies• Before starting, make sure you have:
• Node.js (includes npm)
• Recommended for all supporting tools:
• Bundler, Composer, Ruby, and RubyGems
![Page 18: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/18.jpg)
Install Gadget• Install Gadget and its dependencies:npm install -g generator-gadget grunt-cli yo
![Page 19: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/19.jpg)
Project set up• Use Gadget to set up a new Drupal project using
Grunt Drupal Tasks:yo gadget
![Page 20: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/20.jpg)
![Page 21: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/21.jpg)
![Page 22: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/22.jpg)
![Page 23: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/23.jpg)
![Page 24: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/24.jpg)
Project scaffolding
GDT project script and config
![Page 25: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/25.jpg)
Project scaffolding
Defines GDT and project dependencies
![Page 26: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/26.jpg)
Project scaffoldingGDT dependencies
![Page 27: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/27.jpg)
Project scaffolding
Custom Drupal code and Drush make file
![Page 28: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/28.jpg)
Project scaffolding
Test cases and config
![Page 29: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/29.jpg)
Everything in it’s right place• Modules
![Page 30: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/30.jpg)
Everything in it’s right place• Modules
• Install profiles
![Page 31: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/31.jpg)
Everything in it’s right place• Modules
• Install profiles
• Drush make file
![Page 32: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/32.jpg)
Everything in it’s right place• Modules
• Install profiles
• Drush make file
• Single-/multi-site config
![Page 33: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/33.jpg)
Everything in it’s right place• Modules
• Install profiles
• Drush make file
• Single-/multi-site config
• Static file replacements
![Page 34: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/34.jpg)
Everything in it’s right place• Modules
• Install profiles
• Drush make file
• Single-/multi-site config
• Static file replacements
• Themes
![Page 35: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/35.jpg)
Goals
• Accommodate (and isolate) custom code, Drupal core and contrib code, site settings files, and supporting tools
• Allow tools to work together with minimal glue
• Standardize project code base structure
![Page 36: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/36.jpg)
Building
![Page 37: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/37.jpg)
Project build• Use Grunt to build the project: grunt
![Page 38: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/38.jpg)
Default build steps• Composer/Bundler
• Validate code
• Drush make
• Scaffold (injects custom files into build output)
• Compile theme
* = if applicable/needed
![Page 39: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/39.jpg)
![Page 40: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/40.jpg)
![Page 41: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/41.jpg)
![Page 42: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/42.jpg)
![Page 43: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/43.jpg)
Build output
![Page 44: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/44.jpg)
Build output
![Page 45: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/45.jpg)
Build output
![Page 46: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/46.jpg)
Into build/html/
src/modules
![Page 47: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/47.jpg)
Into build/html/
src/profiles/mysite
![Page 48: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/48.jpg)
Into build/html/
src/sites/defaultsrc/sites/…
![Page 49: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/49.jpg)
Into build/html/
src/themes
![Page 50: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/50.jpg)
Symlinks, really?• No need to re-build after each change to a source file
• Build tasks ensure the links are set up correctly
• Relative links within the scaffold structure are portable
• XDebug works across symlinks
• Windows users: Beware! Copy alternative in the backlog
![Page 51: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/51.jpg)
Running automatically• Runs validate, theme compile, drush make (if
needed) whenever file changes are detected:grunt watch
![Page 52: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/52.jpg)
![Page 53: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/53.jpg)
![Page 54: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/54.jpg)
![Page 55: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/55.jpg)
![Page 56: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/56.jpg)
The way of the build• Captures the daily development workflow
• Produces a complete Drupal site docroot from custom source and a make file
• Build locally, build on integration
![Page 57: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/57.jpg)
Have it your way• Build tasks can be run individually
• Let’s look at the core tasks
![Page 58: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/58.jpg)
Validating
![Page 59: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/59.jpg)
Validating code quality• Uses lints and static code analysis to quantify
code quality
• Run PHP Lint and PHP Code Sniffer (with Drupal coding standards) with:grunt validate
![Page 60: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/60.jpg)
PHP Lint• Verifies syntax with PHP’s built-in lint tool
![Page 61: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/61.jpg)
PHP Code Sniffer• Verifies code style according to Drupal’s code
standards
![Page 62: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/62.jpg)
Check yo’ self• Encourage devs to validate code before committing
• Focus peer code review on architecture
• Fail integration builds or reject pull requests at certain thresholds
![Page 63: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/63.jpg)
Compiling Themes
![Page 64: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/64.jpg)
Front end tools• Compass was one of the first non-PHP tools to enter
common Drupal practice
• Configure GDT to define themes and compilation
approach
• Run individually with `grunt compile-theme`
![Page 65: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/65.jpg)
Compass• Include a Gemfile to install Compass and required gems
• Compass compile is run during build
![Page 66: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/66.jpg)
Grunt-to-Grunt• GDT will be able to delegate theme compilation to
Grunt-powered themes
• Theme-supplied Grunt scripts are run during build for
any configured themes
![Page 67: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/67.jpg)
Testing
![Page 68: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/68.jpg)
Testing site features• Provides Behat, the Drupal Extension, other
dependencies
• Testing with Behat requires an installed Drupal site accessible by URL
• Two options for running tests locally
• Using a local env (VM, Docker, W/MAMP)
• Using PHP/drush’s local test server
![Page 69: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/69.jpg)
![Page 70: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/70.jpg)
![Page 71: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/71.jpg)
![Page 72: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/72.jpg)
![Page 73: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/73.jpg)
Running tests• Run tests with: grunt test
![Page 74: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/74.jpg)
![Page 75: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/75.jpg)
![Page 76: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/76.jpg)
![Page 77: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/77.jpg)
Towards BDD• GDT supports a TDD/BDD workflow
• Write tests first
• Code iteratively with test feedback
• Automate using “watch” tasks
• Includes tools and test scripts to kickstart testing
![Page 78: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/78.jpg)
Packaging and Deployment
![Page 79: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/79.jpg)
Packaging and deployment• GDT and scaffolding are meant for local and
integration envs
• Prepares code for release
• Hand off to other tools for deployment
![Page 80: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/80.jpg)
Packaging• Produces a standalone, deployable Drupal docroot
• Excludes supporting tools and config
• Run with `grunt package`
![Page 81: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/81.jpg)
Rolling a release• Exploring how GDT can support the release process
• Planned approaches
• Commit to deployment repo (Acquia, Pantheon model)
• Integrate with release/deployment tools (Capistrano,
ShipIt)
![Page 82: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/82.jpg)
Configuring and Extending
![Page 83: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/83.jpg)
Configuring• Configurable settings in Gruntconfig.json
• Source and build paths
• CLI options for Behat
• Drush make arguments
• Theme compilation options
• Files to include/exclude from package
![Page 84: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/84.jpg)
Example configuration• Using Drush make `--working-copy` to keep git
files
![Page 85: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/85.jpg)
Extending• Extensions possible through Gruntfile.js changes
• Adding new tasks, replacing existing ones
• Running a shell script as a task
• Overriding the steps in the default build process
![Page 86: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/86.jpg)
Example extension• Adding the `grunt-eslint` plugin to perform JS linting
![Page 87: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/87.jpg)
Wrapping Up
![Page 88: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/88.jpg)
Pitching in• Try using Grunt Drupal Tasks on your next project
• File issues on GitHub to share how it could work better
• Patches welcome! (Submit pull requests on GitHub)
• Take on a “help wanted” issue on GitHub
![Page 89: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/89.jpg)
On the roadmap• More quality/testing tools (Sass/JS linting, PHPUnit)
• Delegation for Grunt-powered themes
• More options for releasing/deployment
• Build Drupal with Composer
• Integrate with Drupal Console
• More Gadget options (make files, theme support)
![Page 90: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/90.jpg)
Thanks! Questions?• Evaluate this session, download slides, and find
links:https://events.drupal.org/node/641
![Page 91: Using Grunt with Drupal 1024x768 Grunt...Using Grunt to Manage Drupal Build and Testing Tools DrupalCon Los Angeles 2015 5/13/2015](https://reader031.vdocuments.site/reader031/viewer/2022030416/5aa1c8d67f8b9ab4208c2bc7/html5/thumbnails/91.jpg)
PHASE2TECHNOLOGY.COM