GulpPresentation.pdf

A modern front-end development workflow.
Optimize your WordPress theme with Gulp.js and Sass.

Transcript

2. Eleonora Patricola 2 Who I am Hello World ! My name is Eleonora I’m a Front-end web developer & Graphic Designer I love climbing & hiking mountains I’m Italian
3. Eleonora Patricola 3 I FELL IN LOVE WITH GULP
4. Eleonora Patricola 4 What is gulp.js? Gulp is a build system | tasks runner It’s open source https://github.com/gulpjs/gulp/ It uses Node.js as a platform Gulp source and your Gulp file, where you define tasks, are written in JavaScript. It’s easy to understand
5. Eleonora Patricola 5 Whether you begin a new project or you take up a project already started, there are three keywords: Why You need to use gulp.js? Time Budget Performance
6. Eleonora Patricola 6 GULP CAN HELP TO IMPROVE THESE THREE AREAS. What should it do?
7. Eleonora Patricola 7 In web development we do and reworking and redoing things many times but we know the languages and tools that we have and the features they offer. We know those features can help us assemble a solution. What can we do?
8. Eleonora Patricola 8 USING GULP We can change our development workflow by automating our repetitive tasks. We don’t have to change our code but only the way the code is being deployed
9. Eleonora Patricola 9 There are more than 2,500 plugins available in Gulp, There is a ton of flexibility in the things that you can do. You can also write your own plugin. In any case, you can find them easily at • gulpjs.com/plugins/ • npmjs.com • google search ;) Most plugins are pretty easy to use, and have good documentation. PLUGINS
10. Eleonora Patricola 10 Concat We use multiple css or js files for better organization (It’s easier to maintain). But the browser will open a ton of requests to our server. This is not an efficient way. With concat, we can merge or combine the files together into one large file. Minify | Uglify Remove unnecessary or redundant data without affecting the file. Files are loaded twice as fast. Live Reloads When a file is edited/saved, it automatically refreshes a browser. Prefixing CSS I won’t go into much detail about why using Autoprefixer is better than writing browser prefixes by hand.... Autoprefixer updates the stylesheets to add prefixes. PLUGINS
11. Eleonora Patricola 11 GULP & SASS Gulp is a tool that we’ll use to convert and pre-process SASS (or SCSS) into the plain CSS that browsers understand.
12. Eleonora Patricola 12 EASY INSTALLATION Installation of Node.js in your machine. Node.js can be downloaded for Windows, Mac and Linux. The most painless method of installing NodeJS and & NPM is through their website nodejs.org/download/. Node.js Node.js Gulp.js Gulp.js initiating npm project npm init //set up the package.json npm install gulp-g //to install gulp in a global installation nmp install gulp --save-dev //to install a local version of gulp Create a Gulpfile.js in the root of your project folder
13. Eleonora Patricola 13 How to install a plugin You can install them through npm: npm install --save-dev browser-sync For each plugin installed the plugin is added on package.json file into dev Dependences.
14. Eleonora Patricola 14 STRUCTURE OF A TYPICAL GULPFILE.JS
15. Eleonora Patricola 15 Required Modules var gulp = require (‘gulp’), minifyCSS = require(‘gulp-minify-css’), uglify = require (‘gulp-uglify’); Tasks • Task 1 • Task 2 • Task 3 Watch gulp.task(‘watch’, function() { gulp.watch(‘sass/**/*.scss’, [‘styles’]); });//run tasks when changes are detected Default gulp.task (‘default’,[‘delete’,’style’,’scripts’,’watch’]); //run the tasks simply by typing the gulp 01 02 04 03
16. Eleonora Patricola 16 TASKS ALLOW US TO INTERACT WITH PLUGINS. All tasks are similar. What’s a Task ?
17. Eleonora Patricola 17 THE GULP API Second DEFINE THE SOURCE FOLDER gulp.src tells Gulp what files or folder to use for the task First DEFINE A TASK-NAME The basic syntax of a gulp task is: gulp. task(‘task-name’, function() { // task }); Third DEFINE THE DESTINATION FOLDER gulp.dest tells Gulp where to pipe the re- sult in an out folder or destination folder once the task is completed A task is a function() with a return value which defines:
18. Eleonora Patricola 18 1 gulp.task(‘style’, function(){ 2 return gulp 3 .src(‘css/*.css’) 4 .pipe(minifyCSS()) 5 .pipe(rename({suffix:’.min’})) 6 .pipe(gulp.dest(‘assets’)); 7 }) 8 9 10 // Scripts Task 11 gulp.task(‘scripts’, function(){ 12 return gulp 13 .src(‘js/*.js’) 14 .pipe(plumber()) 15 .pipe(uglify()) 16 .pipe (jshint()) .pipe(rename({suffix:’.min’})) .pipe(gulp.dest(‘assets’)); }) STYLE & SCRIPT TASKS
19. Eleonora Patricola 19 WHERE TO FIND MORE My website https://eleonorapatricola.com SpeakerDeck https://speakerdeck.com/eleonorapatricola Github https://github.com/eleonorapatricola Twitter https://twitter.com/EEPatricola