Download to read offline
Gulp js
- 1.
- 2. 2 Agenda • What isgulp.js? • How can we use it? • Helpful Examples
- 3.
- 4. 4 Where We’ve Been •Plain CSS • SASS • Compass • Compass Watch
- 5. 5 Where We AreGoing 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 weuse it?
- 8. 8 Automating the Front-endWorkflow 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-endWorkflow 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-endWorkflow 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 upfor 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.
- 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 Turnthe vales and let the code flow through the pipes.
- 15. 15 Let’s Get Started Turnthe vales and let the code flow through the pipes.
- 16. 16 Finish your tasks Alwaysgood to have a default task.
- 17. 17 Watch it allwork 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 • Installinstructions. • 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.
Editor's Notes
- #3 Achieve
- #5 Where does every website start? HTML, CSS and JS. For the purpose of this presentation we’ll focus on front-end workflows and how we can simplify daily tasks. Background: First there was SASS which provided a developer friendly syntax for nesting selectors and mixins. Then there was compass which provided us a large library of useful mixins. When paired with compass watch our SASS files automatically compile into CSS.
- #6 Gulp means automation. Since gulp is javascript based, we can use code to control our workflow. Gulp is similar to grunt, without having to learn the grunt task runner syntax. Is gulp a direct replacement for compass? Absolutely not. In fact, gulp has a plugin that allows compass to be used in conjunction with it. Gulp is a task runner. That means we can run “gulp” in the root directory of our projects and let the gulpfile.js handle repetitive tasks from our CLIs. What’s the main benefit to gulp vs. something like just running compass watch? Extensibility. Gulp can be used for more than just front-end workflows. NPM background: Single threaded asynchronous event loop that entirely runs off of javascript.
- #7 Gulp means automation. Since gulp is javascript based, we can use code to control our workflow. Gulp is similar to grunt, without having to learn the grunt task runner syntax. Is gulp a direct replacement for compass? Absolutely not. In fact, gulp has a plugin that allows compass to be used in conjunction with it. Gulp is a task runner. That means we can run “gulp” in the root directory of our projects and let the gulpfile.js handle repetitive tasks from our CLIs. What’s the main benefit to gulp vs. something like just running compass watch? Extensibility. Gulp can be used for more than just front-end workflows. NPM background: Single threaded asynchronous event loop that entirely runs off of javascript.
- #9 Achieve
- #10 Achieve
- #11 Achieve
- #12 Achieve
- #14 Achieve
- #15 Achieve
- #16 Achieve
- #17 Achieve
- #18 Achieve
- #19 Achieve