Drupal 8 Theming - Part 03 - Gulp.js, Sass, LiveReload

hello this is even for watch and learn comm and in this video we're going to be talking about gouges live reload and says for our theme but before we start doing all that great stuff I just wanted to draw your attention to the code we will be using so everything we do in these videos will be available for you on github so you just go to here link in the description below and you go to I don't know the a theming so you can see this will be the latest video but if you want to check out the code for the previous videos you just go to releases and then you have this like it's made for this video Drupal 8 theming part 3 gouges ass and livelihood so you just download this zip file and you have all the code you need to follow these tutorials if you don't want to write everything I do with me so I hope you guys will enjoy this video and let's get to it so to set up gulp J's live reload says and so on we are going to do much of the same steps as we did in the middleman series so I'm going to use stuff I already made for WordPress's all in posting so if you don't know what Olympus theme does please check out the video about the Olympus theme and this theme for drupal is going to do pretty much the same thing as regard to sass to javascript minification to images optimization and so on so we're just going to download this zip file and I'm going to go to my sides d8 theming and I'm going to create a folder called assets and I'm going to put it in here so I put let's say designs fonts and so on everything I need for the project in the assets folder okay so if we go actually to my fale file manager we have these assets right here of course if you don't use this type of file manager you would have to unzip this file but I can just press ENTER and see what's in it so I'm just going to go in my other tab to the d8 theming route and copy two files in it so I'm just going to copy Godfather j/s and package that JSON files okay and next thing I'm going to do is I'm going to go to themes custom and demian and I'm going to copy this fonts directory I'm going to oh I didn't mean to do that actually I'm just going to delete these guys right here I'm just going to copy images and then I'm going to copy this J s and then I'm going to copy this Lib file actually folder and this sass folder okay so we have a count of our theme directory construct right here so we have our images so I put images in here we have this J's folder in which I'm going to delete this Olympus dot is because we are calling file if we look in the library's main that Jesus so we don't need this in the Lib folder I'm going to actually just leave everything as is and in the sales folder I'm going to go to style that s CSS and remove these lines because WordPress requires them but Drupal does not so I'm just going to save this and now we have this thing ready right here so the next thing I need to do I need to set up my gulp file dot J's so it corresponds to this Drupal installation and our theme okay so let's open gulp file Jas and all we need to do here actually is just rename these paths right here so this is made for a wordpress theme but we are on Drupal and we using a Drupal theme so instead of wp-content themes Olympus we will have three themes custom and Damion and that's it so I'm just going to quickly search and replace all of those so this so let's just replace them okay and we just have to in this SAS desk so we are not going to save our CSS file style.css we are not going to save it to wp-content themes Olympus but we are going to save them into themes custom and demian CSS so as we defined in our libraries folder so as you can see here is going to be calling CSS style dot CSS okay and let's see what else we need to do so in the uglify task so this task is going to take all of our JavaScript libraries plug-ins for jQuery and so on is going to take all of them concatenate them minify them and then put them in this J's folder so we don't have to call them from these libraries you of course can if you want but if you don't want to do that you just put your all of your jQuery plugins or JavaScript files right here and the GALT file Jas is going to do the rest X we just have to rename this from Olympus that manginas to main that Jas because in our libraries folder we are calling Jas main that Jas file so that's it for that let me just make this a little bit bigger and then we're just going to set up this watch desk so we are going to watch for not themes custom and demon style dot CSS but themes custom endymion CSS style dot CSS and then we are not going to be watching any PHP files but since Drupal uses tweak for templating we are going actually we are actually going to be watching all of the sub folders of our theme and the main folder our theme and we are going to be watching twig files so this file that we added in the previous episode page dot HTML twig corresponds to that so instead of PHP I'm just going to write twig and I'm going to remove this part right here and this one is going to be watching all of our J's files that can be in this J's folder okay so that's about it for gulp file dot J's what we need to do now is install all of the modules required by this file so to do that I'm just going to go to my terminal and going to go into my d8 theming folder and you just do sudo npm install so you may need to sudo you may not but I have to so I'm just going to do sudo npm install and my password and we just wait for everything to install to our drupal installation so when all of this is done we can test it out so we just run this watch task right here so we have a watch desk it's going to be watching all of our files ugly fiying javascript compiling get CSS and so on and I'm just going to do golf watch god watch okay so gulp is now running to test it out we can go to sass folder go to global add CSS just remove this right here add it again and save it and as soon as we saved it as you can see we got this CSS folder right here with style dot CSS in it and style dot CSS dot map in it okay so this works let's say let's see if live reload work so I'm going to go to our Drupal site and I'm going to start this live reload plugin for Chrome and we're just going to go to our Global's that a CSS and do background 0 0 0 so black save it and as you can see as soon as I switch the screen everything changed on the screen because the live reload is working so if I just do FFF go here it's reloaded again okay let's test out twig files so we have this one page HTML dot twig so let's go to this page content right here as you can see we have welcome to Drupal theming that there is nothing above it actually there is logout and so on but we are going to add some of our things so if I add here hello there save it as you can see the browser is already reloading and we have hello there okay if we remove this save it again it works let's just check out out our console so as you can see it's telling us in the console that it can find this logo that SVG file because because we don't have it it's an image we can add it later but what time more concerned about is this main.js it's not showing up because we don't have anything in our J's folder so to fix that I'm just going to go to Lib file mange s just remove this at the end add it again and just save it and if we go to the J's folder right now gulp concatenated and minified main dot J's and mundo moderniser dot min dot J's concatenated it in one file as and as you can see we have made that J's file right here so if i refresh the page as you can see now it can't find just logo dot SVG so our uglification of java scripts also works so what you can do with this is if you have some jQuery libraries or some other JavaScript files you just put them in the Lib folder save it and it will automatically go into this minified J's file called ninja mean that Jess and I think that's about it for gulp and live reload and says in the next episode we are going to be discussing regions and how you can put stuff in those regions remember that everything that we did here is will be available on github so you can download the code art right there I hope you liked this video if you did please like it if you want you can even I don't know subscribe to my channel you can follow me on Twitter or on Facebook I will keep you up to date with my videos and the stuff I find on the internet and thanks thank you again for watching and I'll see you in the next one

Channel: Watch and Learn

Views: 63,202

Rating: 4.9175258 out of 5

Keywords: drupal 8, drupal 8 theming, theming, website, web site, gulp.js, livereload, sass, tutorial

Id: vatnNkOKZ7o

Length: 13min 40sec (820 seconds)

Published: Wed Nov 18 2015