efficient, error-free drupal development with js build tools
TRANSCRIPT
![Page 1: Efficient, Error-Free Drupal Development with JS Build Tools](https://reader034.vdocument.in/reader034/viewer/2022052117/589fdf351a28abf3238b4925/html5/thumbnails/1.jpg)
Efficient, Error FreeDrupal Developmentwith JS Build Tools
![Page 2: Efficient, Error-Free Drupal Development with JS Build Tools](https://reader034.vdocument.in/reader034/viewer/2022052117/589fdf351a28abf3238b4925/html5/thumbnails/2.jpg)
elevatedthird.comelevatedthird.com
Elevated Third is an independent, full-service digital marketing agency based in Denver, CO.
Founded over 10 years ago, our agency has a single purpose: to solve marketing and technology challenges for startups and Fortune 500s alike.
Nick SwitzerDevelopment Director
elevatedthird.com
Tanner LangleyFront End Developer
![Page 3: Efficient, Error-Free Drupal Development with JS Build Tools](https://reader034.vdocument.in/reader034/viewer/2022052117/589fdf351a28abf3238b4925/html5/thumbnails/3.jpg)
elevatedthird.com
DISCLAIMER
Error free refers to getting new members of your team up and running with the same tools. We won’t be focusing on testing in any form.
![Page 4: Efficient, Error-Free Drupal Development with JS Build Tools](https://reader034.vdocument.in/reader034/viewer/2022052117/589fdf351a28abf3238b4925/html5/thumbnails/4.jpg)
elevatedthird.com
OUR DEPENDENCY MANAGEMENT JOURNEY
Dependency management from ad-hoc Ruby to Javascript
![Page 5: Efficient, Error-Free Drupal Development with JS Build Tools](https://reader034.vdocument.in/reader034/viewer/2022052117/589fdf351a28abf3238b4925/html5/thumbnails/5.jpg)
elevatedthird.comelevatedthird.com
DISCOVERING NEW FRONT END TOOLS
● We found and incorporated a lot of Ruby-based tools like Sass (and it’s many extensions) for theming, and Capistrano for deployment
● They worked great in the short term, but current projects grew, new projects started and updates were released; long-term maintenance and dependency management quickly became problematic
● We realized we needed an automated, scalable solution
![Page 6: Efficient, Error-Free Drupal Development with JS Build Tools](https://reader034.vdocument.in/reader034/viewer/2022052117/589fdf351a28abf3238b4925/html5/thumbnails/6.jpg)
elevatedthird.comelevatedthird.com
RUBY TOOLS
● After some research and testing, we settled on RVM and Bundler to manage the required dependencies of our Ruby tools
● Problem solved! We had a versioned, easily repeatable way to make sure any developer who needed to work on a project with Ruby dependencies could be up and running in a matter of minutes
● After 2+ successful years of using those tools, we decided to revisit our needs
![Page 7: Efficient, Error-Free Drupal Development with JS Build Tools](https://reader034.vdocument.in/reader034/viewer/2022052117/589fdf351a28abf3238b4925/html5/thumbnails/7.jpg)
elevatedthird.comelevatedthird.com
● A unified system to add/compile javascript and sass, dev tools, libraries and other front end dependencies
RE-EVALUATING: OUR REQUIREMENTS
● Automated frontend workflows
● Flexibility to try new things
● Fast, simple and consistent dev onboarding
● Faster SASS compile times
● Improve Drupal CSS/JS compression
● Common Sass/JS structures and workflows
![Page 8: Efficient, Error-Free Drupal Development with JS Build Tools](https://reader034.vdocument.in/reader034/viewer/2022052117/589fdf351a28abf3238b4925/html5/thumbnails/8.jpg)
elevatedthird.comelevatedthird.com
JAVASCRIPT TOOLS
● Leverage a language everyone on the team was already very familiar with and using on a daily basis
● Incorporate something that will have value outside of Drupal use
![Page 10: Efficient, Error-Free Drupal Development with JS Build Tools](https://reader034.vdocument.in/reader034/viewer/2022052117/589fdf351a28abf3238b4925/html5/thumbnails/10.jpg)
elevatedthird.comelevatedthird.com
THE LANGUAGE: NODE
● JavaScript on the server
● Can be used for full web applications but we’re just using it for the developer tools
● Node vs io.js
● Node 4.0 released
● Use NVM to upgrade
![Page 11: Efficient, Error-Free Drupal Development with JS Build Tools](https://reader034.vdocument.in/reader034/viewer/2022052117/589fdf351a28abf3238b4925/html5/thumbnails/11.jpg)
elevatedthird.comelevatedthird.com
PACKAGE MANAGEMENT: NPM
● Node's package manager
● Manage dependencies via JSON
● Easily manage from command line
● Large library of node packages
![Page 12: Efficient, Error-Free Drupal Development with JS Build Tools](https://reader034.vdocument.in/reader034/viewer/2022052117/589fdf351a28abf3238b4925/html5/thumbnails/12.jpg)
elevatedthird.comelevatedthird.com
NPM WORKFLOW
1. Start a Project
2. Add New Package
3. Install All Dependencies For Project
Creates a package.json file
Downloads package and saves it to package.json
Downloads all dependencies listed in package.json
![Page 14: Efficient, Error-Free Drupal Development with JS Build Tools](https://reader034.vdocument.in/reader034/viewer/2022052117/589fdf351a28abf3238b4925/html5/thumbnails/14.jpg)
elevatedthird.comelevatedthird.com
TASK RUNNER: GULP
● Plain JS over configuration
● Faster than Grunt
● Large library of plugins ( not as large as Grunt )
● Quickly increasing in popularity
● Automates common tasks
![Page 15: Efficient, Error-Free Drupal Development with JS Build Tools](https://reader034.vdocument.in/reader034/viewer/2022052117/589fdf351a28abf3238b4925/html5/thumbnails/15.jpg)
elevatedthird.comelevatedthird.com
HOW GULP WORKS
● Plugins ( each plugin does one thing well )
● Streams
● Tasks
![Page 17: Efficient, Error-Free Drupal Development with JS Build Tools](https://reader034.vdocument.in/reader034/viewer/2022052117/589fdf351a28abf3238b4925/html5/thumbnails/17.jpg)
elevatedthird.comelevatedthird.com
FRONTEND PACKAGE MANAGEMENT: BOWER
● Similar to NPM but only handles frontend dependencies
● Quickly download/include/remove frontend dependencies in your project
● Only includes one of each dependency for all packages
![Page 18: Efficient, Error-Free Drupal Development with JS Build Tools](https://reader034.vdocument.in/reader034/viewer/2022052117/589fdf351a28abf3238b4925/html5/thumbnails/18.jpg)
elevatedthird.comelevatedthird.com
BOWER WORKFLOW
1. Start a Project
2. Add New Package
3. Install All Dependencies For Project
![Page 20: Efficient, Error-Free Drupal Development with JS Build Tools](https://reader034.vdocument.in/reader034/viewer/2022052117/589fdf351a28abf3238b4925/html5/thumbnails/20.jpg)
elevatedthird.comelevatedthird.com
DRUPAL + JS BUILD TOOLS
1. Only included as part of the theme directory
● Intended for theming use, large chunks of custom functionality should be part of a custom module
● Better organization for development, better performance for production
2. Adds an automation layer where Drupal doesn’t have one OOTB
![Page 21: Efficient, Error-Free Drupal Development with JS Build Tools](https://reader034.vdocument.in/reader034/viewer/2022052117/589fdf351a28abf3238b4925/html5/thumbnails/21.jpg)
elevatedthird.comelevatedthird.com
DRUPAL + JS BUILD TOOLS
● Improve minification and concatenation
● More efficient workflows with watch and sourcemaps
3. Should augment, not replace, existing Drupal functionality
4. Bower vs. Libraries API
● Does your Drupal installation need to be aware of the plugin you’re adding?
● Bower dependencies can be concatenated with theme assets
![Page 22: Efficient, Error-Free Drupal Development with JS Build Tools](https://reader034.vdocument.in/reader034/viewer/2022052117/589fdf351a28abf3238b4925/html5/thumbnails/22.jpg)
elevatedthird.com
THEME ASSET STRUCTURE
● Treat all front end assets in a similar way
● Focus on semantically-named files
● Compile to a single, optimized, production-ready asset
![Page 23: Efficient, Error-Free Drupal Development with JS Build Tools](https://reader034.vdocument.in/reader034/viewer/2022052117/589fdf351a28abf3238b4925/html5/thumbnails/23.jpg)
elevatedthird.comelevatedthird.com
TRANSFORMATIONS
● Concatenate
● Sourcemaps
● Minify
● Livereload
JS
● Concatenate
● Sourcemaps
● Minify
● Livereload
● Compile Sass
● Add autoprefixer
Sass
![Page 24: Efficient, Error-Free Drupal Development with JS Build Tools](https://reader034.vdocument.in/reader034/viewer/2022052117/589fdf351a28abf3238b4925/html5/thumbnails/24.jpg)
elevatedthird.comelevatedthird.com
PULLING IT TOGETHER
● Use drupal_add_js() and
drupal_add_css() to add assets
● Use conf variables in settings.php
for added control
![Page 26: Efficient, Error-Free Drupal Development with JS Build Tools](https://reader034.vdocument.in/reader034/viewer/2022052117/589fdf351a28abf3238b4925/html5/thumbnails/26.jpg)
elevatedthird.comelevatedthird.com
Q&ATIME FOR