Alleviate headaches, tedious tasks and make more time in your day for more useful things! Start gulping your code today.

1. Gulp.js

2. 2
Agenda
• What is gulp.js?
• How can we use it?
• Helpful Examples

3. What is gulp.js?

4. 4
Where We’ve Been
• Plain CSS
• SASS
• Compass
• Compass Watch

5. 5
Where We Are Going Can Go
As always, is it the right tool for the job?
• “Gulp is a toolkit that helps you automate
painful or time-consuming tasks in your
development workflow.”
• Gulp allows you to control CLI tasks via
code/JS syntax.
• Gulp.js, that’s a javascript file right? How does
that work?
• Enter Node.js package manager.
• A familiar alternative: Grunt

6. 6
Setup/Installation
• Install NPM, if you don’t already have it.
• https://nodejs.org/en/
• brew install node
• Install gulp
• npm install --global gulp-cli
• From anywhere.
• npm install --save-dev gulp
• Inside project root.
• https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md

7. How can we use it?

8. 8
Automating the Front-end Workflow
Making “pipe” dreams a reality.
• Gulp-uglify
• Minify CSS/JS
• Gulp-sass
• SASS file compiler
• Gulp-compass
• Leverage the power of the compass SASS library.
• Don’t give up all your favorite mixins just yet!
• Gulp-autoprefixer
• Automatically post-process vendor prefixes.
• Developer preference on compass vs. autoprefixer
style prefixing.

9. 9
Automating the Front-end Workflow
Making “pipe” dreams a reality.
• Gulp-sourcemaps
• Generate helpful JS/CSS sourcemaps.
• Gulp-livereload
• “LiveReload monitors changes in the file system. As soon as
you save a file, it is preprocessed as needed, and the browser
is refreshed.”
• Should only be used when drupal CSS/JS caches have been
turned off or piped with a drush cc.
• Gulp-plumber
• Graceful error handling during pipe operations.
• Avoid frustration.
• Gulp-notify
• When paired with plumber, send helpful messages

10. 10
Automating the Front-end Workflow
Making “pipe” dreams a reality.
• Gulp-folders
• Work with folders and treat them as package
names.
• Usually a dependency for more complex plugins.
• Path
• Just as it says, retrieves file paths for other plugins
to read from.
• Usually a dependency for more complex plugins.
• Gulp-exec or gulp-shell
• Run CLI commands from gulp.
• Could useful if paired with drush cc.
• Might even be used to automate D8 drupal
console/composer commands.

11. 11
Code Analysis
Setting up for complimenting presentations.
• Gulp-phplint
• Validate PHP.
• Gulp-csslint
• Validate CSS.
• Gulp-scss-lint
• Validate SASS.
• Gulp-jslint
• Validate strict JS.
• Gulp-jshint
• Validate more complex JS and jQuery.

12. Helpful Examples

13. 13
Let’s Get Started – Scaffolding
Turn the vales and let the code flow through the pipes.
• First, create a file “package.json” in the root of
our theme folder.
• A few key things to add here.
• See the next slide.
• Now, let’s install our dependencies from our
CLI.
• npm install --save-dev gulp gulp-uglify gulp-sass
gulp-autoprefixer gulp-plumber gulp-notify gulp-
sourcemaps gulp-livereload gulp-concat path gulp-
folders
• Finally, create “gulpfile.js” next to our
package.json file or name it whatever was
specified in package.json.

14. 14
Let’s Get Started
Turn the vales and let the code flow through the pipes.

15. 15
Let’s Get Started
Turn the vales and let the code flow through the pipes.

16. 16
Finish your tasks
Always good to have a default task.

17. 17
Watch it all work
Run our tasks.
• Navigate to our project root in the CLI.
• Run “gulp”
• Specify individual tasks if you don’t have a “default”
task.
• Make changes/additions to your SASS files and
let gulp handle the rest.

18. 18
References
• https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md
• Install instructions.
• https://github.com/gulpjs/gulp/tree/master/docs/recipes
• Handy outlines for common gulp related workflows.
• https://github.com/gulpjs/gulp/blob/master/docs/README.md#articl
es
• Ideas/workflows from other developers.
• https://github.com/gulpjs/gulp/blob/master/docs/API.md
• Become an expert with the built in Gulp library.
• http://gulpjs.com/plugins/
• Where to look for more handy gulp-friendly plugins.