.Net Foundation Code Conversations, 6 Jul 2017

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Compiling LESS in Visual Studio with Mads Kristensen

Description

Mads Kristensen shows off LessCompiler, an open source Visual Studio extension he built that makes it easy to compile LESS to CSS. He shows off some cool tips in the Visual Studio extension code that optimally loads and shells out to Node and npm packages.

Code for this episode is here: https://github.com/madskristensen/lesscompiler

A

Hi welcome to code conversations we're talking, Mads Christensen. What are you going to show us today? Man well.

B

I was thinking of showing a Visual Studio extension for compiling less files into CSS great yep. So let's take a look. Alright.

A

B

This is an extension called something as fancy as less compiler, and it does exactly that. It compiled less files into CSS, so here I have a project that has two less files and the first thing that you'll notice, when you open a less file when you have this extension installed, is this little thing that shows up down in the corner of your editor?

B

And it tells you whether or not the less compiler is on, because the cool thing is that by default, the less compiler is off and you have to when you're going to list file. You have to say hey in this project, I want the compiler to compile my list box, because you know it could be that you had another extension for compiling less files for certain projects or you. Maybe you used alt for grunt or whether.

A

I go to your build.

B

So we can't just be on all the time, but it's really as simple as just enabling it by clicking this very little adornment down here in the corner. So when it's enabled and I save a list file, it will produce a CSS file and a mint file right here. So this is the way I see.

B

This is that it's in between two other extensions that in the past have been doing less compilation and some people, like the one of the extensions and some people like the other and I'm talking about web essentials as being one of them, which automatic empowers less files. You don't have to do any setup just like right here, except that you just turn it on for the individual project right. Okay,.

A

B

Then you get the same behavior other people like one called web compiler, which gives you a compiler configuration file at the root of your project. Here you don't need that. Instead, you see these comments that are up here in the top of my screen. I, don't have to have these comments if I don't have a comment like this I just get the default, which is probably what most people will do, but I can actually control the less compiler.

B

And so, as we look in the code here in a second, is it's actually the node module, the official less compiler. Note module, that's being run here, so it's the exact same attributes or parameters. We can give the compiler as if we ran it on the command line, as we can do in here.

B

So that's very, very cool. We can even say that hey, don't compile this particular file by giving it an O, compile comment like this and a lot of other things, and it's all documented on the let's compile of github repository here we see you can see all the different flags, all the different things you can do. Ok,.

A

So this is a visual studio extension. You publish this code out on github. Other people can look at this both to see how this specific one works, but also they could write their own extension. They could learn from what you're.

B

Doing in there, especially the part where the first thing I'm going to show here, let's actually look at the code, and so there's a part here, that's I think is kind of interesting, and that is how do you run no js' inside a visuals to do extension without the user noticing, basically right making a sort of a natural part of it?

B

And so, if we take a look at the extension project, we can see that we have a less compiler package file and in this case it contains two different classes, contains a list compiler package and an NPM installer package. Ok, the NPM install a package loads automatically. So that's what this line here says it says, provide auto load for when there's no solution. Ok, so basically, what that means is whether or not there is a solution open, always load.

B

This extension now, that's usually a bad idea, but in this case it's actually not because we're using an async package and we're telling it to load in the background. So that means it's completely ASIC right and and running from it on a different thread.

B

So there's no issues with startup performance or anything like that, and what it does is that it calls into a node process, client that I have, and if we go take a look at that we ask it is ready to execute so basically what it does is that it figures out how to what packages to install NPM packages to install and then whether or not they succeeded in stalling or not. So it looks for the existence of an executable, and that is the less compiler CMD file right here.

B

So that's a node module, that's being installed into the temp directory, so you know the user doesn't have to care about any others. So if this returns and says hey, there is no.

B

If you know this, if it's not ready to execute meaning, hey I couldn't find the executable. That means that node modules have not been installed yet then it calls and oppresses process and say: hey, okay, make sure to install everything, and so it goes in creates directories and it calls NPM on the packages here. So it is so less and autoprefixer and CSS comb NPM modules. So it does all this synchronously by shelling out to no js' behind the scene.

B

You don't have to have no chance installing Visual Studio to do this trick because there's a studio ships with it already, and so that's what happens in here. We basically go.

A

You're not having to wire up all the stuff of hosting node. It's like.

B

It's already shipped with it. Alright, my extension doesn't have to ship node XE yeah.

A

B

Is really nice, it makes things a lot easier. All I do is like I tell the shell command where node exists inside the Visual Studio install directory and I. Do that in this little method, right here cool. So that's very nice. So you know first time you install this extension, an open, visual studio. It will install the node module so now you're ready to go alright, and it does all that in the background.

B

A

Yeah I think that's pretty cool. Can you show us that repository one more time? Oh sure,.

B

A

Ok, so people can go and get this out on your repository and we'll have a link to that in the show notes as well yeah, so awesome all right. Well, thanks a bunch.