I say A “front-end build pipeline” – You say WAT!?
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 | 96 | |
| 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/51725 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
00:00
Information technology consultingCASE <Informatik>Scripting languageProcess (computing)Web pageWeb 2.0Virtual machineInternetworkingNavigationComa BerenicesSingle-precision floating-point formatBitSoftware developerPoint (geometry)Web-DesignerServer (computing)Multiplication signWebsiteWeb browserPresentation of a groupFLOPSDomain nameNumberFlow separation2 (number)Drop (liquid)Graphical user interfaceDifferent (Kate Ryan album)Connected spaceComputer fileLine (geometry)Task (computing)Medical imagingBarrelled spaceVideo gameForm (programming)Limit (category theory)Java appletGraph (mathematics)Information1 (number)Dot productGoodness of fitInformation technology consultingFront and back endsUniform resource locatorMemory managementComputer animation
06:33
Connected spaceServer (computing)Computer fileDependent and independent variablesTelecommunicationSoftwareControl flowVirtual machineMultiplication signInternetworkingSound effectLine (geometry)Maxima and minimaCombinational logicMedical imagingService (economics)Bit rateWeb 2.01 (number)Point (geometry)InformationGoogolComputer animation
08:28
Multiplication signInheritance (object-oriented programming)Video gameGame theory2 (number)Medical imagingDeterminismMiniDiscWeb 2.0Point (geometry)Computer animation
09:38
HypothesisRight angleQuicksortDescriptive statisticsComputer fileArmVideo gameBootstrap aggregatingProcess (computing)Different (Kate Ryan album)TwitterDefault (computer science)Computer animation
11:03
Band matrixObject (grammar)BuildingDescriptive statisticsProcess (computing)Point (geometry)Object (grammar)Presentation of a groupTouchscreenNumberVirtual machineCoefficient of determinationRight angleFormal languageBit rateSampling (statistics)Basis <Mathematik>Computer animation
12:33
Formal language2 (number)Web-DesignerLine (geometry)Data managementQuicksortVirtual machineWeb 2.0PreprocessorWeightSoftware developerGreatest elementRoutingCoprocessorAlgebraic closureRight angleMultiplication signGoogolQuantum stateScripting languageProcess (computing)Computer animation
15:01
Installation artTrailVirtual machinePoint (geometry)Data managementRevision controlInstallation artBootstrap aggregatingProjective planeFront and back endsModule (mathematics)CASE <Informatik>Computer fileSource codeMultiplication signRight angleEndliche ModelltheorieMetropolitan area networkData miningComputer animation
16:57
Installation artCASE <Informatik>Virtual machineFamilyData managementRight angleTrailPoint (geometry)Projective planeWeb pageGoogolSoftware developerAxiom of choiceInstallation artTask (computing)Electronic mailing listWordModule (mathematics)Computer fileComputer animation
19:16
Installation artAxiom of choiceTask (computing)Hill differential equationCASE <Informatik>Projective planeTask (computing)Universe (mathematics)Virtual machineConfiguration spaceWebsiteInstallation artComputer clusterRight angleComputer animation
20:27
Game controllerView (database)WindowBootingLipschitz-StetigkeitControl flowWebsiteGame controllerService (economics)Gastropod shellAreaINTEGRALComputer fontScripting languageCartesian coordinate systemRoboticsMultiplication signElement (mathematics)Text editorView (database)Graph coloringMathematicsPoint (geometry)Software developerCASE <Informatik>Food energyProjective planeComputer fileVisualization (computer graphics)Module (mathematics)Bootstrap aggregatingComputer animation
22:48
Home pageProjective planeComputer fileBootstrap aggregatingComputer iconRight angleLevel (video gaming)Uniform resource locator
23:51
Surjective functionStylus (computing)Component-based software engineeringComputer fontBoom (sailing)BuildingField (computer science)PressureHydraulic jumpComputer fileSubject indexingDomain nameVisualization (computer graphics)Bootstrap aggregatingCartesian coordinate systemClosed setGoodness of fitWebsiteInformationWeb pageLevel (video gaming)Form (programming)Source codeVirtual machineHand fanProjective planeComputer fileGame controllerConnectivity (graph theory)Software developerKeyboard shortcutRight angleData miningScripting languageProcess (computing)Power (physics)View (database)Arithmetic progressionType theoryCoefficient of determinationPlanningTrailSequelSpeech synthesisGastropod shellMechatronicsComputer animation
28:16
Execution unitFingerprintThermal expansionFormal grammarCue sportsBuildingVisualization (computer graphics)Computer fileVideo game consoleTask (computing)Template (C++)Configuration spaceProjective planeCombinational logicPattern languageString (computer science)Installation artMultiplication signResultantExtension (kinesiology)Computer fontGroup actionWebsiteData conversionArithmetic progressionVirtual machinePlug-in (computing)Module (mathematics)InternetworkingKeyboard shortcutForm (programming)Software bugMassSystem callVolumenvisualisierungFamilyRange (statistics)Video gameRight angleJava appletGodSource codeCoefficient of determinationElectronic mailing listClosed setScripting languageBasis <Mathematik>Source codeComputer animation
33:50
Repository (publishing)Open setTask (computing)Keyboard shortcutBuildingError messageFunction (mathematics)Electronic mailing listPhysical systemModule (mathematics)Physical systemConnectivity (graph theory)Visualization (computer graphics)Source codePlug-in (computing)Task (computing)Configuration spaceDirectory serviceComputer fileQuicksortMereologyResultantEnumerated typeWeb browserMobile appExtension (kinesiology)Matrix (mathematics)Goodness of fitWeb 2.0Product (business)Multiplication signInstallation artDot productProjective planeView (database)Translation (relic)GodData storage deviceGame controllerProcess (computing)Coefficient of determinationAutomationScripting languageSystem callEndliche ModelltheorieWeb pageLetterpress printingJava appletFlow separationINTEGRALPower (physics)Coma BerenicesFile formatType theoryService (economics)Source codeComputer animation
39:25
BuildingComputer virusData typeScripting languageSystem programmingModul <Datentyp>Game controllerHypermediaComputer fontCross-site scriptingCache (computing)Link (knot theory)Video game consoleService (economics)Keyboard shortcutOpen setPhysical systemComputer fileMultiplication signComputer clusterProjective planeModule (mathematics)Mobile appGraph coloringFunctional (mathematics)Pattern languageMathematicsTask (computing)Perturbation theoryVisualization (computer graphics)Link (knot theory)Web browserRun time (program lifecycle phase)Game controllerSoftwareWebsiteTouch typingView (database)ChainType theoryMessage passingService (economics)Axiom of choiceObservational studyMachine visionTwitterSource codeComputer animation
42:38
BuildingComputer virusVisualization (computer graphics)Computer fileLink (knot theory)Cartesian coordinate systemWeb browserMathematicsTouch typingGame controllerComputer animation
43:29
Installation artPhysical systemGame controllerModul <Datentyp>Computer virusBuildingSource codeComputer fileComputer networkConstructor (object-oriented programming)Service (economics)Information securityTime domainPrice indexComponent-based software engineeringElement (mathematics)Default (computer science)Goodness of fitTouch typingLevel (video gaming)Type theoryTask (computing)Coefficient of determinationSet (mathematics)BitPoint (geometry)Computer fileBit rateControl flowStructural loadInstallation artMappingSource codeWeb pageService (economics)InformationGraphical user interfaceProfil (magazine)Game controllerRow (database)Software bugUniform resource locatorCorrespondence (mathematics)Single-precision floating-point formatCartesian coordinate systemMobile appVisualization (computer graphics)Source codeComputer animation
45:46
Repository (publishing)Installation artSystem programmingSynchronizationBoolean algebraFiber bundleExtension (kinesiology)Computer fileDefault (computer science)Physical systemModule (mathematics)Mobile appService (economics)MereologyFunction (mathematics)Multiplication signDifferent (Kate Ryan album)Structural loadWeb pageWebsiteBuildingMappingUniform resource locatorOrder (biology)Task (computing)InformationSource codeServer (computing)Plug-in (computing)Right angleBitConfiguration spaceGrand Unified TheoryBit ratePrice indexPoint (geometry)Coma BerenicesHoaxPlanningScripting languageForm (programming)Endliche ModelltheorieSpiralProcess (computing)Source codeComputer animation
50:24
Computer virusBuildingCore dumpModule (mathematics)Fiber bundleDifferent (Kate Ryan album)Mobile appPhysical systemService (economics)MereologyMathematicsFile viewerSoftwareLocal ringConfiguration spaceSource codeComputer animation
51:29
Service (economics)Multiplication signPhysical systemEndliche ModelltheorieComputer fileModule (mathematics)Mobile appFunction (mathematics)Configuration spaceSource codeComputer animation
52:20
Uniform resource locatorCross-site scriptingComputer fontHypermediaData typeScripting languageBuildingConvex hullVariable (mathematics)InjektivitätFigurate numberParameter (computer programming)Projective planeComputer fileService (economics)Constructor (object-oriented programming)Food energyBitSystem callGame controllerComputer animation
53:33
Constructor (object-oriented programming)InjektivitätSource codeLevel (video gaming)Food energyProcess (computing)Scripting languageSystem callMappingRight angleSource codeComputer animation
54:54
BuildingComputer virusProjective planeDifferent (Kate Ryan album)BitComputer fileModule (mathematics)DampingPlug-in (computing)MereologyAsynchronous Transfer ModeProduct (business)BuildingConfiguration spaceApplication service providerFlagParameter (computer programming)Structural loadVisualization (computer graphics)Local ringCodeCoefficient of determinationContext awarenessRevision controlVirtual machineSoftware bugFiber bundleComputer animationSource code
57:48
Task (computing)Software developerWeb 2.0Right angleScripting languageMeeting/Interview
58:55
Scripting languagePhysical systemVector potentialFunction (mathematics)Task (computing)Statement (computer science)Parallel portSource codeGodCoefficient of determinationLine (geometry)Streaming mediaPlug-in (computing)Projective planeScripting languageTap (transformer)BitModule (mathematics)WritingDataflowFiber bundleComputer fileCache (computing)Point (geometry)Single-precision floating-point formatVideo game consoleDemo (music)InjektivitätMoment (mathematics)Domain nameINTEGRALServer (computing)Order (biology)Physical systemString (computer science)Query languageVirtual machineConfiguration spaceWeb 2.0Parameter (computer programming)Different (Kate Ryan album)Structural loadMobile appBlogFlagVisualization (computer graphics)Power (physics)Grand Unified TheoryEndliche ModelltheorieProcess (computing)Poisson-KlammerProduct (business)Game controllerPattern languageDescriptive statisticsWordMultiplication signStudent's t-testCompilerSource codeComputer animation
Transcript: English(auto-generated)
00:05
Good morning, everyone. That was like the worst good morning ever. I love having the first slot the morning after the party. For several reasons. First of all, you were all sleeping. Second of all, I don't feel very well. I blame Niall.
00:25
He suggested that if I turn back the time on my watch, I'm not going home very late. It doesn't work like that, apparently. I still want to just wait for the crowd to arrive. I'm not sure that's going to happen, though.
00:42
The topic of the day is front-end build pipelines. My name is Chris Klug. I work at Novatrox Consulting in Sweden, where I do mostly coaching, mentoring... No, actually, mostly I attend conferences and speak and don't make any money. But I should be making money by teaching and mentoring,
01:02
development teams doing software development on the Microsoft platform, as well as a bunch of front-end stuff. I also tend to say exactly what I think. I lack some form of filter. If any of you feel offended during the talk today, please let me know straight away, and I'll find a way to offend the rest of the people
01:20
so nobody gets discriminated. Got a deal? Cool. Front-end build pipelines, which is a weird way of saying, I want to play with JavaScript task runners, basically. I thought, before we get into that, I want to go back a while on the internet.
01:42
Does anybody know what this is? Yes, a few of you. For those of you who don't, this is the world's first web page. It went online in 1991, and you can still find it online. I found it at some Swiss place, but I do believe it's actually available at URL.com or something like that as well.
02:05
This is what it looked like in 1991. As far as I've heard, this was hosted initially under Tim Berners-Lee's desk on a machine with a post-it on it that says, this is a server, do not turn it off. We've come a bit further than that at this point.
02:21
I pulled this up. I started researching this presentation. I pulled this up and I went, I'm just going to pull up the developer tools in Chrome and see what this actually means. I look at it and I go, there's one web request. There's one single request for one single HTML page, and it was 2.4Ks.
02:42
It's not quite like that anymore. Somebody called Brendan Eich decided in 1995 that he was going to introduce something called Mocha, that then turned into LiveScript. Since you couldn't sell LiveScript and Java was big, they renamed it to JavaScript, because that would apparently attract a bunch of developers.
03:04
They put it into Netscape Navigator, which was probably the biggest thing that's ever happened on the web. Also potentially one of the few developments that have been on the web not due to porn, but it's given us stuff we can use now.
03:22
This was 1995. This is four years after the first website in the world went online. This is last year. I was booking web travel for one of my conferences while I was writing this talk. I went into this page here, which I've tried to remove as much information about as possible, but I do think it says somewhere where I am.
03:42
I started looking at traveling. I looked at this, and this is an awesome web page. There are spinners, and there are little graphs going up and down, and there's movement, and there's stuff happening on this thing, and in the end it says, this is what you want to fly with, or rather, this is what you want to fly with if you're Chris, this is what you want to fly with if you've got money,
04:01
and this is what you can look at and hope to ever fly, because that's not going to take you 34 hours to get to Norway, and I'm from Sweden. The problem with this is I decided to pull up Developer Toolbar on this one as well, and it looks a little bit different. It's quite interesting. I just want to mention,
04:21
I'm not the kind of guy that goes F12 on every website I'm on. It just happened to be that I was doing this presentation, and I thought, I'll have a look. I got this, and if you haven't looked too much at the Developer Toolbar, all of those green little dots up there in the lines, that's actually a web request. We end up doing 298 requests.
04:40
If you can see that, that is 298 requests for one page. Then I started looking at another thing, 1.2 megabytes. Anybody find this a problem? No one. There's one guy. Two, three. The only people that think this is a problem
05:01
are the ones that have been around doing web development since about late 1990s and early 2000s, because we would optimise the crap out of everything we could find. Like, there's an image, and it's more than 4Ks. Sorry, can't do it. Now you just put stuff on the web, and you don't mind that it's over a meg.
05:21
It's like flying out a floppy disk, right? It's not that that's going to happen. Let's start with the 298 requests. If you're on a web browser, any of these, I assume that most of you are going to be on any of these. The numbers here, the 6 and 13, are the number of connections you can do
05:41
outgoing to one host simultaneously. Basically, if you're doing 198 requests or 290 requests or 500 requests or whatever, you can never go above six connections in Firefox and Chrome to one single domain. Every other request will just have to queue up and wait.
06:02
IE, they actually managed to get something right with IE. They gave us 13 connections. But if you do go ahead and actually put your stuff on different domains, you end up getting more connections. In Firefox you get 17, Chrome you get 10, and IE you get 17. We have to think about that as well when we're spreading things out.
06:21
Even though we're doing a whole heap of small requests, this feels really ridiculous because we don't care. They're like little files, but you have this limitation of the amount of files you can download at any single point in time. There's also one more thing I want to mention before I carry on. Does anybody know how TCP works?
06:40
Nobody's geeky enough to go and pull down the RFC for TCP and start reading it? Good, you all have lives. I didn't either. I googled it. I found a little info-graphics on Google Images and I assume that's true and it works like that because it's on the internet. What it basically does is that when you start a TCP connection somewhere, which is the communication we do over the web,
07:02
it sends a request for some data. Server sends a response back saying, here is the stuff that you need, but it only sends a tiny little chunk. Then you send an, okay, I got the chunk, that works fine. The server sends another chunk, slightly bigger this time.
07:20
Then your machine says, I got that chunk, can you send me another one? You go bigger and bigger and the chunks get larger and larger, the packets, until somewhere along the line, the network breaks down, it doesn't arrive, server doesn't get the okay back and it goes back and sends a smaller package again. The reason that that's interesting is that it actually takes a while from you doing the request until you're doing maximum speed.
07:44
Even if you've got the biggest, fattest fiber optic cable coming into your machine, you will still have that ramp-up effect in the beginning. If you start serving two or three or four hundred tiny little one kilobyte files, you will actually have the crappiest connection ever because you will only be doing the ramp-up stuff,
08:03
doing a really slow download, but if you get one bigger file, you do get better performance. Which is what brings me to this. You have to take those 298 files, actually, to be perfectly honest, most of those files are probably already a combination of other files, but you want to pack it all down to one large file
08:22
or a few larger files instead of doing a bunch of really small ones. If you go away from the 298 requests, we end up with 1.2 megabytes. Did anybody see the keynote with Troy? Troy told everyone that this is awesome, we had Doom on two disks, which were both 1.44 megabytes.
08:47
This is Super Mario Bros. In 1985, they built one of the most famous games in the world, everybody has played this, and it was 40K. 1.2 megabytes, 40K.
09:03
How many of you have lost more than 100 hours of your life to Super Mario? Yeah. You know what you get today when you go on the web? You get a stupid meme, which is funny for a little while, I do agree, and I probably offended somebody with it, and it's 163K.
09:22
Watching Jesus guy telling you that he knows a guy is four times as big as Super Mario. To be perfectly honest, I'd rather sit and play Super Mario than watch this image for more than five seconds. I started looking into minifications and things,
09:42
and we've all sort of gotten used to minifying things and making things smaller, and especially when it comes to CSS and JavaScript, right? And everybody loves Bootstrap. Anybody not loving Bootstrap? I'm not holding up my arm because I want you to do it, I'm just holding up because I hate it.
10:00
I take issue with Bootstrap, there are some things I really don't like about it. Mainly the fact that I'm pulling in a CSS package that by default without minification is 118 kilobytes. That's a ton of CSS that I probably won't use because I don't know Bootstrap well enough to do more than the simple things. But if you take the CSS and you minify it, you actually come down to 98.
10:23
Does anybody care about that difference? 20K? Not really. If you G-sip your file, you go from 98K down to 17. Anybody care about that? Does anybody sip your files?
10:41
Do you G-sip your resources, your JavaScript and your CSS? Yeah, the same two people who went, yeah, I care. The rest of you, you should care, okay? But I'm going to teach you. I will give my knowledge to you and you'll go back home and you'll start doing awesome things and you'll all tweet me and say, thank you, Chris, you've made my life better.
11:00
Not going to happen, but I can dream. So, coming back to the front-end build pipelines, you sort of wonder, am I going to do a whole talk about how you just use something to minify and bundle your JavaScript and CSS? For performance reasons?
11:21
Yeah, kind of, but not really. There is more stuff in there as well. Getting a front-end build pipeline is actually more than just getting bundling and minification. It's also about JavaScript sucking. A whole lot. Now I've offended someone, right? Yep, phew, I'll find a way to offend the rest of you at some point.
11:43
I tried with Jesus, I went with JavaScript, I'll find something else. I'll say something about PHP and we'll be done. So, does anybody know where this little screen comes from? Anybody here of a presentation called the what presentation from Destroy All Softwares?
12:01
For those of you who have never heard this and have no clue what I'm talking about, you will all, after this session, go and find the machine or come up to my machine. You'll spend three minutes watching a presentation that will tell you exactly why JavaScript is the most messed up thing you can find. This is just a sample. If you get an object in JavaScript and you add an array to it, you get the number zero back.
12:22
If you twist them around and you add the array to the object, you get an object back. That's just one of those, okay. JavaScript is really broken in a lot of places, according to me. And there were more people who thought so. So, they came up with transpilers or preprocessors to basically write JavaScript
12:41
but use something or a language that didn't suck as much. I'm not saying that it sucks, it has some weirdness. And they came up with things like CoffeeScript, TypeScript, Dart, ClosureScript, Haxi, has anyone ever tried Haxi?
13:00
Damn it, I'm still looking. I found that online when I googled it. I don't know what it is, but it's apparently preprocessed with JavaScript. I put it in there. It made it sort of a line better than having just two at the bottom. Most C-Sharp developers will come here and go, TypeScript is what I want to use, if you start looking at preprocessors. Because you're getting a language that looks a lot like JavaScript,
13:20
it looks a lot like C-Sharp, but it transpiles into JavaScript and you get JavaScript at the other end. The other languages tend to write like a completely different language and then transpile that, which means that it suits people who are not used to the curly braces C-Sharp kind of style, but they still get JavaScript. And then, when they felt that they'd fixed JavaScript
13:42
by adding another language that sucked in other ways, they decided that CSS was the next one to tackle. So, they came up with LESS and SAS and a few other preprocessors for that to make CSS better. Once you go down this route, you realize that there's more stuff that needs to be done. You can't just pull up TypeScript in your editor
14:01
and write some TypeScript and send it out to the web. It needs to be transpiled. You can't go and write LESS and then send it out to your web because it needs to be transpiled. So, you start feeling that you need help, right? I was out of the web development for about four years and did self-development, I'm sorry.
14:22
I came back and all of this was there and I started getting frustrated because there's so much to learn. It's actually not that hard. You pull up Node. The solution to JavaScript sucking is to get something that runs JavaScript for you. Node comes out and basically says, we're going to take a JavaScript engine, wrap it in an EXE file,
14:42
put it on your machine and let you run JavaScript on your machine to do things. And as you will be doing JavaScript stuff, you might need packages. We've got NuGet in .NET. We've got package managers in Linux and things like that. For Node, you use npm.
15:01
npm is awesome. You just go npm install whatever package you want. It takes a lot of time and then afterwards it goes done and something is on your machine and you can start using it. You can either do just npm install and then your package like npm install gulp, npm install grunt, or you can go ahead and say npm init first
15:21
and go through a little wizard and it will give you a package.json file that keeps track of all the dependencies you've got so you don't have to check in your node modules into your source control. Instead, you just go npm install your package and then dash dash save dash dev and it will basically set up a reference saying that I need gulp to run,
15:43
I need this thing to run, I need that thing to run, but you don't check it into source control because you generally end up with 100 megs of node modules for even a small project. Instead, you just download your source code from the source control and you do npm install. It looks at that package.json file and installs all your dependencies
16:00
and the best thing is that it takes about an hour to do on a big project so you can go and have coffee. Or whatever you drink. I don't drink coffee. Then they went, package managers are awesome, right? Everybody needs a package manager. Yes, this is something that a friend of mine, Peter, he's actually at the conference, showed me at one point
16:21
because I said something about package managers. It's actually kind of true because you don't use npm in most cases for things like front-end resources. If you want to get Bootstrap or you want to get Angular or you want to get jQuery or something like that, you generally use something called Bower, which is another package manager. Or you use JSPM.
16:43
You download node and you get npm, which is a package manager. Then you use npm to install the package manager and then you use that package manager to get the package that you need. That makes sense, right? Obviously. So what you do is you basically go and say npm install dash g in most cases
17:02
which means please install this npm module globally on my machine so it's available everywhere. And then you choose your package manager of choice. Say npm install dash g bower. And then you go into your project and you go bower init and you go through a wizard, you get another JSON file that's in this case called bower.json
17:22
which keeps track of all of your bower resources from your bower package manager. And then you do bower install angular dash dash save dash dev. And then when you get your solution down, you run bower install. And it restores all of your packages.
17:43
And then you've got all these packages but you actually need to do something with them. So you need to go ahead and get a task runner. There's a lot of things you need to get. And you'll see it takes a little while to get started but for your first project it's going to be interesting. For the rest of it, it's kind of obvious. So you run out and you Google task managers
18:01
and you get this awesome list of Wikipedia going you can install, and these are the names of the stuff you want to install or you can install. Brunch, Gulp, Grunt, Broccoli, Mimosa, and so on.
18:21
There is something wrong with our industry, right? I know that there's a general consensus that the hardest thing in software development is naming things. Getting a book, putting up a random page and pointing at a word and naming your project that is not a good solution. But this is what you got.
18:41
And to be fair, most people run Gulp or Grunt. I chose Gulp over Grunt because it just suits the way I build things better. Some people love Grunt, some people want to go with Broccoli. I do think the Angular 2 team is actually running Broccoli. I have no idea who's running Brunch, but it's out there. I've never heard of Mimosa, but once again I Google it
19:01
and Google told me that it's available. I might try it at some point. So make a choice. Always just make a choice. If it's wrong, you can change it. If it's right, you can go ahead with it. But the world is full of flat squirrels that couldn't choose what side of the road to go to. So just make a choice. Once you've got that, you go on npm install dash g Gulp.
19:23
And then that installs Gulp on your machine and then you can go into any command line and you can go Gulp and Gulp will tell you here is everything you can do. Then you go into your project and you do npm init, npm install gulp dash fsave dash dev. That installs Gulp locally in your project
19:41
because you need it both globally and locally. Then you create what's called a task runner configuration. And then finally you just go Gulp and you name what task you want it to do. And those tasks can be anything. Normally it's things like transpiling TypeScript and bundling and minification, but it can literally go ahead and do anything you feel like that you can do in a node project.
20:05
So after all that, I'm actually going to show you some stuff. And this is my goal. I want all of you to sit like that at the end of it. Have you seen the two people in the middle, the guy and the girl? They've got that awesome look like I am learning the secrets of the universe right now. If any of you look like that when I walk out, I'm happy.
20:22
If not, it's your own fault. So what I've got here is I've got a pre-built project that I'm going to show you. Actually I want to use those case. I thought, there it is. This is a very simple little project. It's a little website.
20:40
It's an MVC website. It's got one controller which looks like that. Actually, you need bigger fonts, right? Let's go ahead and change the font. It's got Hanselman, it's the best size.
21:00
Can everyone see that? There's one guy in the background, yes. I'm going to trust that. That's my controller. It doesn't do anything magical at all. And there is, what else have we got? We've got a views folder which has one single view that is awesome. I wanted to be an art director once upon a time
21:21
and that's what I came up with. And then there's a little TypeScript project. It's a tiny little application written in TypeScript that uses Angular. And there is less styles, some style sheets. Once again, my fantastic artistic integrity comes through. It changes the color of some stuff.
21:41
The actual application is pretty simple. I don't know if everybody knows Angular, but if you do, I love that the TypeScript editor doesn't actually follow the font changes if you do them in Visual Studio. You have to reboot to get the TypeScript editor to change font size. You'll just have to believe me. It's a simple controller. It has a greeting that says something.
22:00
In this case, it uses a greeting service to get the greeting. It uses some ECMAScript imports to get other modules that I need. The only thing that's actually quite interesting here is that, from a development point of view, is that I don't bootstrap Angular as you would normally do using data-ng-app in my HTML.
22:23
Instead, I'm actually bootstrapping it inside of a TypeScript file called app, which pulls out the document element and then bootstraps it manually for me. And I will tell you why in a little while. You can't use the auto bootstrap for the stuff that I'm doing. That's what I've got. If I go ahead and run this...
22:42
Control F5. There it is. Come on. There it is. Not that you see it, but it stopped the little spinning icon in the corner. It is serving it properly.
23:01
The first thing I want to do is probably turn off notifications. Let's do that. I think you can just go ahead and say quiet hours. This is the folder where I've got my project. I'm going to go in here. I'm going to write cmd to get my command line. I'm going to go ahead and say... I won't use bower because I need to get some stuff.
23:20
I need to get some bootstrap. I need to get some Angular stuff. Let's do bower. I can spell bower in it. This will initialize a bower JSON file for me. It takes a little while. It comes up with this wizard. I will teach you a trick how to fill out this wizard in the best way possible. You just go enter, enter, enter, enter,
23:41
and you keep smashing the enter key until you see that again. Then you do cls and you're done. What is in that bower JSON file? Glad you asked. We go in here and we show all files. We refresh this. Am I one level wrong now? I am, sorry.
24:01
I should have been somewhere else. I should have been in here. Let's try this again. Cmd, bower, you now get this in repeat. Bower in it. There it is. I now have a bower JSON file.
24:20
I'm just going to include that in my project. Bower.json looks like this. This is all the information that you just created using that wizard or hammering the enter key. You don't have to care. It makes no sense. Ignore it. Why did I show it? Just because it's there. You should know what it does.
24:40
Next, I'll do bower install and I'll install bootstrap, even though I'm not a massive fan. Dash dash save dash dev. If you don't add the dash dash save dash dev or dash dash save, it's not actually added to your bower JSON file. It just gets installed on your local machine and then whenever you check something into source control,
25:01
somebody else checks it out and all of a sudden there's resources missing. Once I got that going, you'll now see down here it says bootstrap. It says that I have a development dependency called bootstrap and if I refresh this thing out here, you'll see that there's a bower component. Inside bower components, I've got both bootstrap and jQuery because jQuery comes along for the ride because bootstrap needs jQuery.
25:24
Inside bootstrap, you get a bunch of folders. Inside the folder, you get this. Inside this, you get CSS. Inside CSS, you get all of these things. You get everything you need to use bootstrap and a whole bunch more. It's always nice to get more than you're working for. I'm going to go ahead and I'm going to go into my view, my index.html or cs.html.
25:43
I'm going to take my bootstrap file. Bootstrap, oh, I told you to always use minified stuff. I'm going to go and pull in bootstrap min CSS. I'm going to go and say Jumbotron. No, Jumbotron is not available in your VS. It's available in mine because I've created a snippet for it.
26:03
I created this little awesome, really cool bootstrap web page that now looks like that, like that, which is cool because I've now got the foundations to do a new startup.
26:20
That's all you need to do. Do a bootstrap site and you're done. Then you buy an IO domain and you're good. Once I've got that, I want to do angular because I did tell you that I want to do angular. I'm going to do bower install angular, like that. That runs off, gets angular, go back to Visual Studio. You see angular in your bower.json file, which is named.
26:43
Close that down. Go in here. I'm going to turn this into an angular application kind of ish. I'm going to say data-ng-controller equals myctl as ctrl because I've registered my controller as myctl in angular.
27:01
I'm going to switch out the information here and I'm going to say curly brace curly brace ctrl dot greeting. This is now an awesome angular site. We go back out here. It looks like that. We're obviously not getting any form of angular stuff.
27:20
That might be because, first of all, I haven't added angular to my page. I haven't added my application to my page. What I need to do is I need to get my JavaScript and I need to transpile my less into JavaScript so I can start using it. Sorry, transpile my JavaScript into JavaScript and then I need to transpile my less into CSS
27:41
so that I can actually show you my fantastic application. The first thing I need to do is I need to go and init npm. npm init will give me a package.json file that keeps track of everything. The problem here... Am I in the right one now? Yes, I am. The problem here is that you can't actually just smash the enter key
28:03
because it tells you that that doesn't work. What you need to do with npm init is you need to press X and then smash the keyboard. That's it. If there's anything you want to bring along from today's talk, X enter enter enter enter, that will give you something that looks like this.
28:22
I'm going to take that and include it in my project. Package.json. There it is. It looks a lot like Bower.json and you can ignore it. Once again, it doesn't matter if it's just there, it helps you. We'll do npm install and I want to do gulp. I've already done npm install gulp-g
28:41
so it's available on my machine. I'm just going to do a local install. I'm going to do save dev. That will now run off and get gulp, which will hopefully not take forever. I've turned off. If you get npm and you start running it, you'll get a little progress bar
29:00
that apparently has a bug in it so it takes about 20% longer to run it with the progress bar than without. Somebody told me, so I turned it off. There it is. I've now installed gulp, which in turn means that I've got a node modules folder now. If I refresh here and I zoom in.
29:20
Inside node modules, you'd expect to find gulp, but you don't. You actually find this massive list of other stuff, including gulp. Those are all the other dependencies that gulp needs to have to work as well. It gets everything you need. Nice, simple, nothing complicated. It adds gulp in here, so I'm going to close that down.
29:42
Now that I've got my task runner, I need to get some form of task that my task runner can do. What I want to do is I want to start off by transpiling less into CSS. You do that using a little gulp plug-in called gulp-less. While that runs in the background, I'm going to go in here and I'm going to right-click my project
30:04
and say add new item. That was the wrong keyboard combination. gulp configuration file. There's actually a template for a gulp configuration file
30:23
or a gulp file inside Visual Studio. It requires gulp. I want to use gulp. It uses gulp to create what's called a task. Something that should happen, something that I want to run, something that I want somebody to do for me. We can do complicated stuff in here. We can do console.log.
30:43
Hello world. Like that. Go back out here, gulp has finished installing. gulp-less has finished installing. I have a gulp file. The fact that it's called gulp-js, gulp-file-js means that gulp knows it's there automatically. I can just go ahead and write gulp.
31:00
Gulp will then go and say I'm starting here. I'm going to write out hello world and it's going to come back after a tiny amount of time. Nobody's impressed so far. I managed to get console written out to the console without actually doing console work. Don't blame me. Somebody's been to my other sessions.
31:22
Next, I want to do my less conversion. I'm going to go ahead and I'm going to pull in less saying that I required gulp-less. I want to use gulp-less. Create a new task called transpile colon less. You can name the task whatever you want. It's just a string. I just like naming it transpile colon less, transpile colon ts, transpile whatever,
31:42
so I know what it's actually doing. Inside my transpile less task, I use gulp.source to say, can you please go and get me all of the files that correspond to this pattern, which is called a glob pattern. It comes out of Unix. This basically says any file that has the less extension
32:02
that is in the styles folder or any subfolder. Basically, give me all less files. Then I pipe that. I send that result into the next thing, which happens to be less. Then I pipe the result of my less conversion to gulp's destination method
32:21
and say take whatever that has been generated out of the previous stuff and write that out to the folder called styles. Now that I've got that, I'm just going to save it. I can go out here and say gulp transpile colon less. There it is. Nothing happens. If we refresh this thing
32:41
and we look here, there's now a site.css. My awesome less has now turned into this. I should have a more complicated example next time. It's kind of cool though because I cannot take that CSS.
33:03
I can pull out my index file. I can take my CSS. I can insert that there. I can go back out here. I can press F5 and look at this. Awesomeness in action. It goes blue with white font. Just imagine what I could do if they gave me free reigns over the internet.
33:23
Not a whole lot. Which is what everyone else is doing as well. I'm not very different from that. Next thing. It still doesn't render my TypeScript stuff. It still doesn't render my Angular stuff. I'll go back here. I'll say npm install gulp dash.
33:40
Anybody want to guess what the plugin for transpiling TypeScript is called? Gulp TypeScript. It's very simple. There is a gulp tsc as well, but I think gulp TypeScript is the one that you're supposed to use now. I actually read that about an hour ago, so that might have changed. It's the world of JavaScript, right?
34:02
There it is. It installs that for me. I go back into my gulp file. I do transpile TS. Once again, I require the plugin that I need, gulp TypeScript. Then I create a new task. I name it transpile colon TS. Use the gulp source to go ahead
34:22
and pull out all TypeScript files out of the TypeScript directory and all subdirectories. I pipe that to the TypeScript plugin, passing along a configuration saying, can you please transpile it from TypeScript into ECMAScript 5? You can also tell it to transpile into ECMAScript 3, which is going to suck immensely. You can tell it to transpile into ECMAScript 6,
34:42
which is not going to work. Five sort of makes sense. I also tell it to use modules. Inside of my TypeScript stuff, you saw that I was doing ECMAScript 2015 imports and exports. When you do that in TypeScript, you need to tell TypeScript that all of those imports and exports
35:01
needs to be transformed into some form of module loading system that works in the browsers today, and I chose system. You can go ahead and do common JS and you can do AMD modules and whatever. I just chose system because, I don't know, it's the first thing in the enumeration of things I looked at, so I chose system.
35:22
Then I pipe the result of that to build. That's it. I go out here. Actually, does everyone love being in the command line writing stuff? Anybody not love that? Anybody not love it? Not feeling like I am part of matrix? You just want to transform this into being green and you're good.
35:41
It's like, awesome, I am in the matrix. No, it kind of sucks in some ways if you're used to not doing stuff like that. You're used to using a UI. Inside of Visual Studio 2015, there's a little tool called the Task Runner Explorer. It's also available in 2013 as an extension by Mads Mikkelsen. No, sorry, Mads Kristensen. The other guy is an actor, apparently.
36:02
You go refresh here. This thing comes in and says, oh, so you're using Gulp, and these are your tasks. I'll just take the transpiled TS, right-click it, do run. It starts up Gulp out here, transpiles it for me, and if I refresh everything in here, stop. You get a few modules in here.
36:23
Inside my, there it is, build, I now have an app.js, mycontroller.js, and they are all wrapping system.register and a bunch of things and transpile TypeScript into weird JavaScript stuff and things like that. My transpilation has worked pretty well. Problem now is that I don't really feel
36:43
like going and adding all of these JavaScript files into my web page, because every time I create a new TypeScript file, I'm going to have to go and add that JavaScript file to my view, and I end up having 650 little JavaScript imports, and then somebody goes to production and says, in production, you want to do bundled and minified, and all of a sudden, all of your JavaScript imports don't work.
37:03
What we want to do is we want to automate that process. Luckily, there is a tool out there that I can install, which is bower install system.js dash dash save dash dev. You want to install system.js, not system.js, two different projects. One is useless, and one is really, really good.
37:23
The other one might not be useless. I might have offended the creator of system.js, but this is the one you want, the one with the dot. Once I've got that, we can go into my bower components. I need to refresh that. I've got my system.js. There it is.
37:42
I go in here. I take the dist folder and the system.js, and I add it, and apparently you're supposed to add JavaScript at the end of your page, because that's better performance or something. I've got that in there. Once I've got that, I need to add configuration to tell system.js what it needs to do.
38:01
I'm going to do system.js config. I add this little JavaScript thing here, and I say system.config. I want you to pull out all the resources from the build folder, and whenever I'm referring to Angular,
38:21
can you please go into the bower components folder and get Angular out of there? I will fix this. You do not want to deploy the bower components folder to your server, so I'll fix that, but for now this works. I also tell it that whenever you load app.js, that file is actually dependent on services as well.
38:42
I've built this services, the iGradingService. That is in a separate module that will be downloaded separately. Then I tell it that Angular has a global format, and it exports something called Angular, which is fine. I tell system.js to add JS to the end of all my files, so basically it adds the .js extension.
39:02
The reason for that is that all of these transpiled things in here actually just refers to their modules as MyController, not MyController.js. I can tell system.js that when somebody's looking for MyController, they're actually looking for MyController.js. Then I say system.import app.js,
39:22
save this, go out here, press F5, hope that I've done all of the steps that I should. Why didn't that work? Oh, there it is. It works. Woo!
39:40
The cool thing here, I started doing this a while back, and it's actually quite nice, because I pulled up the network tab. As you can see here, inside my view, I'm only importing system.js and telling it to go and download app.js, but if we look in here, you'll actually see that it goes ahead and it pulls down the local host, it pulls down min.css, it pulls down site.css,
40:01
system.js, browser link you can ignore for now. Then it goes ahead and downloads app.js, figures out that that needs module.js, which needs MyController.js, and then I need Angular.js, and I need GritingService.js. I don't have to tell the system that I need all of these things. System.js figures it out for me. In a little while, you see that that's actually quite neat
40:22
when you start doing front-end build pipelines. The only thing I don't like about this is that I have to go down here and tell things to run, or I need to go to a command line every time I make a single change to a TypeScript file, which is not a great experience. If we go back into Gulp and we do Gulp watch, like that,
40:43
we get a new task, a Gulp task called watch. Watch uses the Gulp's built-in feature that can watch files. You basically say, Gulp.watch, and you give it a glob pattern of the files to watch, and you give it an array of other tasks that you want to run when any of those files change.
41:01
Whenever a less file changes, transpile less. Whenever a TypeScript file changes, transpile TypeScript. Also, I do watch and then I pass in an array up here. JavaScript is awesome in the way that you can just pass in pretty much what you feel like into a function and it works, or not. But this is an array of tasks that I want to run
41:21
when I start the watch task. When I start watch, I will run transpile less, transpile TypeScript, and then start watching my files. The cool thing here is I can go out here and I can start it, I can right-click it here and I can start it, or I can go and say I want to have a binding for it. I want you, Visual Studio, to start this task whenever I open the project.
41:45
That adds a little comment up here. Whenever this project is opened on somebody's machine, it will start watching files for you. Unfortunately, it won't start right now, so I'm just going to go ahead and start it for me. That now runs in the background. It just sits there, waits for files to change.
42:02
If I go back in here and show some of my elite CSS knowledge, I can go in and I can change the background color to hot pink. Why is that the first choice? I have no idea. You see down here, it does actually run transpile less
42:23
just because I saved the file. The awesomeness actually comes out of the fact that that's already hot pink. Go and change this. Black. Black and hot pink works really well together. Save it. Got runs. And it's black.
42:42
What we're getting here is browser link in Visual Studio will automatically set up a link between your browser and Visual Studio. Whenever Visual Studio sees that a change has been made to a file that you have been using, a CSS file, it will notify the browser that the CSS has changed and the browser will reload the CSS files and restyle your application.
43:02
If you're sitting around poking around at your less files and you save, you can just go back and it's changed everything in here for you. You might even be, if you're really, really fast, you can go control S, tab, no, not fast enough. Damn it. You need a bigger file for that, but you can actually see it rendered for you.
43:26
Next thing. Has anyone written TypeScript applications? Anybody love the fact that you have to go in and you need to debug your TypeScript application using the JavaScript files that are really weird and hard to read?
43:40
I hate that. I actually prefer going back into debugging into TypeScript. If you're using Visual Studio, that's actually quite easy. If you're transpiling using Gulp, it gets a little bit more complicated. What you need to do is you need to go ahead and get another Gulp plug-in called Gulp source maps, like that.
44:03
While that installs, I'm going to go in here and I'm going to change my transpile method, or transpile task, which is there, into transpile TS2. I'm requiring source maps. Then it's pretty much the same. I go and get my TypeScript files.
44:20
Then I tell source maps to initialize. I transpile, and then I tell source maps to write out my source maps with some default settings, like where is the TypeScript files located and things like that, and then I output it. If I run this now, run, refresh,
44:41
you'll see that I'm now getting both GreetingService.js and GreetingService.jsMap. Every single JavaScript file will have a corresponding JSMap file. JSMap files are awesome, because if I go back in here, I press F12, I go to sources, there's nothing in here, I press F5,
45:03
it loads the TypeScript folder for me. Down here. I can extend the TypeScript folder and I can see my TypeScript files. I can go to my app.ts. Actually, let's go to my MyController. You'll see TypeScript stuff out here. We put a breakpoint inside of my TypeScript,
45:22
refresh the page, and Chrome will break inside of my TypeScript. I can do all the things that I'm used to. I can go ahead and I can hover over things and I can get information about GreetingService.js. I can get that the greeting is now hello from service and everything. Source maps is quite neat. Using Visual Studio, you get them on the fly,
45:41
but they end up in the same folder as your TypeScript file. Whereas with this, I can put my source maps wherever I want and I can decide if I want to deploy them to the server or not. I can have them in some other location, but I do get my source maps, which makes it a lot easier to debug my TypeScript stuff. I've got transpiling, transpiling JavaScript or TypeScript to JavaScript.
46:04
So far, I haven't shown you any of the stuff I talked about before. I'm still doing 298 downloads with 1.2 megs. Let's look at bundling and minification. Normally, when you do bundling and minification, and you look online and try to see how everyone else is doing it,
46:20
they will do something similar to this. Go ahead, pull out all the JavaScript files, run them through a bundler and output the information. The problem is you get all of the JavaScript files and then you have to make sure they're in the right order. JavaScript depends on files being added in the right order for things to work. Which makes that a little bit complicated
46:41
and it has taken me so many hours to figure out over time. Instead, I'm going to install a little tool called SystemJS Builder. Like that. Another little node plugin. I'm just going to leave that, go in here. I'm going to create a new file.
47:02
I'm going to create a JavaScript file. Add new item, JavaScript file. I'm going to call it bundle config. Inside that, I'm going to do bundle config.
47:22
This is just running system.config, which is the same thing that we're doing inside of our web page. But it's a little bit different because I'm not telling it a whole lot of things because I don't need as much. It's not going to be loading from different locations and things. I'm just going to go in here and say, do not include Angular into my bundle. Ignore Angular, otherwise take everything else I'm telling you.
47:44
Go back into my gut file and then I do bundle module. I created this as a helper method. I require builder. I'm just going to put that at the top where it belongs. Then I use the builder, which is a node module.
48:01
I tell it that this is where all of my JavaScript files are. This is the base path. Here is my configuration for my bundling, which is that tiny little file that I just created. By the way, yes, just add default extension JavaScript or JS like I did before. That's fine. Then I use the builder and I tell it,
48:20
can you please bundle anything in this path and output it to this path? This here is just a little workaround to get it to add .js to the end of files and things like that because it skips that. I tell it whether or not to minify the file by passing in a minify boolean.
48:40
Then when it's done, I just outright bundle complete. It's not very complicated, right? Now that I've got that, I can go ahead and I can do bundle.js. New task called bundle.js first runs transpiled.js to get my JavaScript. Then it uses a bundle module and says, can you please bundle up app.js?
49:03
It will go to app.js, find all of the other files that is needed to run app.js and bundle it up all of it for me except for the Angular part. Can you please output it here to bundle slash bundle slash app dot bundle dot js? Then I tell it, can you go ahead and do the same thing
49:21
with my services module? I've broken the application into different little parts so I can load different modules at different times. I tell it to go ahead and get my services module and output that into a services bundle dot js. Once I've got that, I can go ahead and I can run bundle dot js.
49:41
I look at my file site here. You'll see that there is a bundle folder in which there are two files, services bundle dot js and app bundle dot js. Now that I've got that, I can go ahead and I can go out to my web page and I can change this out, I think.
50:04
System.js config 2. I've just broken it apart a little bit. It's the same thing but I've got a base URL as a variable instead telling it that I want you to go and get everything from build. Here is some mapping for my Angular stuff. Then I tell it to load app.js.
50:23
Save. That is exactly the same as I did before. So that doesn't make any difference. I just want to verify that it actually works. I want to go in here and look at the network. It is still loading all of my resources individually because I haven't made any changes. Go in here.
50:41
I replace this little part up here with system.js config 3. I change the base URL to bundle. I tell it that Angular is now actually located on a CDN. I don't want to load Angular locally. Go ahead, go to the CDN. That's much faster. App.js is located in app bundle js.
51:03
The services module thing is located in the services bundle. Save that. Go out here. Press F5. Wait for that to reload. All of a sudden if we look in here, it is now downloading system.js, app bundle js, services bundle js, and Angular, which it loads out of the CDN,
51:22
and all I need to do is switch a little config change and it's loading from two different places. Whoop, whoop. Nope, apparently not. Next thing, I need to make it smaller. I need to minify it. So minify.js basically does the same thing but it passes in true to tell system.js builder
51:43
that I want you to minify it for me as well. Once I've got that going, I can run it. Minify.js. Run. That will generate my minified resources for me. Go back out here, replace this with system.js config 4.
52:03
Switch out my configuration to go to the dist folder instead, which is where I've output my minified files. Keep pretty much the same thing I just did with Angular off the CDN. App.js is in the minified file. Services module is in the minified file.
52:20
I go out here, this was 374 kilobytes. I refresh it and we look down here. It is now loading the minified files and it's down to 171 kilobytes. Yep, that didn't work. But there's also not working here, right?
52:41
Whoops. Anybody know what's happening? If you minify Angular stuff, it breaks. Because dependency injection in Angular depends on variable names or parameter names to your constructor. If you start renaming your variables, which is what you do when you minify things, so your greeting service turns into A or B or something like that,
53:05
Angular can't figure out how to do the injection. Luckily, there's a little tool that we can install called... Actually, let's go up to... There it is. It's a Gulp plug-in called Gulp-ngAnnotate. It's using a project called ngAnnotate.
53:25
ngAnnotate. Did I spell that wrong? Oh, sorry. ng-annotate, obviously. Once I've got that, I can go back into my TypeScript stuff, my controller here. I can just go... I'm going to zoom in a little bit.
53:41
I'm going to add a slash slash at ngInject, like that. It's just a comment in my JavaScript. With that comment, I can then go in and I can change my transpile method. That's not in there, it's in here. Transpile, transpile, there it is.
54:01
Transpile TypeScript. There it is. With transpile TS3. I require ngAnnotate as well to be able to use ngAnnotate. I do the same thing. I pull out the sources from TypeScript folder, I do the source maps, but I call ngAnnotate here after I transpile it.
54:23
TypeScript will transpile into JavaScript and the comment at ngInject will still be there. ngAnnotate then goes into your generated JavaScript and finds all of the places where you're doing ngInject and it will replace and set up so that injection works even if it's minified
54:41
and then when you minify it, everything works. I hope. Let's try it. I'm going to run minify.js. I'm not a very religious person, but when I go on stage and I press F5, I kind of get religious. It works!
55:01
You need to add all of these little modules or little GULP plugins to get it to work, but it's actually not that complicated. The only problem is that you're seeing me doing what you would normally do over a couple of days, doing different parts. You'll do a little bit of this, a little bit of that, and I show you everything in half an hour. It looks like you're doing more GULP than you're doing anything else. Once this is set up, you're done.
55:21
You can often just copy your GULP files from different projects and make modifications to them when you start a new one instead of starting from scratch. The last thing I want to do is I want to show one thing that I've learned along the way, which is quite neat. If I go in here, we look at all of this configuration stuff I've got in here. It's still pretty hard-coded.
55:41
What I want to do is I want to go ahead and I want to replace this. Actually, I want to replace all of this, I think, with this. I've got the same code, more or less, but I'm looking at http.context.current.is debugging enabled.
56:02
This looks at whether or not the debugging flag is set inside of your ASP.NET project, and it looks at the flag that is in here, that flag. When you compile or deploy in release mode, that is changed to false, optimizing a bunch of code, but it's easy to read that flag out here and say,
56:23
whenever you're in debug mode, aka you're on your local machine, use this configuration. Use everything locally, don't use the bundles, don't use the minified stuff. Just use the individual files because that's faster and easier to work with while building and creating stuff.
56:41
But if you're in production mode and you're not in debug mode, then I want you to go ahead and use the dist folder instead and use all the minified stuff. Then we can add more layers on top of this with more parameters where we're looking at being able to configure what files to use, not just by looking at the debug flag but a bunch of other things.
57:01
The projects I've been on, we've added a bunch of different flags so we can get bundled versions, minified versions, we can get individual files, and that way we can check if something is going wrong and we can switch things out really quickly. So running this now, I should be back and running the individual files.
57:22
Yep. And if I go back into Visual Studio and I change my flag in here, just faking that I have deployed this to production, I run this and it loads the minified files and it loads
57:40
Angular off of the CDN. So that wasn't what I wanted. I wanted this. So how many of you are feeling confused right now? Oh, I've really hit a home run on that one. Okay.
58:01
Anybody feeling that you want to go home and play with this and try it out? Awesome. And then you go home and you start Googling it and you'll see a gazillion people online telling you that I'm wrong. Well, not me personally in most cases, but the fact that I'm doing it like this. Because there are a gazillion other ways of doing this. You can do it using webpack and browserify
58:21
and you can do it without Gulp and you can use NPM scripts and blah, blah, blah, blah, blah. This is what I'm doing. This works for the produce I've been on and I keep using it like this. But you will see a bunch of other opinions. But if you get started with it like this, you can then evolve into a hipster developer.
58:42
So a couple of things with Gulp. I showed you really simple Gulp tasks and I made sure that I just added references saying before you run this task, run this other task. And also one thing a lot of people miss when they do Gulp things. Every single one of my Gulp tasks
59:00
actually has a return statement. It returns whatever is being output by Gulp. The reason for that is that it's asynchronous. So if you start running Gulp source and do this and then on the next line go Gulp source and do this, those things are actually going to run in parallel. So the only way to get things to run concurrently, or sorry, linearly,
59:23
is by either saying that this task depends on this other task that depends on this other task, which is what I'm doing, or you need to pull in a project like merge stream where you can work with streams and say I've got this thing here and that thing here and that thing here. Just merge them all in and tell me when you're done.
59:40
That gets a little bit complicated, but it's worth mentioning. Gulp tap. Awesome little Gulp plugin or Gulp node module that you can use to plug into your Gulp pipeline because Gulp is kind of secret. You tell it source, here is a blob pattern, go ahead and do things and...
01:00:00
Then at the other end something comes out, and if it doesn't come out like you expect it to, once in a while you get, why is not that file not included? Why is my bundle all of a sudden not including all of my JavaScripts in that folder or whatever? Gulp tap lets you go into your Gulp flow and do console writes. So you can go and console line every single file and say, I am now using these files.
01:00:23
And then you can look at different points in your flow to figure out what files are actually being worked on in Gulp at the moment. Other things, I am out of time, but give me one more minute. Dependency injection and minification with Angular, ngAnnotate. You cannot minify Angular stuff automatically, it will fail.
01:00:42
Ordering files, if you do what I did with the module loader with system.js, much easier than trying to manually order all of your JavaScript files, because I can promise you, you will f up. If you have a project bigger than your little tiny demo thing, you will f up the order of your files. Visual Studio will transpile TypeScript for you automatically.
01:01:02
It does it differently than TypeScript compiler, than TSC, like what I am using. So if you are using the built-in stuff in Visual Studio, it is not necessarily true that it will build in a Gulp script as well, for different reasons. You need to get this pipeline also running during your CI and your CD, so basically
01:01:22
on your build server. This is running locally, but I told you to not check in Node modules and Bower modules. Do not check in the generated stuff from your Gulp files either. You check in your Gulp file, and then you run all of that on your build server. If you want to know how to do that, I have got a couple of blog posts on how to
01:01:41
do it with TFS and how to do it with Git integration into Azure. The TFS one is also about Azure, but it works the same if you go to a local machine. Cache busting, you might want to add a little query string parameter to all of the JavaScripts to not end up in the cache. Jesus, there is a lot in here.
01:02:01
Last thing I want to mention that is actually quite important, configurable resource prefix. I tend to add, like you see the script source and then prefix in brackets, I generally add in a variable there in my MVC file, in my CSHTML file, that I pull out of the web config file or somewhere else.
01:02:22
Normally that variable is nothing. It is empty and it goes slash script slash app.js, or I can add a tilde. But if I want to go and switch over to CDN or load it from some other domain, I can just go ahead and change that prefix and all of a sudden all of my resources are loaded from another domain or a CDN, which makes it very, very easy.
01:02:44
And if you're doing system JS, you want to do the base URL and then basically say prefix slash and it can load stuff of different places. So in production, you can easily just go in and switch a little flag and you can get it to load locally if your CDN is down, which kind of happens unfortunately once in a while.
01:03:02
That was it. Thank you all for listening. I hope you got something out of it. If you have any questions, I'll be here, up here, packing up my stuff so you can come ask questions. And I'll be done there for pretty much the rest of the day. Thank you all.