7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 15Length: 1.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

7.1 Final Words

Thank you for watching this course! In this final lesson we’re going to quickly recap what we learned and take a look at some of things you can improve in the future.

Related Links

7.1 Final Words

Hello, and thank you for watching this course. In this video, we're going to make a quick recap of the things we've learned and also take a look at some of the things that we can improve on. Now this entire Gulp workflow was centered around the idea of making things easier for us for front-end development. And we started with a set of typical source files that you would find basically in any web project. We had some HTMLs, some Sass, images, and JavaScript, right? And the idea was take all of those and run them through this entire Gulp work flow and at the end have a set of distributable files. Meaning compiled CSS, minified and concatenated JavaScript, compressed images and so on. And how did we achieve that? Well, with the help of Gulp of course and a couple of plugins. So first of all, we're using browser sync to start a server, that's gonna help with browser reloading. And also watch for file changes, and by the way, this Gulp watch this, isn't related to browser sync in anyway. I just put those watch calls here because it just felt like a suitable place to have them, but you can put them basically anywhere you want. So in the case of HTML, all we're doing is copying the files from source to the destination folder, to the dist folder. In the case of CSS, we're working with Sass for this project. So, what we're doing is we're taking all of the SCSS files, we're running them through Plumber to prevent pipes from breaking into handle errors, then we pipe them through the Sass plugin to compile them to CSS. After that we take the CSS data stream and we run it through the autoprefixer for the vendor prefixes. And finally we're copying it in dist/css, of course reloading the browsers as we go. For JavaScript, things are a little bit more complicated, because before we run any kind of operation on the JavaScript, we check them for errors using the JS hint plugin. And if we have any errors, we're using the Jshint stylus to report them in our terminal. If that checks out, then we're concatenating the JavaScript. We're writing it to the file. And then we're minifying it and writing it again. So in the end, we have two copies of the file, one normal, unminified and one minified. Then for images. On images, we're basically getting everything except sprites, runningthem through the image min for compression and copying them into the distribution folder. For Sprites, we're taking everything from the img/sprites or all the SVG files and we're running them through the svgSprites plugin, generating a Sass partial and a Sprite image. At the very end, we wrote our default task, which runs these tasks in sequence, then these in parallel, and finally starts the server. So that's what our Gulp workflow is doing basically. Not to mention that once the server is started, all of our files are being watched. So whenever we make a change to a file, the corresponding task will be executed. So change something in the HTML, the updated version gets copied to the distribution folder. Add another image it gets automatically compressed and copied, and so on. Now, there are a couple of things that you can improve, of course. I am using roughly the same workflow in my own projects, it's just, [COUGH] been changed a little bit here and there with some more advanced functionality. But the basis is the same. And I did that on purpose for this course because I really wanted you to understand the basics of working with Gulp. And what it takes to build such a workflow. You can build upon this, you can add your own plugins. You can basically create your own workflow, which you will adapt to your own needs. So here are some ideas for improvement. First of all, loading the plugins. Here we did it manually, but there is a plugin called gulp-loadplugins that loads all of the plugins from package.json automatically. So you would set a variable just like we did here, for example, Plugins = require('gulp-loadPlugins'), and then you would access a specific plugin like this plugins.gulp. It takes a little bit of configuration to up and running but it's not very difficult. Personally, I wanted to do this manually because I wanted you to see what you are importing and what you were using. Next what I would do, is I would create certain constants or even variables for the paths. So we're repeating a lot of the stuff here. Like the paths to files, dist, src, we're repeating this in a lot of places. And if for some reason you wanna change your folder structure, you'd have to update your Gulp file automatically. Everywhere you see a reference to a follow path, you will need to change that to the new one. So a good idea would be to put these paths in their own constants and use those constants instead throughout your code. So when you need to change a path, you would just change it in one place. That's another improvement I would make. And the settings actually for other plugins could be put in such constants. So for example, the setting that you use for Sass, you would put that for autoprefixer, you would use that in a variable and so on. And that's about it, as I said, it's really up to you to create your own personalize Gulp workflow. I really hope this serves as a strong basis for you to build on and I would like to thank you very much for watching this course. I'm Adi Purdila and from all of us at Tut+ have a good day, bye.

Back to the top