Gulp less

Updated February 17, 2023

Introduction to Gulp less

A gulp is a development tool that helps us manage project development workflow. Sometimes we need to handle it, or we can say we need to automate the workflow, which is very time-consuming. Now day’s, customers require some modern design, or we can say that modern bootstrap design, so gulp provides a flexible way to transfer the CSS to less as a consideration of the CSS precompiler and build the whole structure of the project. Gulp build is a fundamental step; it just compiles fewer files into the CSS files per requirements.

What is Gulp less?

In PCs, we can say a pre-processor implies a program that takes info and produces a result that can be utilized to contribute to another program. Additionally, less is a CSS pre-processor that diminishes the CSS improvement time. Therefore, less CSS transformation is one of the significant advancement actions. Gulp gives the ‘gulp less’ module to this interaction. Recently, we began to port a client site from an old CSS style to a more present-day bootstrap style.

We changed from plain CSS to less (as a CSS precompiler) to be more adaptable and computerized the form with a snort. The form was extremely fundamental and just ordered the fewer documents into CSS records; we didn’t utilize sourcemaps or minification despite everything; the complete form takes ~11s, and the watch task is around 4s. This is quite a while if you need to change a few styles. One more issue being developed is that without sourcemaps for your CSS/less-records, you generally need to look for the right less document, and we got a ton of them.

Now let’s see different options as follows:

• First, change the form framework to gulp since we have to arrange less.
• Second, add sourcemaps for less at improvement time to see the right less record in your program dev-apparatuses.
• Third, accelerate the form by utilizing storing in a gulp.

Speed Up

Typically gulp provides the speed-up feature; by using this feature, we can save time, so for that purpose, we need to add the following plugins as follows.

gulp-cached
gulp-remember

We presently have a clean less form with sourcemaps for advancement purposes. It fills in as quickly as snort with the in addition to sourcemaps, so we save time at advancement. Furthermore, the form is straightforward and viable, perhaps because it’s just for one reason. The most significant issue we see is the storing issue with fewer @import articulations; an answer could be: Assemble all fewer documents inside the gulp task, then, at that point, concat them to one CSS record and add the sourcemaps.

How to Install Gulp less?

First, we need to confirm all setup and installation of gulp with the help of the following command.

Code:

node -v

Explanation:

• Using the above command, we can see the installed version of Node.js; after execution, we can see the result in the following command.

Output:

In the command line prompt, enter the accompanying order to show the variant of npm (Node.js bundle chief), which is utilized to introduce modules. It will show the introduced Node.js form with the help of the below command.

Code:

npm -v

Explanation:

• After executing the above command, we can see the currently installed version of npm on our machine, as shown in the screenshot below.

Output:

We successfully installed Node.js; now, we need to install the gulp using the below command.

Code:

npm install gulp -g

Explanation:

• In the above command, we use g for a flag that ensures gulp is globally available for all projects. After entering the above command, we get the following screen, as shown in the below screenshot.

To verify gulp, we need to run the below command as follows.

Code:

gulp –v

Explanation:

• After executing the above command, we get the currently installed version of a gulp, as shown in the screenshot below.

Output:

Now we can install it with the help of the below command.

Code:

npm install gulp-less

File

Let’s see how we can use fewer files as follows:

Code:

var lessf = require('gulp-less');
var pathf = require('path');
gulp.task('sampleless', function () {
  return gulp.src('Gulp/Demo./less/**/*.less')
   .pipe(less({
     paths: [ path.join(__name of directory, 'less', 'includes') ]
   }))
   .pipe(gulp.dest('Gulp/Demo./public/css'));
});

Explanation:

• The filename choice isn’t required; this module deals with it. The pack choice isn’t upheld – – if you attempt to minify your CSS, utilize a CSS minifier. No sourceMap choices are upheld – – assuming that you are attempting to produce sourcemaps, use swallow sourcemaps.

Let’s see how we can use plugins to implement the less as follows:

Less support the plugins, which can provide some additional functionality to the developer as follows:

Code:

var LessAutop = require('less-plugin-autoprefix');
var autopfix = new LessAutoprefix({ browsers: ['versions'] });
return gulp.src('Gulp/Demo/./less/**/*.less')
  .pipe(less({
 plugins: [autopfix]
}))
.pipe(gulp.dest('Gulp/Demo./public/css'));

It also provides the functionality to generate the sourcemaps for our specified file, so for that purpose, we need to initialize the gulp sourcemaps inside the js file.

Example of Gulp less

Different examples are mentioned below:

Code:

gulp.task('sampleless', ['clean'], function () {
  return gulp.src('Gulp/Demo/src/admin/ABC.less')
   .pipe(plumber({ errorHandler: error message }))
   .pipe(less())
   .pipe(concat('boot.css'))
   .pipe(autoprefixer({
   browsers: ['last 3 versions'],
   cascade: false
  }))
  .pipe(gulp.dest('Gulp/Demo/admin/'));
});

Explanation:

• In the above example, we try to implement the less concept; here, we ABC.less file, and we need to concat with boot.css; here, we use less function to concat both files, which will support the last three versions of the browser as shown in the above code.
• The result of the above implementation is shown in the below screenshot.

Output:

Conclusion

With the above article’s help, we saw less about the Gulp. From this article, we learned basic things about it, and we also saw the integration of Gulp less and how we use it in Gulp less.

Recommended Articles

This is a guide to Gulp less. Here we discuss the introduction and how to install gulp less with files and examples for better understanding. You may also have a look at the following articles to learn more –

1. JavaScript onresize
2. JavaScript onload
3. JavaScript String to Boolean
4. Javascript String to Lowercase