What do you mean “a front-end build pipeline”!
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 133 | |
| Author | ||
| License | CC Attribution - NonCommercial - ShareAlike 3.0 Unported: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this | |
| Identifiers | 10.5446/48937 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
00:00
Software developerMultiplication signPresentation of a groupPlastikkartePoint cloudWeb pageClient (computing)QuicksortWeb-DesignerVirtual machineInheritance (object-oriented programming)Web 2.0Software developerBuildingWeb browserChannel capacityBitFront and back endsNumberDot productWordServer (computing)Connected spaceMobile WebApplication service providerLimit (category theory)Band matrixDifferent (Kate Ryan album)Structural loadTwitterFrequencyPoint (geometry)Maxima and minimaWebsiteProper mapOpen sourceComputer fileGame theoryLevel (video gaming)Right angleCartesian coordinate systemPlanningMusical ensembleScripting languageJava appletDisk read-and-write headWeightGraphical user interfaceDreizehnFocus (optics)MathematicsPay televisionData storage deviceCellular automatonSinc functionNeuroinformatikObservational studyReading (process)Single-precision floating-point formatComputer animationMeeting/Interview
08:57
Software developerCross-site scriptingBand matrixObject (grammar)Type theorySoftware developerMultiplication signDeterminismVirtual machineWeb browserGoogolComputer iconC sharpRevision controlClient (computing)Software as a serviceInformationBootstrap aggregatingComputer fileWeb 2.0Process (computing)Visualization (computer graphics)Formal languageInheritance (object-oriented programming)Social classBuildingSoftware frameworkSet (mathematics)Application service providerSession Initiation ProtocolLimit (category theory)WritingWebsiteAdditionTable (information)SpacetimeObject (grammar)BefehlsprozessorPower (physics)CASE <Informatik>Scripting languagePoint (geometry)Musical ensembleRight angleOrder of magnitudeMetropolitan area networkMachine visionJava appletInternetworkingFamilyFlow separationFiber bundleBit rateServer (computing)Algebraic closureTransportation theory (mathematics)TypprüfungWeb-DesignerHacker (term)Memory managementComputer animation
17:49
Software developerInstallation artComputer fileSource codeVisualization (computer graphics)Virtual machinePatch (Unix)Data managementLibrary (computing)Installation artFormal languageScripting languageTrailWeb browserQuicksortProjective planeDifferent (Kate Ryan album)BitTask (computing)Configuration spaceAxiom of choiceMereologyMemory managementJava appletMetropolitan area networkServer (computing)Client (computing)Process (computing)MathematicsRevision controlKey (cryptography)Point (geometry)Computer animation
22:53
Software developerInstallation artTask (computing)CodeWritingFiber bundleVirtual machineMultiplication signTask (computing)1 (number)Computer fileHand fanConfiguration spaceBootstrap aggregatingLibrary (computing)Single-precision floating-point formatSoftware developerBitInstallation artDifferent (Kate Ryan album)Data managementProjective planeCASE <Informatik>TrailOcean currentRevision controlSource codeDistribution (mathematics)Goodness of fitGodPentagonRight angleMemory managementProcess (computing)Axiom of choiceScripting languageClient (computing)Transportation theory (mathematics)Arithmetic meanMetropolitan area networkFormal languageComputer animation
27:58
Software developerMaxima and minimaApplication service providerProjective planeView (database)Subject indexingGame controllerSystem callComputer fileRule of inferenceBootstrap aggregatingCartesian coordinate systemSinc functionPoint (geometry)Revision controlComputer animation
29:21
Software developerApplication service providerVisualization (computer graphics)Sinc functionRevision controlNeuroinformatikComputer fileProjective planeInstallation artComputer animation
30:19
Software developerMaxima and minimaSinc functionBootstrap aggregatingInstallation artRevision controlPower (physics)Computer fileSoftware developerOnline helpProcess (computing)Moment (mathematics)NumberConnectivity (graph theory)Task (computing)Source codeComputer animation
31:30
Software developerMechatronicsInstallation artConnectivity (graph theory)Point (geometry)Revision controlGoodness of fitException handlingBootstrap aggregatingVirtual machineProduct (business)Division (mathematics)Library (computing)Integrated development environmentSummierbarkeitSoftware developerBootingMechatronicsBit rateBus (computing)Moment (mathematics)Power (physics)Source codeComputer animation
33:24
Software developerBuildingWeb 2.0Web pageSinc functionBootstrap aggregatingArithmetic progressionRight angleMathematicsMoment (mathematics)Task (computing)Projective planeVideo gameRevision controloutputComputer programmingMereologyClient (computing)Software developerComputer animation
35:15
Software developerCASE <Informatik>Computer fileDemo (music)MathematicsProjective planeInformationCartesian coordinate systemBuildingElectronic mailing listInclusion mapSource codeComputer animation
36:11
Software developerRevision controlPlug-in (computing)Data structureDirectory serviceInstallation artType theoryComputer fileTask (computing)CASE <Informatik>Data conversionPower (physics)Projective planeSource code
37:34
Software developerData structureRevision controlModule (mathematics)Network topologyInstallation artRecursionWindowMassEndliche ModelltheorieComputer animation
39:01
Software developerComputer fileModule (mathematics)Configuration spaceTask (computing)Software as a serviceResultantDefault (computer science)Streaming mediaFunctional (mathematics)File formatSoftware testingBasis <Mathematik>Ordinary differential equationCartesian coordinate systemSystem callGodPattern languageExecution unitRAIDComputer animation
41:20
Software developerComputer fileMultiplication signTask (computing)AdditionWebsiteVisualization (computer graphics)Form (programming)Extension (kinesiology)Source codeComputer animation
42:17
BuildingSoftware developerTask (computing)Default (computer science)Keyboard shortcutOpen setExecution unitTask (computing)Sign (mathematics)Point (geometry)Bootstrap aggregatingWeb pageComputer animation
43:09
Software developerSoftware developerCartesian coordinate systemCategory of beingDemo (music)Point (geometry)Web pageWritingCheat <Computerspiel>Computer fileEscape characterModule (mathematics)String (computer science)Game controllerMobile appVisualization (computer graphics)CausalitySystem callType theoryScripting languageInstallation artBit rateProcess (computing)Endliche ModelltheorieComputer animation
45:00
Software developerFunction (mathematics)Task (computing)Installation artComputer fileGame controllerScripting languageResultantOcean currentFunction (mathematics)Task (computing)Revision controlExtension (kinesiology)Java appletGraph coloringSource codeSource codeComputer animation
45:58
Software developerBuildingSource codeSinc functionWeb pageComputer fileMobile appMereologyView (database)2 (number)Demo (music)InformationModule (mathematics)Arithmetic meanTransponderMultiplication signJava appletGame controllerAngleScripting languageInjektivitätMultilaterationSource codeComputer animation
48:20
Software developerData typeScripting languageBoss CorporationMathematicsTesselationRight angleCartesian coordinate systemTask (computing)Open setKeyboard shortcutComputer fileWeb browserBasis <Mathematik>Data storage deviceProjective planeComputer animationSource code
49:43
Software developerBuildingDefault (computer science)Scripting languageData typeTask (computing)Projective planeConnectivity (graph theory)Right angleMathematicsCASE <Informatik>Row (database)Link (knot theory)HookingDataflowWeb browserCompilerVisualization (computer graphics)Computer fileBoss CorporationStructural loadGraph coloringOrder (biology)Source codeComputer animationLecture/Conference
51:04
Data typeScripting languageSoftware developerDataflowLibrary (computing)Installation artComputer fileFront and back endsGodTouch typingComputer animationSource code
52:37
Software developerFunction (mathematics)Bootstrap aggregatingTask (computing)Computer fileParameter (computer programming)Fiber bundleWebsiteScripting languageGodPoint (geometry)Source codeComputer animation
53:51
Software developerHydraulic jumpFunction (mathematics)Line (geometry)MereologyCodeBootstrap aggregatingCASE <Informatik>Scripting languageJava appletFiber bundleProcess (computing)Presentation of a groupBitFilm editingProjective planeComputer animationSource code
54:52
Function (mathematics)Software developerGame controllerScripting languageFunction (mathematics)Task (computing)Structural loadDistribution (mathematics)Order (biology)BitComputer fileQuicksortFiber bundleScripting languageBuildingTrailSource codePhysical systemMiniDiscRight angleComputer-assisted translationDistanceCodeSpacetimeComputer animation
56:53
Software developerInclusion mapScripting languageData typeCodeView (database)Computer fileWeb pageFiber bundleRaw image formatMobile appGame controllerDifferent (Kate Ryan album)Revision controlSource codeWeb 2.0Software bugSource codeComputer animation
57:59
Software developerData typeScripting languageConfiguration spaceWeb 2.0Source codeSoftware developerProduct (business)Rule of inferenceRevision controlCodeData structureInformation managementTask (computing)Raw image formatVisualization (computer graphics)HookingLatent heatModule (mathematics)Endliche ModelltheorieSource codeComputer animation
59:27
Software developerBuildingKeyboard shortcutFunction (mathematics)Task (computing)Streaming mediaVector potentialWeb browserScripting languageProjective planeDemo (music)BuildingTask (computing)InformationComputer fileClient (computing)Cache (computing)Right angleVisualization (computer graphics)Order (biology)Parallel portLink (knot theory)Software testingMoment (mathematics)Multiplication signBitDifferent (Kate Ryan album)String (computer science)Query languageInjektivitätMereologyParameter (computer programming)Web browserService (economics)Web 2.0Revision controlBlogFunction (mathematics)Configuration spaceAddress spaceData storage deviceVirtual machineIndependence (probability theory)Server (computing)Process (computing)Type theorySineTouch typingClosed setTransportation theory (mathematics)FreewareLiquidGroup actionFigurate numberMathematicsComa BerenicesSource codeComputer animation
01:04:20
Software developerComputer animation
Transcript: English(auto-generated)
00:05
Hello, everyone. It's awesome to see so many people in here. I kind of expected the room to be empty considering that Troy Hunt is doing his presentation in another room at this time. You are missing out, but I will try to make it up for you. So the talk of the day is what do you mean a front-end build pipeline? I'm going to start out with
00:26
who I am. Scott Hanselman and Troy Hunt both say you don't have to introduce yourself on stage because people should know who you are. If you are Troy Hunt or Scott Hanselman, that might be true. If you are Chris Klug, not so much. I work as a software developer
00:45
slash architect slash I think my official title on my business cards which I haven't received yet is technical dude. I work at a company called Novatrox in Sweden where we do software development for clients and focus a lot on cloud development. I've been
01:00
doing it for the last 15 years. I also happen to be ASP.NET MVP which is awesome because I get to see some stuff. Unfortunately, being ASP.NET MVP means I don't get to see anything cool ahead of you guys because everything is open source. So we don't really get anything for that. And I've also done a course on Pluralsight. If you feel
01:21
like watching a course on Owen and web development, and you don't have a Pluralsight subscription, you can come up here. I have unlimited access passes that I think are valid for a month and you can watch as much as you want. Just come by and pick some up before you leave. So the talk of the day is front-end build pipelines. It is pretty basic. Before
01:45
we get started, how many of you out there know what a front-end build pipeline is? None, because I made up the word. There are a couple. How many of you are comfortable running something like Grunt or Gulp? Okay, so you shouldn't be in here. Troy's talk
02:01
is awesome. It is going to be pretty basic, but we will see. We will figure it out. The top biggest front-end build pipelines. I stayed out of web development for a few years doing development and then came back, and all of a sudden the web had changed. All of a sudden, it is like what Hanselman said in the keynote yesterday, all of a sudden JavaScript is the new hot stuff. It is all about building things in the
02:24
browser and using the client's computers instead of servers, which is an awesome idea, but there are some backlashes to it as well. There are some problems with it, and all of a sudden people started creating this awesome build pipelines and front-end stuff and managing resources front-end in completely different ways. When I came back
02:42
from Silverlight, it wasn't the same web that I was used to working with. The web started out here, and I hate the fact that Scott stole half my presentation for his keynote yesterday. I started out at exactly the same point. This is the first website ever built. It was built in 1991 by Bernard Lee, or whatever his name is, and
03:06
it's simple. It looks like that. If you pull up the tools, the developer tools in Chrome, it will tell you there's one HTML file, it's 2.4 kilobytes big, and it took
03:21
basically no time whatsoever to fetch it, right? Is that the way the web works today? Some guy called Brendan Eich decided to create something called JavaScript, or it was called LiveScript, and the work name for it was Mocha, I think, but this changed
03:42
the whole thing. This changed the way that we used the web, and it changed the way that we deliver applications to our clients. So, this is a site I use once in a while when I need to book plane tickets to different places around the world, and, just for heck, I happened to have this up on my machine while I
04:02
was writing this talk, and I sort of went, I wonder how many resources this thing delivers and how big it is? I pulled up the developer tools, and this is what you get. All these little green dots are little resources being pulled from the server. So it doesn't look that simple any more. It's not one
04:22
little request, one little HTML page, and you're done. It's all of a sudden way more. I couldn't find a gif for it so it had to be a static one. It goes up to 298 requests before you get that page delivered. Does that seem reasonable to you guys? Was that the way the web was intended, you think? And, if you
04:47
move this, and you sort of go, well, we should be able to do it better, we should be able to take our 298 requests and make them way fewer, because there's a cost for every single request. The way that TCP works and the
05:00
way that we request things from a web server means that every single request we make actually has a ramp-up period. It takes a little bit of time before you get full speed of downloading your files, and, if you're delivering 300, 400 files that are really small, you end up with all these ramp-ups going all the time, and you don't use your bandwidth properly. HTTP 2 is
05:21
going to solve that, but we don't have that right now. So this is a problem, and what we need to do is we need to bundle it down and get fewer files to be able to give the users a good experience. We don't want them to sit there and wait for three minutes of downloading different files to get started. On top of that, you might end up with a problem where, if
05:41
your website is dependent on JavaScript, and you need to load one or two megs of JavaScript, the page will actually just sit there blank until all of it has been downloaded which is kind of annoying. Bundling it all up is one way of getting away from the 298 requests that you might get on your website. It also has another good upside. This is one of
06:03
those things that most people sort of have in the back of their heads, and very few people think about it, but I went out and I had a look at this. These are generally the big browsers that I use, and the numbers here is the first number you have, like the six, six, 13,
06:22
and 13 are the number of connections you can do per host. So, when I'm downloading 298 requests from a web server, it means I will do six of them, and then I will stop. Then, when one of them is done, I will replace that with another request, and I will only keep up to six connections going at once which takes quite a bit of time when we
06:43
need to download several hundred little files. The other number is the number of max connections completely, so, basically, that is if I go to different hosts, I'm allowed to use more connections. So if we start bundling things up, and we start moving them to different hosts, it also means that we can actually get the browser
07:03
to download things more efficiently, so, if we put our CSS and JavaScript on two different hosts, it actually means that we can go ahead and get double the capacity of downloading them because we're not limited to six or 13, but we're limited to 17 or 10, so we
07:22
get a bit of a performance out of that as well. There are downsides to that as well if you're doing mobile web, so if you're on your phone, there are downsides to actually opening up new connections, so this will actually hit you and be a performance decrease if you go on a phone. So you need to sort of know your audience and how to figure it out. But it's good to
07:41
keep in mind that we do have these limits. I talk to a lot of people that don't actually know that we have these limits and don't know at all when you start talking about maybe we should spread out or load and do different hosts. It kind of depends on your clients, but there are performance gains to get from it. The other one, 1.2 megs for one page. Is that a
08:03
reasonable number? How many of you have been doing web development since, say, the end of the 1990s? How many of you cringe when you see 1.2 megs? Yes. This picture went
08:21
around Twitter not too long ago. This is Super Mario, right? That entire game was 40K. Yes, people laugh. It's like, no, it's true. The whole game was 40K, and the website I just downloaded was 1.2 megs. If I go and download this pic off the
08:42
web, it's 163 kilobytes. This picture, which is funny, it is, but it's four times as big as Super Mario. To be perfectly honest, I would much rather spend hours playing Super Mario than looking at this picture. We need to keep these things in
09:03
mind. When we start doing a lot of CSS and JavaScript and sending things down to the client, we need to start thinking about how much are we actually sending down? Is there any way we can minimise the amount of information we're sending down to the client because the less we're sending down, the faster our web will be up and going, and the happier
09:21
our clients will be? I had a look at Bootstrap. Anybody in here not know what Bootstrap is? A few. Bootstrap is a CSS framework that will give you basic CSS layouts so you can just add some classes and it starts looking, I was about to say good, but I'm going to say it looks bootstrap. And
09:41
then you can get bootstrap themes that make it look less bootstrap, but it's basically a standardised set of CSS classes that people can restyle and you can get good-looking stuff for very little effort. It's 118 kilobytes if you do CSS. Just pure CSS in a file. If you minify it, which means
10:01
removing all of your white space and all of the stuff, all the non-informational things inside of your file, you get it down to 98K, which is good, you've saved 20Ks, but then you sip it. You just sip up the file and you deliver it as a SIP file instead, and it's 17Ks. How many of you
10:21
guys sip up your resources today? One, two, three. I think you said you were working with web in the 90s as well, right? Yes, that's the reason. I looked at this and I went, that is really awesome, but there is a limitation because not all browsers can actually support Gsipped files,
10:42
which is really funny because then you go into can I use and you look at what browsers actually support SIP, and you realise unless you're targeting IE5, you can use SIP. I think IE6 has support for SIP, and every other browser out there supports it, so we could just as well just sip up
11:02
all of our resources and save this download, and, yes, the client will have to put in the CPU power of un-sipping the file, absolutely, but is that our problem? Not really. Most machines can do that without a problem. So is the only reason for us to do a front-end build pipeline
11:22
performance and bandwidth? Well, not really. There are a bunch of other things. Not really. Yes. Depends on the
11:49
size of it. If you can do massive savings like this continuously for a lot of things, if I could go from 1.2 megs down to 120Ks, the download speed would probably be
12:01
better, would basically make up for the time it takes to unzip it, I would believe, but you would have to try it out. I haven't checked it. So, performance and bandwidth, is that the only reason? That's the one that we generally hear. You need to bundle, you need to minify, you need to do this. To be perfectly honest, that's a lot of
12:21
massaging a reason to use it, but there are other reasons that make it a lot more interesting. How many of you guys are feeling like after this that I've been talking about less requests and less size feel like you want to go home and start using this? This is awesome, right? No, because nobody really cares, right? In the end, we all have broadband, it's fast. It doesn't matter if it's 1.2
12:43
megs or 10 megs, it's going to come down pretty fast anyway. But how many of you guys do JavaScript? Like a lot of JavaScript? Keep your hands up. How many of you guys love JavaScript? How many of you have never run
13:00
into weird JavaScript problems? Never. Yeah, JavaScript is the problem, I know. Has anyone tried this? If you take an object and add an array to it, you get zero, but if you take an array and add an object to it, you get an object. Does that make sense? No, not at all.
13:20
That's JavaScript for you. So a lot of people came up and said JavaScript is awesome because it runs on every single machine. We heard Hanselman talk about it yesterday saying JavaScript is the new virtual machine and we can do everything in there and we can play Doom in our browser, which is awesome. But apparently not
13:41
everyone thinks it's that awesome. There are issues with it. So they've come up with all of these other languages. TypeScript, CoffeeScript, Dart, ClojureScript, Haxi. I have no idea what Haxi is but I found it online while Googling. I needed one more icon in there. There are like a whole heap of them. They're all built on the same idea that we write one
14:01
language that we feel comfortable with. TypeScript is for C Sharp developers really comfortable. It's got classes. It's got type safety. It's got all of the things that we're in inheritance and all of the object-oriented stuff. It's got the stuff that we're used to as C Sharp developers. So TypeScript works for us. CoffeeScript works for people who are from Python or
14:24
something, I think. I never do CoffeeScript. Dart works for some people. ClojureScript for people who do Clojure. Haxi for all of them are basically based on I'm coming from a language that I like. I need JavaScript. I'll write something that resembles my
14:41
language and then I'll transpile it into JavaScript and I'll use the JavaScript in the browser to get it to work. Same thing with CSS. CSS was an awesome addition to the way we style websites. We've all heard once again keynote yesterday, you can only have 32 tables inside of a table. It's like tables inside each other,
15:00
otherwise it breaks. When I started doing web development, tables was the way to go. You did everything with tables and all of a sudden CSS comes along and you realise tables are actually a wrong way to do it. The only problem is that CSS has some inherent issues. It's hard, and it grows big, and it's annoying, and you do repetitive things in it very
15:23
often, and somebody comes and says, I'm going to do something called less, or I'm going to do something called Sass, and I'm going to write something that resembles CSS but has more features in it, but I can take all of those features and in the end turn them into CSS. So I'm just going to take my less or my
15:41
Sass and process it from that language into CSS and serve that to the client, so I get a language I like but, in the end, I'm going to serve up a language that the browser likes. Make sense? What? It becomes less, but, yes, very funny. But the thing is, when
16:03
you start doing this, initially, I thought, well, who cares? I've got CSS, I've got JavaScript, I'm happy with that, and then you start doing these other things, and you realise they're actually quite nice. It's awesome to go in and write stuff in TypeScript because it gives me intellisense, it gives me features I can't get out of JavaScript, but I still
16:22
need JavaScript in the end, so I need to transpile my TypeScript into JavaScript. Well, how am I going to do that? How do I get that to work, and how do I get my JavaScript bundled, and then I need to minify it, and I need to get it chopped up into chunks that I need that are reasonable, and, well, if you go into, how many of you are using
16:42
Visual Studio? Pretty much all of you. If you do TypeScript in Visual Studio, Visual Studio will handle it for you. Visual Studio will take your TypeScript, it will convert it into JavaScript for you automatically, and then you're done with it. Same thing with less. Until you switch to ASP.net 5,
17:01
at least in the version I've got on my machine, it keeps changing, but less is not automatically transpiled in Visual Studio 2015 with ASP.net 5. You have to handle less and SaaS on your own. TypeScript is still being handled, but the goal is that we're going to move all of that out of our IDE and into a separate step. And the reason for
17:21
that is that this needs to be done during builds as well. Unless you check in all of your transpiled files and all of your minified and bundled files and all of that, this needs to be done on the build server as well, when you build and release. Building and releasing is generally not done through Visual Studio, it's done through a build server, which means that we need a way
17:41
to handle all of these resources and get all of this transpilation and bundling and minifying to work in a different little build pipeline that we can use for these things. That was not the way it should have gone. Why did it? Okay. So I ended up like that. I got really terrified because all of a sudden there's this big change, and you have to learn a whole heap
18:01
of new things, right? How many of you guys are doing this today? I'm just curious, because there were some people saying you were gulp. There's one, two hands. A few of you. It's actually not that hard, because once somebody came up and said Node.js is awesome because Node.js can run JavaScript for us on
18:20
our machines without running it in the browser and have access to your machine, everything went away, right? I just told you that JavaScript was crap and you needed some other language and now I'm telling you that JavaScript is the base name because it solves everything. You still need JavaScript to get around, but, through Node, we can actually do it locally on our machines using a task
18:41
runner and run different things and code up things that needs to be done with a little bit of JavaScript and have this little pipeline running on the side that's outside of Visual Studio and does all of this stuff for us. So, after you realise that I need to install Node, how many of you guys have Node on your machines? Okay, how many of you have not
19:00
got Node on your machines? A couple. How many of you guys, you guys who said you didn't have Node on your machine, how many of you have Visual Studio 2015 on your machine? You have Node on your machine. Because Node is actually deployed with Visual Studio 2015. It's a part of Visual Studio. It doesn't expose it. You cannot go and install Visual Studio 2015 and then go to your
19:20
command line and say I want to run Node stuff because it's a local Node install that only works for Visual Studio, but Visual Studio 2015 relies heavily on Node. So, Node is going to be in there on your machine if you run in 2015. Then you have to realise that you have to learn NPM, Node package manager, because Node as such just
19:40
runs stuff for you, runs your JavaScript, but the real big thing is actually going in and finding patching that will do what you need it to do, like bundling and minifying and transpiling and all of that, and download it. So it's basically NuGet for Node. It's a package manager. You go into NPM, you download the packages you need, and they can do things for you. Generally, this is the way you
20:05
do it. NPM is the command you run on your command line to install a Node package. No, NPM install and then the package you want to download. So you could go NPM install Bower and it will install Bower on your machine. You can also go in. This will just install the
20:21
package on your machine, which is not very useful, because when you check in stuff to source control, you don't actually want to check in all your packages. In the same way that a lot of people don't want to check in your NuGet packages into your source control, you just check in the packages.json file, or whatever it's
20:40
calling for NuGet, and you want to do the same thing for NPM. So you want to have a little NPM JSON file that that thing is called, that's package.json, NuGet has a different one. That JSON file contains the packages that you need to build your solution. You check in that file, and
21:01
then, on the build server, it will go and look at that file, install all the packages needed, and then run your scripts. So it basically means you don't have to check in megs and megs of NPM packages, because it does end up being quite big. Last project I worked on, I think we ended up with 110 megs of NPM packages. It
21:21
grows quickly, but as long as you don't have to check it in, it's not a problem. So you do NPM init and basically say I want to have that little file that keeps track of all my resources, or my packages, and then I install my package of choice adding dash dash save dash dev, and that means that I want to install a package and I want to keep a reference of that package inside of
21:42
my configuration file so I can reinstall it later on. It also means that whenever your friends go on, or your colleagues go in and download the project from source control, all they have to do is write NPM install and it will check through that file and see if there are any packages missing that you might have
22:00
added in the last check-in and install those for you. So you don't need to keep track of, oh, so dude over there just checked in, I need to go and get that package and I need to tell that guy that he also needs that package. It's just everything is in that file, you just do NPM install and it sorts everything out. And then once you've
22:22
got NPM and you get your packages, all of a sudden you realise that you only get some packages from NPM. You want some other packages as well, right? So you need other package managers like Bower and NPM JS if you want to. So you get a package manager to get hold of a package manager to get the package you need. It's simple,
22:40
right? NuGet was nice, there was one. You got everything out of NuGet. NuGet is not built to give you access to CSS files and JavaScript files. So CSS libraries and JavaScript libraries should not come down through NuGet. In the current version of NuGet 3.2 or whatever it is, you
23:02
cannot even deploy or distribute JavaScript packages and CSS files through NuGet. It's been removed because it shouldn't be there. So all of your client-side resources should come through Bower. So you go to Bower to get your Angular and your Bootstrap and every single JavaScript library or CSS
23:20
library that you want, it's through that manager, not NuGet. Or you can choose JSPM which actually does a little bit of this and a little bit of that and everything. There are a bunch of different things which is annoying to us as C-sharp developers or Microsoft developers because we're used to Microsoft telling us use NuGet, that's it. Now it's more like
23:40
use NuGet for some things and then NPM for some things and then Bower for some things and then maybe you want to have JSPM in there as well if that's the way you want it. But you have to get used to that. They all work in the same way pretty much though. You first run NPM install dash G and the package manager you want to use like Bower. Dash G means
24:01
I want to install it globally on my machine so it's available on my machine to work with. And then you just take your package manager of choice, in this case I call it PMOC, you do an init so it gets its own JavaScript or own JSON file keeping track of all of its packages just like NPM has its file. And then you choose the package you want to install and you
24:20
add dash dash save dash dev and that writes that package to your config file. You'll see all of this. I will demo it. There's a lot of people going out there. It's not as complicated as it sounds, I promise. And once again, whenever you get something down for source control, you just do package manager of choice, install and you're done with it. That's it.
24:40
So you do Bower install, it gets all of your Bower dependencies. Now that you've got all of your Bower dependencies and all of your JavaScript stuff, you're still writing your stuff in TypeScript or less and you need a task runner which is another little thing that will take your code and bundle and minify it and transpile it and do whatever you feel like. It's basically a
25:01
little tool that will allow you to write little JavaScript tasks, little things that you can do in JavaScript and say I want to run this now or tomorrow or every time I do this. And these tools will basically run through your JavaScript on your machine and do things like bundle and minification and transpilation and all of that. And once again,
25:22
there is not one. It's not you go and get one, there is the one you should use. The most popular ones today are that's Grunt. Grunt is really, really big. I'm not personally a big fan of Grunt because it works with configuration instead of code. I prefer coding instead of
25:40
configuration. So I use something called Gulp which is basically the same idea, it's just that I get to write more code, not just configure stuff to run, which gives me a bit more flexibility. You can run Brunch. Never tried it, but it's another one of those out there. You can run Broccoli. Who comes up with these names? The whole
26:01
JavaScript community is screwed. So Broccoli is, I think that is what Angular 2 are using. Angular 2 went in and looked at different task runners and came up with Broccoli being the one that they wanted so they have done a bunch of work with Broccoli to get that to run for Angular 2. It's fairly complicated, I think, but
26:21
all of them are in one way. And then you've apparently got someone called Mimosa. There are a whole heap of them. The good thing with Gulp and Grunt to me is the fact that there is a huge ecosystem out there. So if I want to minify CSS, I just go out and search Gulp minify CSS and I get five different packages that will do that for me in
26:41
different ways. If I want to transpile TypeScript that's out there, if I want to sip stuff, I can do that. If I want every single thing more or less that you can come up with, there are already pre-built packages for you for both Gulp and Grunt. I have no idea how it works for the other ones. They're probably big ecosystems as well, but those are kind of the oldest ones which
27:00
means that they have the most stuff out there for you to use. You install your task runner with dash G to install it globally. Then you do your NPM init in your project. You install your task runner in your project as well. So your task runner needs to be installed both globally and in your
27:21
project in most cases. Then you create your task in what's called a task runner config which is a JavaScript file with the stuff that the task runner should run, and then you run your task runner and tell it what task to run. Basically, you can go Gulp my task and it will run through the stuff that you've configured my task to
27:40
do. How many of you guys have I lost so far? How many of you are sitting in here going, I'm never going to use this. This is complicated. No one? Awesome. Let's just go ahead and have a look at it. Just talking about it doesn't really make it justice or give it justice. This is a
28:00
simple ASP.NET project. Why am I not... There it is. It is ridiculously simple. It's an ASP.NET MVC project. It is empty except for the fact that I have a controller called HomeController and I have a view called index. If you cannot follow along with
28:21
that, you are in the wrong session. That's not the file I want to open. And the view looks like that. Anyone impressed so far? Not at all? Okay, cool. I just want to give you the baseline of what I've got up here. There's nothing magic in here. I haven't added anything except set up the project. The first thing I want to do is, what I'm going to
28:41
build here is the most ridiculously simple website you've ever seen, but it's going to include some Bower dependencies, Bootstrap in this case, and Angular, and I'm going to use less for some styling, and I'm going to use TypeScript to build a little Angular application, and then I'm going to transpile,
29:01
bundle and minify all of that and show you a little trick at the end of how to use it. So, you're going to get the whole thing. So, even if it's very, very simple, it's going to contain all of the things that you're used to. It's going to contain Bower dependencies or the things that you should be using. Bower dependencies, TypeScript, less, and you will see the whole step, okay?
29:20
Let's see if this works. There's a lot of command line stuff. If you're doing ASP.NET 5, you can actually do a bunch of the command line stuff that I'm doing here like Bower and NPM inside of Visual Studio, but since I'm doing ASP.NET 4.5 or whatever the current version is called, I need to do it through here. So, we're going to go and go Bower
29:41
init. That's going to ask me a whole bunch of questions. You just press enter until you get that. That's as complicated. You can do more stuff, but enter works. Enter is fine. And if we go in here and we view files, we'll see that it's added a Bower JSON file.
30:01
Just include that in my project. And if we look at it, you'll see that it's just a JSON file. There's nothing complicated in here. What do all these things do? I have no clue. You don't have to care about that. It doesn't matter. Once I've got that, I need to go and get the Bower dependencies I need. So, I do Bower install.
30:23
Let's start out with bootstrap dash dash save dash dev. That will now run off. It will look as you can see pretty much what it does. It goes to GitHub and it finds bootstrap git and since bootstrap also has a dependency on JQuery, it will get JQuery for me as well.
30:41
And if I go back here, I open my Bower.json file. You'll now see that it actually says I have a developer dependency here called bootstrap. This is the version number that I'm using at the moment. And if I open this up, and we zoom in, you'll see I've got a Bower components folder. Inside that,
31:00
I've got bootstrap. Inside bootstrap, I've got dist. Inside dist, I've got CSS and here are all my CSS files. For bootstrap, you actually get a whole freaking thing with unconverted less and JavaScript and grunt and task runners and everything to actually build the whole thing. I also get, as I said,
31:21
bootstrap depends on JQuery. So for JQuery, I get a JQuery folder as well with all the JQuery stuff that might be needed. And besides that, I actually need Angular as well. So I'm just going to go and say install Angular like that.
31:41
And if we refresh that one, it's not going to say I'm dependent on Angular version 1.4.8. And I get Angular in here with my Bower components as well, so it's Angular up here. So it's quite neat. It's just as simple as with NuGet, except for the fact that there's no UI, but I can just go
32:01
and get the resources I need. And basically, any JavaScript library that you want or any CSS library that you want is going to be on Bower. So you just go Bower install whatever you feel like dash dash save dash dev and you're good. Now that we've got that, I'm just going to go in here. I'm going to create a Jumbotron.
32:20
It's not called a Jumbotron. It's Jumbotron like that. So this is just a simple div with some bootstrap stuff in there to create what's called a Jumbotron. And I'm also going to go ahead and I'm going to pull in my bootstrap stuff. So I'm going to pull in the CSS for bootstrap.
32:41
I'm going to go with the bootstrap min CSS like that. And yes, you're getting a weird Bower components bootstrap this CSS blah blah blah. That's going to disappear in the future. I do not want you to start deploying Bower components folder to your production environment
33:01
and stuff like that. We'll get around all that. That's just for development. It's going to be on your machine. But when you start building and deploying to your production environment, you will not be deploying the whole Bower components folder. Well, you can if you want to, but I wouldn't recommend it. I put this in here and if we run this, just going to see that it works.
33:24
Just going to see that it works. There it is. There it is. It's beautiful, right? Nobody thought it was beautiful. Now I'm getting scared. I just want to show you. It's just simple bootstrap thingy.
33:41
There's a little curly brace, curly brace, mustache, or handlebar syntax that will be on my Angular stuff. But what you see here is it's a fully working web page, right? We can agree on that. So I'm going to go in. I'm going to make some changes because I don't think this looks good enough. So I'm going to put in some styling. So I need a new folder called styles.
34:04
I'm going to create a new file, new less, and I'm going to call it site.less. And in here, I'm just going to delete all of that and I'm going to go styles and input some styles.
34:20
I always have that as a tip for anyone working in development. Don't take on projects where you don't have predefined snippets. It just makes life so much simpler. I'm going to do snippet programming basically because I don't want you to sit here and look at me coding because it's going to take forever. That's why I'm going to do snippets. But I'm going to try to keep them small so you can see them. So this is less.
34:41
How many of you guys work with less today? Some of you? Less is awesome. It's just a simple version of CSS and you can get repetition and all of that and this will then turn into nice CSS when I'm done. The problem with this thing is I can't actually use it at this moment because I can't serve up less to the client. Well, I can, but it wouldn't be useful.
35:03
So instead, I'm going to go ahead and transpile this into CSS. And to do that, I'm going to use Gulp. I use Gulp, as I said. You can use whatever the task runner you want. It's just that I'm used to Gulp so it makes sense to me. And to do that, I'm going to start off by telling NPM that I want to create a NPM init file like that.
35:23
This, unfortunately, you can't just go enter, enter, enter through because it won't allow the name that's down here, ndc-demo, to be a different casing. It has to be lowercase. So if I just change that to ndc-demo, then I can go enter, enter, enter, enter. There it is. I'm done. And if we go back here
35:41
and we look at the files in here, you'll see that there is a package.json. Include that. And package.json looks like this. It's once again just a JSON file. Keeps information about this project, but you can ignore all of that because it doesn't make any sense to you. It makes sense to have one of these
36:00
with a bunch of stuff in it if you're building a node application. Then this makes sense. But for this, all of the stuff that's in here now, you can just ignore. It's just going to have a list of the dependencies that I've got. So I'm going to go back out here and I'm going to go, not app start, I'm going to go NPM install and what I want is gulp.
36:20
Dash dash save dash dev. And this is going to run off and get gulp for me from the NPM directory. I already have gulp globally on my machine, but as I said, you need to install it both with NPM install dash g gulp and then do it locally for each of your projects as well.
36:40
The reason for doing it globally is that I can then go in and just type gulp here and run gulp tasks from the command line. So you'll see that, but I just want to tell you that I've already done a dash g, so I'm not going to do it again. Once I've got that, I've got gulp, right? So I can go ahead and create a gulp file and I can run gulp tasks, but my gulp tasks aren't actually going to do anything.
37:01
I need other packages to do the actual stuff. So I'm going to go ahead and install another package called gulp dash less. So all gulp plugins are called gulp dash something. In this case, I'm doing less conversion, so it's called gulp dash less. Which is fairly simple. It's going to run off and download a bunch of things again.
37:24
I'm also using a fairly new version of NPM. Older version of NPM would create this awesome folder structure called node packages. If we go in here and we have a look here, this thing is going to say that I've got two dependencies now. And if we look at the folder structure,
37:41
you'll see that we've got node modules. The node modules folder used to have a recursive folder structure, so each dependency you would download would have another node modules folder that had all of its dependencies. And all of those dependencies would have a node modules folder that would have all of those dependencies,
38:01
and it would basically create this massive tree of folders. And anybody know what that causes? Can't delete it, exactly. Because Windows will allow you to create however deep a folder structure you want, but deleting it? No, no, no, no. If it's more than 260 characters deep, Windows won't delete it. And you will never be able to delete the folder
38:22
that you've put that node modules folder in on your machine again. You need to get other tools to be able to delete the folder, which is ridiculous. New version of npm actually keeps a flatter structure. That means that it won't go 260 characters in most cases.
38:40
And if it does get deep for you, there is an npm package called flatten packages that will flatten the whole thing that will basically get you down to your 260 characters. But it's awesome in 2016 to have the problem of not being able to delete a folder in Windows because it's too deep. Anyhow, I've now got gulp and gulp-less installed.
39:02
I've got my node modules with all the stuff that I need. I've got my package.json saying that I've got the dependencies on... No, sorry, not that one. Package.json saying I've got dependency on gulp and gulp-less. So the next thing to do is create a gulp file.
39:20
So most of these SaaS runners build on that same idea that we go ahead and we... Let's see here. We create a configuration file. So I'm going to go and create a gulp configuration file. There's also a grunt configuration file. It's going to be called gulp.js, gulpfile.js.
39:41
That's standard. It's supposed to be called that. That's it. You get one of these. This is a node application, basically. It requires in gulp, and then it creates a default task, and the task doesn't actually do anything, so it's quite useless. But I'm going to create another task in here, and I'm going to call that... I'm going to add one called transpile...
40:04
transpile... transpile-less. There it is. transpile-less. I'm going to require in gulp-less, which was the module I just downloaded. I'm going to create a task called transpile-less, and then what's going to happen inside of that task is this.
40:23
I'm going to use gulp to say, can you get me all files in the styles folder and any subfolder that is named something .less? This is called a glob pattern, which is apparently very common in Unix and Linux world, but it's basically a simplified way of saying
40:43
I want to get files with a specific format. You can also pass in an array, but I just need that one folder and all the less files inside of it. Then you use pipe to say, once I've got all of those files, can you please shove those files into the less function?
41:02
And then when I've done the less function, the less function then returns a new stream of those files, and then I say, can you please shove those files into gulp-dest, which basically says, can you write the result out to this directory? So if I go ahead and I run this, I can go and I'm just going to save that. I can go here and I go gulp transpile colon less enter.
41:28
It looks like that. It takes barely any time whatsoever. And if I go back here now and I look at my styles folder and I look at all the files in there, you see that there's a site.css and it's taken my less and converted into CSS.
41:43
And nobody's impressed again. This is awesome. This is, yeah. It's not very impressive, I know. But it's basically the baseline for everything that we're doing. This is what we're going to be doing in different forms. So now that I've got my CSS, oh, yeah, there's one more thing. There is an awesome tool that's available in Visual Studio 2015
42:01
by default, and you can add it as an extension to 2013 called the Task Runner Explorer. The Task Runner Explorer is an addition that will basically work with gulp and grunt files. If I go back down here and I refresh this, you'll see down here that it's found, it's a gulpfile.js,
42:20
it's found the tasks that are in there. I can take my transpile less and I can run it from in here and it will run it here and do exactly what I did from the command line, but I can do it with my mouse and just right-click and say run. And then we can take this,
42:41
no, sorry, we can take that, and we can take the stuff that I have in here, my CSS, and we can pull it in here after my bootstrap, put it in there, go back out here, refresh, and you'll see my awesome lead designer skills is blue. Once again, not very impressive,
43:01
but I could have restyled it however I wanted, I just decided that making it blue with white text was subtle and nice, like flat design for the win. So now we've got to the point where we've got less and we transpile that into CSS, which works fine, and we've added the CSS file to our page together with bootstrap, and everything works fine.
43:21
So the next thing is to get a working TypeScript Angular application. Anybody doing Angular development today? Okay, anybody doing Angular development today with TypeScript? The rest of you? Shame on you, because TypeScript is awesome. I'm going to add a new folder. I'm going to go add new folder script.
43:43
I'm going to go in here, and I'm going to cheat now. I will explain why I'm cheating. I'm going to add a new JavaScript file. I'm going to call it app.js. I'm going to go in here, and I'm going to write demoCTRL escape tab, like that. Then I'm going to go to my app.js file,
44:01
and I'm going to change it to app.ts, go yes and no, and everything is fine. The reason for that is that it looks like crap, though. Okay, that was interesting. The reason is that there's no snippet support
44:20
in TypeScript files. For some reason, it's like the only thing that you cannot add snippets to in Visual Studio. You can do it in JavaScript. So the only reason I went with JavaScript first was that I'm lazy and don't want to write this, and I want to have a TypeScript snippet. So generally, this is really hard to read, and I have no idea why it decided that it should write it like this, but it basically creates a module called demo,
44:41
it creates a controller called demo, it has a single property called greeting, which is a string that says hello from TypeScript. It creates an Angular module called demo and adds that one controller to it in TypeScript. So it's nothing complicated at all, and that's not the reason that I'm here talking,
45:00
so we will just leave that. It's an Angular controller. Then I'm going to go npm install gulp. Anybody want to guess what I'm going to install here? TypeScript. Gulp, if I could spell, TypeScript. Once again, I'm transpiling TypeScript, so the tool that I need is gulp TypeScript. While that installs, I'm going to go over to my gulp file.
45:23
I'm going to go and add a transpile TS. Once again, I just required the tool that I need in this file, the package I need, gulp TypeScript. I created a task called transpile TypeScript. It, once again, same thing. It goes ahead, looks for all files in the script folder
45:41
with a TS extension, pipes it to the TypeScript, telling it that I need to target ES5, which is the current version of JavaScript, and then I want you to output the result into the same folder. Are we impressed? No. But it works. So if I go here, I go to my task runner, it's already found it, I go run,
46:02
this thing should just go through, everything should be fine, and we look at the source code here, or the source out here, you'll see there's an app.js file. And the app.js file is basically my TypeScript converted into JavaScript in a nice, standardised way.
46:21
Now that we've got that, I can go to my view, I'm going to take my app.js file and add that here, and somebody's going to go, but, Chris, you should add JavaScript to the end of the page. Yes, I should, but I'm not going to. The reason you add JavaScript to the end of the page is that basically it will cause the page to render properly and then load the JavaScript and execute the JavaScript,
46:41
but since I'm, first of all, you'll see why I'm doing it like this, because it simplifies in a later part of the demo, and second of all, it doesn't really matter with something this simple. The only thing also, if you add your Angular stuff at the end, you'll also end up with showing handlebars all over the place for a long time, which can be quite annoying. So I'm just going to add it up here,
47:00
and I'm also going to go in and I'm going to add an Angular.js. Like that. And this might just pass by and you might not notice it, but I'm actually adding Angular.js, not Angular.min.js. Anybody know why? What? For debugging, exactly.
47:21
Angular.js, if you've mucked up your modules and your loading of your Angular stuff and your dependency injection, Angular.js will give you information about what you mucked up. If you go with Angular.min.js, Angular will just tell me you're stupid and the stuff that you've fucked up is ABCF924,
47:41
and you look at that and you go, okay, that helps me nothing. So I'm going to leave it at Angular.js. This took me a while to figure out. I had no idea I always added Angular.min.js, and I never figured out how to solve my problems. It was always a hassle. Having that in there, transpiling my JavaScript, I need to fix my view by adding a data-ng-app equals demo
48:04
and a data-ng-controller equals demo ctrl as ctrl like that, and then I data-bind to ctrl greeting, right? Go back out here, refresh, and there it is.
48:27
A fully working Angular application with TypeScript and less. This is awesome and nobody cares, okay? I'm going to take it one step further, because now it actually gets kind of cool.
48:41
But it's quite tedious having to go down here and say, okay, so I've made a less change, I need to run transpile less, and then run that and then go to the browser to check your change, right? That's kind of annoying. Luckily, Gulp has this feature of watching things. At the end here of my Gulp file, I'm actually going to add a Gulp watch like that.
49:02
It's a task called watch, and it basically says I want to watch all of the less files in the styles directory, and whenever one of those changes, I want to run the task called transpile less. And the same thing for TypeScript files, whenever they change, run transpile TypeScript for me. And then I can run this task,
49:21
and if I run that, the watch task, it will basically lock my execution of Gulp down here, and it will sit there and wait for changes. Which is exactly what I want, so I'm just going to go ahead and go, just going to go ahead and, let's see here, there it is, run. But I can also go in and say I want to bind this,
49:42
I want to bind this to project open. So whenever somebody opened this project, it's automatically going to start the watch task for me. It does that by adding a little triple slash comment up here, saying that whenever the project opens, run this task for me. You could even have this run a task
50:00
that will basically reinstall all of your Bower components and all of that so you don't have to do that manually. So why is this cool? Well, have a look at this. It's blue with white, right? Go into my less file, pink, save, no refresh, no rebuild, go back out here and it's pink.
50:21
Go back in here, change the colour to, I love pale golden rod for some reason, it doesn't work with pink, but it's just the best name ever. And there it is. It refreshes on the fly. So using browser link, this thing will actually hook up a little JavaScript thing that talks to Visual Studio,
50:40
so whenever the file that I'm loading, in this case, my CSS file changes, it will reload the CSS in here, which means that whenever I change my less file, it auto recompiles or retranspiles my CSS file which gets refreshed, which causes browser link to tell the browser it needs to refresh all of its CSS. So our flow for doing changes here is awesome.
51:02
We can do whatever we want in here. I can change the colour once more and it will do it. It could be more complicated, I promise you. But it's actually quite a nice flow to have this going continuously if you're working with a lot of styling. So I'm going to quickly run through the last couple of things. It's going to be very, very similar to what you've already seen.
51:21
I'm going to install a few more things. I'm going to install Gulp, and I'm going to install something called CSS Nano, which is apparently the new package to use for minification of CSS. I used to use some other thing, but when I installed that you get a warning saying that this thing has been discontinued, you should use this instead. And that's what happens when you work with JavaScript.
51:42
Whatever you've just used, it's wrong. That was yesterday. Today you should use this, and in two hours you should use this. Yes. It's just front-end stuff. It will not do back-end stuff.
52:02
So the question was whether or not Gulp watch could do back-end stuff as well, it's only for CSS and TypeScript stuff, basically. So now that I've got CSS Nano, I need to install a little helper thingy, because for some reason I can't get this to work without it, so I need a little CSS promise library that will basically polyfill promises from ES6.
52:25
I couldn't get it to work otherwise. And I'm going to use another thing called Gulp-concat-css, like that. While that installs, I'm just going to go over to my Gulp file. I'm going to go in here to my transpile-less,
52:41
somewhere around there, and I'm going to say bundle-styles, like that. So I require my three new helpers here, my Gulp-css-nano, my ES6 promise thing that just polyfills promises, and Gulp-concat-css. Then I created one new task called bundle-css.
53:01
So what bundle-css, first of all, it has another thing here. It's got an extra parameter here saying that before I can run, you need to transpile-less, so you need to run this thing first. So it goes and runs transpile-less, and then it goes up and says, I want to pull in, and now I'm passing in an array here, saying that I want to get hold of the bootstrap CSS file
53:22
and all of my CSS files that I've just transpiled, concatenate it into one file, minify it, and write it out to a dist folder called styles. Run this thing, bundle-script, bundle-css, there it is. Run.
53:41
And we look at all of the files in here, you'll see that there is now a dist folder with a styles folder with a site-min CSS, and if we look at that, that wasn't what I want to press, I want to press that, you'll see that it's now bundled all of my stuff. So it's got bootstrap in here, and here at the end, you've got all of my amazing CSS,
54:03
which is that part there, just added to the end of it. So I've now bundled and minified all of my CSS, which is just, well, it's a few lines of code and a couple of packages, which is quite neat. And for JavaScript, or the TypeScript to JavaScript to bundle to minify,
54:20
it's actually not much more complicated. You just install another gulp package, in this case gulp minify, which will minify my JavaScript. And yes, I know there's a lot of waiting for this when I do a presentation like this, but you're not going to be installing like 50 new gulp packages every hour like I'm doing.
54:43
So normally you'll install these at the beginning of the project, and you should be done with it. I'm going to do gulp concat. So that's just two more things, minifying concatenate. But I'm going to make a little bit of different, have a different approach for my JavaScript. And I'm going to go in here,
55:01
and I'm going to say minify script, if I could spell. Thank you for the help, everyone. Minify script, there it is. I require gulp minify, and I create a task called minify scripts
55:21
that requires me to run transpiled TypeScript first, then it pulls out all of my transpiled TypeScript files, my JavaScript files, pulls those out, minifies them and writes them out to a build folder. So basically I have a middle way in between my distribution and my source code that's called build, where I can put all the stuff that I'm working on
55:41
as I'm building it, and it can be really helpful to actually output sort of half-done stuff into that folder so you can keep track of if something goes wrong, you can go in there and figure out why did this load weirdly? Did my files come in the wrong order or did I do something wrong? And then afterwards I'm going to go in here and I'm going to say bundle script,
56:03
and once again I just get my gulp concat, and I create another one called bundle scripts, which calls minify scripts, which calls transpiled scripts, or transpiled TypeScript. It goes ahead and it pulls out Angular and it calls out all of my minified JavaScript files,
56:20
concatenates them into one, and outputs them into the dist folder. And if I run this, which is bundle scripts, you should see that I've got another folder in here in my dist folder. There's a build and a dist now. Why is this not...
56:41
There it is. So I've got a build where we get my scripts, where I get my minified JavaScript file, and I have a dist folder with a script with a minified JavaScript file, and if I look at that, it's going to contain all of Angular and at the end you're going to see all of my awesome JavaScript code.
57:01
So finally, now that I've got that done, I'm going to start using that on the page, but I'm going to make it with a little tweak. So I'm going to go ahead and I'm going to pull out my view, which I can't find. There it is. I'm going to go in here, and I'm going to actually delete all of that and say resources like that. So I'm still going to have it write out
57:23
my angular.js non-minified and my app.js non-minified and unbundled and all of my raw files if I'm in debugging. And if I'm not in debugging, I'm going to be putting in my minified bundled files. This means that if I go out here now and I refresh this,
57:41
this will start uploading all of my resources like it's used to. Look at the source for this. It's still going to... So that was pretty small, but control plus. Can't do that if I do it like that. You'll see it has all of my different files in here. All of them being four of them. But if I go in here and I go to my web config file,
58:02
I change the debug to false, go back out here and refresh my source and setting it to debug to false is what's going to happen automatically when you deploy to production, which means that in production, I'm going to get the minified versions of it. So I can, in development,
58:20
work with my raw code and get easier debugging, but then I can, in production, actually use my minified bundled versions. So I've got five minutes left. I want to do one last thing that I want to show, which is nice. I'm going to go ahead and install one thing. So I'm going to install something called RimRaf.
58:43
RimRaf is a way to delete deep folder structures. So I'm going to use that. And then I'm going to create a task in here called clean. Clean. Which basically requires in RimRaf to do the work.
59:02
And RimRaf is not Gulp specific. RimRaf is actually just a node thing. So you can pull in your node modules as well so it doesn't have to be Gulp specific. And then I'm going to create a clean build and clean dist which basically just deletes my dist and my build folder and create a task called clean that does both of those things.
59:21
And then I'm going to go in and say clean and I'm going to hook that up to clean. It's hard to see, but basically I can hook it up to clean in Visual Studio. And if I hook that up, if I ever go in and go right-click my project and say clean, it will delete the build and dist folder for me and I can rebuild everything
59:41
and make sure that I get fresh stuff. So if you get caching problems, once in a while, if you rename things, you'll get the old thing hanging around and things like that. So being able to clean it easily is just nice. So that's pretty much all of the demo stuff. I just want to have a couple of gotchas that I've learnt along the way that's cost me some...
01:00:00
problem. I've made it very simple, very simple Gulp tasks, they do very little, and they're all dependent on other tasks. If you go ahead and start running a bunch of tasks and say I'm requiring these two other tasks to run first and all of that, all Gulp tasks run in parallel. So if you start doing things in Gulp, remember that whenever you
01:00:22
do Gulp dot something, it will be in parallel. So, if you're needing, like, I needed transpilation of my TypeScript to JavaScript first, if I tried doing that as a not as a pre-step to my task, but actually as a part of what I'm doing, I could end up
01:00:40
with problems with it not being done and things like that. Keep in mind that everything is in parallel. If you're running into problems, Gulp tap is an awesome little tool where you can plug in and basically say can I get information about everything that's happening, can I see all the files that you're processing at the moment inside Gulp so we can add debugging in there. I'm about to run out of time. Angular, if you
01:01:01
minify Angular, it works fine like I did it, but as soon as you take a dependency for dependency injection, once you minify it, all dependency injection stops working. You need to tell Angular with a different syntax that you're actually needing dependency injection, and minification needs some tweaks. You need to order files in the right
01:01:20
way. It wasn't hard when you only got two, but when you got 600 of them, having them order in the right way can be a bit complicated. There are Gulp tasks that will basically set them up in order so you get them ordered correctly. Visual Studio will transpile your TypeScript for you automatically, and the way that it transpiles it is actually a little bit different than TSC like the Gulp
01:01:41
version does, so if it works in Visual Studio, it doesn't necessarily mean that it works in Gulp, so you need to make sure that it works in both places if you're using Visual Studio as well for your transpile. You need to get your client-side pipeline or your build pipeline running as part of your
01:02:00
continuous delivery builds as well on your build server. That's a whole topic on its own, and on my blog, I've just recently gone through and basically written blog posts on how to do it from GitHub to Azure, from Team Foundation services to Azure both using old and new build types, so that
01:02:21
can be a bit of information in there. Cache busting, remember that now that you're all of a sudden putting old files into one name and all of that, it becomes even worse that you need to bust a cache and add like a query string parameter or something like that so it doesn't cache your old files. Ooh, there was a lot of stuff here. You can serve less straight to the
01:02:41
client. I do that in one of our projects for debugging, and then you add a .js file that will transpile the less in your browser. Since I got browser links to work nicely like this, I would never do that again, but it's possible to do. I also have a prefix configurable in my web config, so whenever I output my .js file, I always add that prefix which is
01:03:04
quite nice because it's just a tilde to begin with, but then if I change that into static.foo.com, all of a sudden I can load my resources from a different machine, and if I change it to blob storage, I can just add the address to my blob storage, and all of a sudden I'm loading my resources from blob storage instead of from the web
01:03:22
server, and the same thing for CDN, so it just gives you that flexibility. Gsip is awesome, can be added into gulp as well, and you can also do all of your JavaScript testing and lint your JavaScript in there to make sure that all your syntax is correct if you are writing pure JavaScript and not TypeScript. Sorry, that was very fast
01:03:42
at the end. I want to thank you all for listening. If you have any questions, I'm going to be around for today and tomorrow. I'm also going to be at the Pluralsight booth tomorrow. The times will be in the booth, and you can come and talk to me about this, or if you want to talk about Owen, that's the main reason that I'm there, and as I said, if you want to look at Pluralsight
01:04:01
and watch some courses, potentially even my course, please, please, please watch my course. You can come up here, and I've got these unlimited access passes for you. Thank you all for coming and listening. It's been awesome.