Drupal-Nis: Good Guy Gulp

Slide 1

Slide 1 text

@MacMladen Good Guy Gulp v.2 2018-05-19 ]{ Good Guy Gulp TASK RUNNER 1 Mladen Đurić @MacMladen Drupal Meetup Niš Deli prostor, 19.05.2018.

Slide 2

Slide 2 text

@MacMladen ]{ 2 MLADEN ĐURIĆ a.k.a MacMladen $ whoami A very boring incompetent guy

Slide 3

Slide 3 text

@MacMladen ]{ Good Guy Gulp v.2 2018-05-19 3 As soon as I started learning to code I was so fascinated and wanted to share what I learned. I was hardly into secondary school when I organized ﬁrst computer club and gave ﬁrst BASIC course. It was around 1982. In 2016 I have started a Professional Web Development School ]{oder.

Slide 4

Slide 4 text

@MacMladen ]{ Good Guy Gulp v.2 2018-05-19 All about us ]{ODER 4

Slide 5

Slide 5 text

@MacMladen Good Guy Gulp v.2 2018-05-19 ]{ Gulp OK, TASK RUNNER, BUT…? 5

Slide 6

Slide 6 text

@MacMladen Good Guy Gulp v.2 2018-05-19 ]{ 6 Gulp nodejs streams task runner gulp.js is an open-source JavaScript toolkit,   used as a streaming build system in front-end web development. It is built on Node.js and npm, used for automation of time-consuming and repetitive tasks involved in web development like minification, concatenation, cache busting, unit testing, linting, optimization, etc. gulp uses a code-over-configuration approach to define its tasks and relies on its small, single-purposed plugins to carry them out. The gulp ecosystem includes more than 300 such plugins.

Slide 7

Slide 7 text

@MacMladen ]{ Good Guy Gulp v.2 2018-05-19 INTRODUCE YOURSELF! 7 • Your… style weapon of choice? (gulp, grunt, npm…) • Your ﬁeld? (frontend, developer) • Coding experience? (none, some, pro)

Slide 8

Slide 8 text

@MacMladen ]{ Good Guy Gulp v.2 2018-05-19 TIMETABLE: 1. Why task runners 2. Task runners 3. Node environment 4. Starting with gulp 5. Copy resources 6. Compile SCSS 7. Uglify JS 8. Watch for change 9. Refresh devices 10. Gulp references 8

Slide 9

Slide 9 text

@MacMladen Good Guy Gulp v.2 2018-05-19 ]{ WHY TASK RUNNERS? 9

Slide 10

Slide 10 text

@MacMladen ]{ Good Guy Gulp v.2 2018-05-19 10 DRY

Slide 11

Slide 11 text

@MacMladen ]{ Good Guy Gulp v.2 2018-05-19 11 DON’T REPEAT YOURSELF

Slide 12

Slide 12 text

@MacMladen Good Guy Gulp v.2 2018-05-19 ]{ TASK RUNNERS 12

Slide 13

Slide 13 text

@MacMladen ]{ Good Guy Gulp v.2 2018-05-19 HOW ABOUT…? 13

Slide 14

Slide 14 text

@MacMladen ]{ Good Guy Gulp v.2 2018-05-19 TOOLS 14

Slide 15

Slide 15 text

@MacMladen ]{ Good Guy Gulp v.2 2018-05-19 NODE PACKAGE MANAGER 15

Slide 16

Slide 16 text

@MacMladen ]{ Good Guy Gulp v.2 2018-05-19 GRUNT 16

Slide 17

Slide 17 text

@MacMladen ]{ Good Guy Gulp v.2 2018-05-19 WEBPACK 17

Slide 18

Slide 18 text

@MacMladen Good Guy Gulp v.2 2018-05-19 ]{ NODE ENVIRONMENT 18

Slide 19

Slide 19 text

@MacMladen ]{ Good Guy Gulp v.2 2018-05-19 INSTALL NODE ON YOUR SYSTEM 19

Slide 20

Slide 20 text

@MacMladen ]{ Good Guy Gulp v.2 2018-05-19 INSTALL NODE ON YOUR SYSTEM 20

Slide 21

Slide 21 text

@MacMladen ]{ Good Guy Gulp v.2 2018-05-19 INITIALIZE PROJECT 21

Slide 22

Slide 22 text

@MacMladen Good Guy Gulp v.2 2018-05-19 ]{ STARTING WITH GULP 22

Slide 23

Slide 23 text

@MacMladen ]{ Good Guy Gulp v.2 2018-05-19 WHICH GULP 3 OR 4? 23

Slide 24

Slide 24 text

@MacMladen ]{ Good Guy Gulp v.2 2018-05-19 ADD GULP 24

Slide 25

Slide 25 text

@MacMladen ]{ Good Guy Gulp v.2 2018-05-19 CODE OVER CONFIGURATION 25

Slide 26

Slide 26 text

@MacMladen ]{ Good Guy Gulp v.2 2018-05-19 GULP METHODS 26 gulp.src(globs[, options]) gulp.dest(path[, options]) gulp.task(name [, deps, fn]) gulp.watch(glob [, opts], tasks) gulp.watch(glob [, opts, cb])

Slide 27

Slide 27 text

@MacMladen ]{ Good Guy Gulp v.2 2018-05-19 GULP 4 METHODS 27 gulp.src(globs[, options]) - Emit files matching one or more globs gulp.dest(path[, options]) - Write files to directories gulp.symlink(folder[, options]) - Write files to symlinks gulp.task([name,] fn) - Define tasks gulp.lastRun(taskName, [timeResolution]) - Timestamp of last OK run gulp.parallel(...tasks) - Run tasks in parallel gulp.series(…tasks) - Run tasks in series gulp.watch(globs[, opts][, fn]) - Do something when a file changes gulp.tree(options) - Get the tree of tasks gulp.registry([registry])- Get or set the task registry

Slide 28

Slide 28 text

@MacMladen ]{ Good Guy Gulp v.2 2018-05-19 GULP FILE ANATOMY 28

Slide 29

Slide 29 text

@MacMladen ]{ Good Guy Gulp v.2 2018-05-19 GULP FILE ANATOMY 29

Slide 30

Slide 30 text

@MacMladen ]{ Good Guy Gulp v.2 2018-05-19 GULP FILE ANATOMY 30

Slide 31

Slide 31 text

@MacMladen Good Guy Gulp v.2 2018-05-19 ]{ COPY RESOURCES 31

Slide 32

Slide 32 text

@MacMladen ]{ Good Guy Gulp v.2 2018-05-19 SRC -> DEST 32

Slide 33

Slide 33 text

@MacMladen Good Guy Gulp v.2 2018-05-19 ]{ COMPILE SCSS 33

Slide 34

Slide 34 text

@MacMladen ]{ Good Guy Gulp v.2 2018-05-19 GULP-SASS 34

Slide 35

Slide 35 text

@MacMladen Good Guy Gulp v.2 2018-05-19 ]{ UGLIFY JS 35

Slide 36

Slide 36 text

@MacMladen ]{ Good Guy Gulp v.2 2018-05-19 CONCAT, UGLIFY 36

Slide 37

Slide 37 text

@MacMladen Good Guy Gulp v.2 2018-05-19 ]{ WATCH FOR CHANGE 37

Slide 38

Slide 38 text

@MacMladen ]{ Good Guy Gulp v.2 2018-05-19 GULP.WATCH 38

Slide 39

Slide 39 text

@MacMladen Good Guy Gulp v.2 2018-05-19 ]{ REFRESH DEVICES 39

Slide 40

Slide 40 text

@MacMladen ]{ Good Guy Gulp v.2 2018-05-19 STATIC RELOAD (HTML) 40

Slide 41

Slide 41 text

@MacMladen ]{ Good Guy Gulp v.2 2018-05-19 DYNAMIC RELOAD (USING PHP BUILT-IN SERVER) 41

Slide 42

Slide 42 text

@MacMladen Good Guy Gulp v.2 2018-05-19 ]{ GULP REFERENCES 42

Slide 43

Slide 43 text

@MacMladen ]{ Good Guy Gulp v.2 2018-05-19 GULPJS.ORG 43

Slide 44

Slide 44 text

@MacMladen ]{ Good Guy Gulp v.2 2018-05-19 TOPTAL 44

Slide 45

Slide 45 text

@MacMladen ]{ Good Guy Gulp v.2 2018-05-19 TOPTAL 45

Slide 46

Slide 46 text

@MacMladen ]{ Good Guy Gulp v.2 2018-05-19 GULP API 46

Slide 47

Slide 47 text

@MacMladen ]{ Good Guy Gulp v.2 2018-05-19 GULP DOCUMENTATION 47

Slide 48

Slide 48 text

@MacMladen ]{ Good Guy Gulp v.2 2018-05-19 DON’T MAKE A PLUGIN 48

Slide 49

Slide 49 text

@MacMladen ]{ Good Guy Gulp v.2 2018-05-19 SMASHING ON GULP 49

Slide 50

Slide 50 text

@MacMladen ]{ Good Guy Gulp v.2 2018-05-19 GULP VIDEO TUTORIAL 50

Slide 51

Slide 51 text

@MacMladen ]{ Good Guy Gulp v.2 2018-05-19 SCOTCH ON GULP 51

Slide 52

Slide 52 text

@MacMladen ]{ Good Guy Gulp v.2 2018-05-19 MLADEN ĐURIĆ a.k.a MacMladen Professional Development School 52

Slide 53

Slide 53 text

@MacMladen Good Guy Gulp v.2 2018-05-19 ]{ THANKS! 53 Mladen Đurić @MacMladen

Slide 54

Slide 54 text

@MacMladen Good Guy Gulp v.2 2018-05-19 ]{ 54 Q & A Mladen Đurić [email protected]

Slide 55

Slide 55 text

@MacMladen ]{ Good Guy Gulp v.2 2018-05-19 55