Name: Precompiling Your LESS Files with Gulp
Uploaded: 2015-11-23T09:27:40-06:00
Description: We will look at precompiling your LESS files using Gulp, Gulp-Concat, and Gulp-Less

We will look at precompiling your LESS files using Gulp, Gulp-Concat, and Gulp-Less

https://app.egghead.io/api/v1/lessons/javascript-precompiling-your-less-files-with-gulp/subtitles

Precompiling Your LESS Files with Gulp

[00:00] Let's go over pre-compiling your LESS files into CSS for use in your application. First thing that we're going to need to do is install Gulp, Gulp-concat, and Gulp-less. We can run that all in a single npm install command. I've already set up a couple of LESS files underneath our Styles folder called global less and header less that we'll be pre-compiling into the CSS during this tutorial.

[00:23] First thing we need to do is require Gulp. We'll go ahead and create a Gulp variable, set that equal to require Gulp, and make our first default task. For this task, we'll return a console log of Hello World.

[00:35] Next, if we move over to our terminal and run the Gulp command, it will find that default task, run it, and we'll see that it spits out the Hello World text that we returned in the console log.

[00:45] Next step is we need to concatenate these LESS files into a single file so that we can include one file on an application instead of multiple. To do that, we'll include the Gulp-concat and we'll include Gulp-less as well while we're at it.

[00:59] Let's make a separate task. This task we'll call LESS. The first thing that we need to do for this task is specify the source. We're going to reference the LESS files that we have inside of our Styles folder. Using the globbing pattern of *.less, we'll go ahead and grab all LESS files that are found within the Styles folder.

[01:15] Next thing that we're going to do is pipe that into the concat method and specify what we want our concatenated file to be called. We'll go ahead and call this Master.css.

[01:25] Lastly, we're going to pipe that into our Gulp.dest for destination. We'll go ahead and create a new folder called Dist, and within there, a folder called Styles where our Master.css file will live.

[01:36] Let's change that Gulp default task instead of spinning out of console log to go ahead and call another task, which in this case will be LESS, the one that we made. If we run the Gulp command again, we'll see that the LESS task was ran. Now, we have a new file, Master.css, in our Styles folder. We can see that that is a combination of both of the LESS files.

[01:57] Now, to talk about pre-compiling that LESS in the CSS. Let's add some LESS-specific syntax into our LESS files so that we can see how we need to turn that into actual CSS which our browser can read. If we take our new LESS file and we run our Gulp command again, we'll see that it gets concatenated into one file, but our LESS is still represented as such in the CSS instead of being converted into CSS that the browser can read.

[02:21] What we'll go ahead and do is pipe that concatenated file into our LESS method and run the Gulp command again. Now, we see that when we run Gulp, that LESS syntax was changed into CSS syntax. Now, our Master.css file is ready to be included in our application. Those are the basics of pre-compiling your LESS files into CSS.

Precompiling Your LESS Files with Gulp

Share this video with your friends