Setting up development environment with Gulp | Silvestar Bistrović | Skillshare

Setting up development environment with Gulp

Silvestar Bistrović, Fearless web engineer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
8 Lessons (33m)
    • 1. Custom WordPress Theme Development with SPRO

      9:50
    • 2. Installation

      7:06
    • 3. Configuration files

      2:29
    • 4. CSS tasks

      2:42
    • 5. Other important tasks (HTML, JavaScript, gfx, fonts)

      1:18
    • 6. Critical CSS tasks

      2:31
    • 7. Favicon tasks

      3:25
    • 8. Other helpful tasks (JSDoc, SassDoc, KSS)

      3:52

About This Class

Transcripts

1. Custom WordPress Theme Development with SPRO: I'm sister and I'm going to show you about the East is from for custom or pristine. Devolved is for his ability for about gusts in its mission is to provide great find l tasks for the project. Unity we need to do is to answer some pictures about the project architecture and pitched us. You want to run and Esper would set up to go helping environment for you. I have a full war verse installation is my starting point is to default. 4% Relations could see and I won't do it. Expert to train tonight in the whole team Start developing new custom You're ready to set up a task force us JavaScript rather sink and critical CSS First, I'm going to reorganize the court entity. I'm going to create new folder called CSS. And I'm going to move SAS folder in it and sat spiess not here must here next. I'm going to create new folder source and I make the move. My face is and Jess holders it. Now I'm going to yourself a spur. I'm going to use yard inception is for silent and it was beat up your installation books after the installation started Facebook executing no DiMaggio's Don't be. Flesh is broke. Start command now, which would answer all questions. First question. Do you want over the project? Yes. There is the root of the project. There is source folder. There is the destination folder. I really was built. Holder. Are you sure you want toe override project? Yes. I'm sure they want to run for others. Think Yes. They want to run html tasks in this case. Now we want to run ceases Task. Yes. Music's us. Yes. Where is the boulder? It's in CSS and they want to start compiled code. Also in CS is you want to modify the coat? Yes. Do you want old? Perfect. Yes. Do you want to add sorts? Mobs? No. But this time they want to let No, I don't want to live my census coat. You want toe JavaScript tasks? Yes. Here is the folder. Withdrawal skipped source code. It's in. Js said my search Buller. And I'm going to use to say folder for them this nation. But do you want community? I just It would Yes. You want to its source maps? No. Do you want to lead it now? They want to run image optimization tasks? No. Do you use local falls now? We want to run more tests. No. Do you want to extract critical ceases? Yes, I don't want toe zips assets and I'm not going to use any of the following communication tools. Do you want to add center version in tasks? No, An amusing gone now is for installed call tasks and coffee falls here in I can't Find the J Sport. Next mission stole all required dependence is basically coat in the terminal and then depend before we run the girl tasks. Let's Figure Brothers Inc open. Don't think that Js file and every proxy instead of Port and Sarah and I'm going to use my local Dave domain. Well, let's see each dust are will run go bust because they just here for winning up talk about code. Then we have their task built. Ask and vote passed. That's run before dust. Great brother sink open site in the browser. Let me hear some issues Treatment will see says it says that information is accused. I know for the fact that this caused by our penthouse help Penthouse library is trying to open the euro, which is not available. Let's configure the critical thesis open critical. Sees this and update the euro. I spoke with both feet. Don't try to run the ball tusk again. Great! The other is gone. Have it? Could open the build folder and see our football files here we could see that they have bought modified and unmodified version far. Quiles here. Now that's this. If it's working over the fast file to make some changes, I'm going to open style and I'm going to it boldly selector. And I'm going to update the pavement, for example. Always blue. In order to make it work, we should also update the part to our style file open the partial speech, be filed and not date the starship part and great to use this method. I'm going to it. The embassy assist and then style stagnancy assists. Also your tablet to job script won't hear the justice parts and bridge built ceases sprint dot sys is not, Let's say this referred to brother and as a CV help others Blue background Hey, delete this selector brothers think should update the bigger foresight. Now let's does the dust of change open the footer PHP file and for the closing body talk head straight source and ed this code snippet. I'm going to grade new file in Johnston folder. You're going to call it Dexter J. Is now this smile. You should add some cold today stick, and we played father it Langley to tell it to just say hi. Don't forget to remove them. They alert. Now we are going to eight Critical sis's first really new file inside the CSS folder. I'm going to pull it, huh? Critical. His thesis. It will be just an antique wild. Next remove ceases from head to document by commenting this line here. Finally, it ceases at the end of the document, foreclosing body type like this. I'm going to refresh the browser you'll see that, he says is applied. But now we experienced this open jump. Let's stop to go ask and let's run it again. Now that the hairstyle critical ceases, you could see the gulping house extracted two critical CSS from our main style, while the only thing left to do is to put the critical ceases caught inside. The head of the document opened Heather that speech before and for Riverhead I'm going toe based snippet That feeling quote are critical. CSS file. I'm going to start the part to the political sources, file this variable, and then I'm going to check The file exists. If a file exists, then I will in line the code the head. Let's say this and refresh your browser and now you could see that open jump. He's gone. If you inspect the court, we could see that rich processes is not unlined. The good practices to use minute version. If you open the killer world post, we could see that content is jumping again. This is because we extracted the critical CSS part only for our home page. We could extract ritual ceases for articles, too. Let's stop our goal process, then open critical look, Jason. While we believe a new conflict, the source will be the same. An output file will be different. File style toe. Let's create this files and I heard to tell about penthouse blogging toe open the hell up burled journal before we ran. Gulp again. We should be include critical CSS polish and going toe face the code snippet to do that in the heather dot pitch before I'm setting to critical variable falls. If the current page is the front page, I'm going to put my style not critical, that sees this file. And if the current age is a post page and I'm going to go style so that critical that CSS file again, I'm checking. If the file exists, I'm going to in line critical sissy sport. I'm going to say this and then I'm going to run. Helped us. Once the critical systems is extracted, you could see that there is no jumping the com page or on the article page That's it. Takes about them, needs to pay the perfect develop environment. Music desperate. You could watch more lessons to learn more about espero here on this scale shirt course and stay tuned. More lessons. A comic soul 2. Installation: Hi, I'm Celester, and I'm going to show you how to set up help environment for easier development. Although you could watch discourse if you don't know anything about built processes, it is advisable that you know at least basics about gulp, grant epic or any other similar tool. During this course, we will use espera or started project See Alive Started Project is recommend that will help you create a perfect got development environment. Within minutes as a starting point, I'm going to use an older version of Started Project, another project that I developed last year. You could find the big Dahlan link in less inscription. Now let's examine birch obstructive the root of the project. We have some conflict files, most of a linking like styling s linked or HTML and in the source father with your folders with HTML suss, JavaScript images and one files. Nothing special here, just under protective picture. Next, let's installed base Brooke in your terminal run. Young ed. It's not going to see a light and hit Enter. I'm using that. This is barometer for silent installation, Science told Esper. Locally, I need to use local champion package to run the command type Node models don't Bean s broke and then start Espresso is also available for global installation. You could use parameter global to instill the package globally. That case run s pro start. It's perfect for me to answer some questions about the project structure. That's great. We go through discussions. First question is, they want to override the project. Yes, I want over the project. What is the root folder? Where is the father of source code to use my Certs folder. Where do I want toe stalk? About code thesis. Are you sure you want to write a project? Yes. I'm sure they want to run a browser. Think? Yes. They want to run html tasks? Yes. Are you using Park is a temp. Attention? Yes. Very folder with HTML source code. It's in the HTML. Where do we want to start? Compiled. Html coat in the root of the finish. But do you want to unify html code? Yes. Do you want to run in line? Source tusks? Yes. We want to run a lint for HTML. Yes, We want to run. It ceases Task. Yes, I use excess Music's us here is colder. It's us source code. It's in the C. S s folder. Where do you want to start about? Since this court? It's the assessed older. They want to unify. This is good. Yes. Don't talk to Perfect. Yes, We want toe source maps. Yes, and I want toe lived. Ceases called now for the Jaschan busts. I want to run it justice. My source for that dress is my district. I want to modify it and I want to source maps and linking. I don't want to run image optimization tasks. Yes, there is a holdover religious. It's in the tropics and I won't use the same folder. Indeed. Destination that Do you use local funds? I'm using Work affords colder spots and I want to open it. Once older. Do you want to run for a particle Tusks? Yes. They want of extra critical ceases. Yes. Do you want to go breast? Jeez, it elicits No. Do you want toe ed Mile style sheets Style guide? Yes. I want storied in dogs style guide. Do I want toe Add documentation for myself. Scored? Yes. I'm going to story two dogs us. And finally I want O documentation for the jays code using Jay's book and I won't start in talks. Js boulder Do you want to add simmer version ing tasks Yes, and do you use? Yeah, I'm using guarantees. My fault dependency. Manage? Yes, let's examine what to here in our gulp Mile Js folder. In this directory you could fight all got tasks and conflict files for a project. For example, I can't see CeCe tasks and I'm I have see assists. Jason is my conflict object. We are going to talk more about this architecture in the next licence. Now to make the gulp tasks Berg, we should be start all required dependencies. Facebook provides an installation command for reading over card packages. Forgot tasks. Sees The command is already coping to the clip art. You could basic to your terminal and hit enter to install it. It may take a while depending on how many tasks do you want to run Once the penance is artist Old threat run gulped, asks comment. Gulp tasks will output all available tasks. In this case, I have bumped tasks for summer virgin ing between tasks for deleting files in three tusks or compiling the court. Dave Task is a set of essential tasks for quicker development. It would not extract critical ceases or for Africans. For example, default and bill tasks would run every 40 task. But built Ask will terminate after a certain amount of time. Let's see it in action. Run, Gulp Div Bait for the court to compile. And brother sick would open the project in your browser. And you see, we have some issues with CSS and I know for the fact that this ribbon classes, not the blood. So when I saved file, you could see that my brother is refreshed and I have style applied to this ribbon competent, we will stop here. If you kept any precious of problems, please feel free to contact me or open an issue. Get cup. In the next lesson, we're going to learn more about conflict files. 3. Configuration files: Hi, I'm solicitor. And in this listen, I'm going to show you out of a figure. Got tasks with conflict piles First, let's take a look at the man who big pile. They're all our answers are stored open golf, filed directory and find started a project that's Jason conflict. While you could see here that yes, Brooke saved our answers. It's Jason. While you can project root source, Destination directory and then tasks seeing task html telescopic ceases and so on. So it is important to note that you shouldn't update this file manually because got us will break because of missing. The Venice is if you want to change the main well run expressed article meant again, besides the man Kotick, while he would find a culture problem for every other Gulf task here. Let's start with the bump Jason. While if you open this file, you would see the configuration perverted with dust. Notice that you have helper stood periods, attacks in the search. Setting this apart placeholder placeholder is a string that would be replaced with settings from the main conflict. While you produce other part placeholders to create a dynamic environment where product you could see all but soldiers on the official Esper website or get help for MPM Page. In our case, this place holder you'll be replaced with field or dot slash mom tasks are pretty straight forward, and you want to change them a lot. Next, let's open helpers Jason File. This is the topic for the helper tasks. The eliciting is wait. This particular setting is used to a C L process after a certain amount of time. No protests are mostly used for parsing in setting the project box. You don't want to mess with these tasks because it would break the goal posts. Next. Let's open the sink, Jason filed. The corporation filed is used for brother sing tests. Roeser Sink plug in. Allow us to see life changes apart. Quote. In the browser, you could configure many different options for browser scene. But for the basic development, all you need to space by our several basted territory in the port you support. Defined in this section is the news. You could be changing here. You will stop here if you get any patients of problems who's feel free to contact me or open a shoot movie? The next lesson. We're going to learn more about CSS task in its conflict while 4. CSS tasks: I am Celester ending this. Listen, we're going to explore Gulf tasks and configuration for CSS in the Gulf file Js folder You could find ceases no Js file. Their got tasks for CSS are defined at the top were heading dependencies required to run up tasks. Then we are important helper functions from helper dot Js file and then we are importing ceases configuration While we're here. Let's take a look at the conflict file. We could see four main conflict sections for sauce for length for out of perfect and for reading again, we could see it part placeholders here, which will be parsed according to the main coughing father. For example, helpers Beirut will be parsed dot slash according to our make off far and also conflict dot C says that search will be parsed. Toe assesses if you go back to the conflict file in this particular section off sasquatch pick. We have include parts. These parts would help us write shorter import commands. If you go back to the tasks file, we could see that here three tasks sees the start. See says that listen and CSS lease at the beginning of the first task says conflict is being passed. Then we are using conflict to define source files were piping plug ins like source, mops, leaders out to perfect sir and modification. And finally, they're writing compiled files to the destination part to find in our conflict notice that most of the tasks are conditional. That is because golf is running global settings and then runs only tasks they configured when you answered all those extra questions. Since your Use Brothers Inc. We are reading this task to its stream. Other two tasks are for watching changes in the big compiling files. In the end, we're exporting ceases object with these tasks. Let's see how to use this sisters subject. We should open index Dr James, while the main golf while there are global tasks are declined First we are heading help dependencies, then helper and conflict files And then we're reporting individual gulp objects. Amongst them is the ceases object. Oh, we could see the CSS tasks are being used for every global task in the dead global task. Their music seems to start and Stasis listen. And in the built in default task were using CSS start. We will stop here if you have any questions or problems, please feel free to contact me or open an issue on getting up. In the next lesson, we're going to explore other important tasks like for HTML and JavaScript. 5. Other important tasks (HTML, JavaScript, gfx, fonts): Hi, I'm Sylvester. And in this listen, we're going to explore other important tasks. Let's start with Justin. Tasks in a top were reporting dependencies than helpers. That graphic. Then we defined tasks, and finally, we're exporting the JavaScript object with its tasks at the beginning of the main just task , we are parsed into conflict file. Then we're eating source files. Then we are piping plug ins and then there, right compile files to the destination part. Finally, we're reading this task to the brother Sing stream in the watch task. We are defining source for us and God task to rerun on every change. Graphics tasks work on the same principle. One tasks are you in more straightforward task only Go piss files from the source folder to the destination folder. HTML Tasks work on the same principle to the only difference is that there to watch tasks for watching age Jamil source files and one for watching critical CSS changes. We will stop here. If you have any questions or problems, please feel free to contact me or open an issue on get up in the next lesson, we're going to learn more about asks for critical ceases 6. Critical CSS tasks: Hi, I'm Celester in Indus. Listen, we're going to learn more about critical CSS tasks. Let's open critical dot Js file. The tasks are concept ID. Pretty much like all other tasks we examined so far, we're going to use penthouse blogging for political ceases. The first difference is that we are setting debug mode. If the environment is not production, this should allow us to gauge possible errors and department more easily. Also, we have one main task, one side task and to watch tasks in the main task. We are iterating over the conflict array for every iteration we're parsing the current conflict. Then we are aiding the source files. Then we are extracting the critical success and then we're writing it to the destination directory. This task would be executed when South Wales change. If the critical ceases is updated, decide Tusk will be run and it would unify the critical CSS. Now let's take a look at the perfect file dot Critical that Jason First we could see that he helped Honore. That means we could add more than one critical sisters file to our project, which would be helpful if you are aiming for perfect site optimization. The conflict object consists of two sections start setting that defines our CSS file and say things object in this object were defining how we want to name our final file. It is essential to you this naming convention toe. Make watch them unified tasks work. Then we have a euro that is going to be examined. Bishop to use the same port is in the brothers think conflict. You could use the full domain to instead of local host. Next, we're defining browser settings and behavior. You could see every option on the official Fed House site. This is the NPM site in this the Fed house get website. With all the options, I'm telling the back house to use large report to include Medicare's and to allow JavaScript. Sometimes a careless brother could not load your site because itself is not valid. These SSL options would fix possible SSL errors. They will stop here. If you have any questions or problems, please feel free to contact me or open an issue on the get up. In the next lesson, we're going to learn more about tasks for far weakens 7. Favicon tasks: I am Celester. And in this listen, we're going to learn more about African tasks. They are going to create our coffee file using a fantastic online tool called Real Public on generator dot net. First, we need to choose our photo I'm going to use on STG file Next mystical figure how we want to display our fabric on on different devices. We could define Fullers and appearance up name compression, basically everything. I'm going to leave all the cold options except the part option. I want to start far because in the specific full in the public was folder in the root of the project. Let's generate particles. Once the publican files already click on gulped up, you could see the full girl task here. We need only part of the settings from Design Section two settings. I hope this next we should convert this Just it object to Jason. I'm going to use the only tool from convert online that you convert jails to Jason. I need to wrap all options into crude brackets. And now I could cope with the past Jason Albert and based it in the Barbican data just files in this file. You could find example savings. We should override only part of the options from design section to the savings. You could notice the settings at the top of the conflict file. These settings should be configured manually. First, we should define the master picture. Then we should find a temp stating This is but where we want to store are compiled. Aiko's It is advisable to set this option summer inside Source. Director If the fabric on like wild exists inside this directory, practical tasks would be skipped. Barbican tasks could last more than a minute, depending on your machine. And this way we could run it only once. Next we should find the destination part. The eye could spot relative to the source folder and mark up file where the follicle markup would be. Start. This option should be left as it is. There is one more coffee for five tasks dot Farley conduct Jason, file this file We defined a file were really ill, right? The court for Falcon markup. In our case, this is the publican part file inside the Assets folder into HTML Source. Holder now let's run. Helped build command. You could see that Fabricant start us finished after almost 30 seconds left in the court is compelled. We could see that. Now we have stored configuration inside our Babacan data generated Jason file also different on HTML. Code is stored in the fabric on park file and we could see the icons in the source and destination folders here and here. We will stop here. If you have any questions or problems, please feel free to contact me or open an issue. Get help. In the next lesson, we're going to learn more about other not so important but helpful tusks. 8. Other helpful tasks (JSDoc, SassDoc, KSS): Hi, I'm Celester. And in this listen, we're going to learn more about other helpful tasks. These tasks are all about documentation. They're defined as any other tasks. What we need to learn is how to set up conflict files. Let's start to beat J stock conflict. It is start in dot Js doc does Jason file? We're not going to discuss all options just once That are important for espera For Js Doc, there is only one important option in the deserts. Certain Option Telescope, which files to process. They're using competition nd to set up the custom from page for the Dogs. You could see that they are using part placeholders once again. For more J stock options, Visit the official website Jazz Doc that orc Next. Let's explore Sasso conflict discuss dog does Jason file says doctor asks, Know where disaster source code is stored based on the global configuration object. Other options are not that important, and you learn more about all options if you visit official website says Doak dot com. Finally, we are going to take a look at the conflict file for cases now style sheets. The case is that Jason file source option defines there is the source holder destination option to find where 12 with the case that's took meditation files and CSS and Jay's options to define, which passed to include in the final page, came out. There's an extra option for setting the title off the cases. Documentation. You could learn more about Nile style sheets if you visit official website work. Spire that come slash Kase is now. What's it next you goto local host on Deport You defined and then go to Doc's Jess. You'll see the Quint ation for JavaScript. I have two models critical fucked for front loading, and I have different styles for differing sis's loading. And I have class for critical for From Front Face observer. Now let's see the actual just far this comment dispersed at the top of this page. You can see a better seasons living here, and if I did this current, it will be automatically refreshed in the browser, for example, Right, Def Bird ceases loading it a little fresh, my browser, and now it says, different seasons loading. Now let's see saws, Dark pages. It's under suss. You could see the South documentation here. Let's see how it looks in sass files, for example, have variable swell, and I have this kind off comments here, and you could see that it's parsed. According to this, government made a clear definition for mobile devices. Medic. Very destination for mobile devices using CSS look splits out model to dis comment and see how it refreshes the browser. And finally, we hair style guide. We can go to style guide, and we can see that we have five sections here. We could see the example and mark up for this section of topography, and we have headings and paragraphs next we have together, for example. And here's the simple mark up Now. If you go to, for example, Heather, we could see this kind of comments and it by update comment. For example, Competent brother was refreshed. That's it. If you have any questions or problems, please feel free to contact me or open an issue. Get