Gulp Build

Updated February 17, 2023

Introduction to Gulp Build

The following article provides an outline for Gulp Build. We know that gulp automates the website task per the developer’s requirement, such as preprocessing CSS code, minifying JavaScript, and reading. Typically Gulp is an open-source community tool; for the implementation of Gulp, we need another tool or application called npm. The npm is nothing, but Node Package Manager is used to download and configure the Gulp as per our requirement; sometimes, we have many repetitive tasks from the client-side at that time; we can use gulp to automate the tasks and reduce the working load. In Gulp, the task is a code base, requiring different plugins so the developer can modify the source and file into the production files.

Upgrading your site resources and testing your plan across various programs is not the best time for some portion of the plan interaction. Fortunately, it comprises monotonous errands that can be computerized with the suitable instruments to work on your proficiency. Swallow is a form framework that can further develop how you foster sites via computerizing normal errands, for example, arranging preprocessed CSS, minifying JavaScript, and reloading the program.

The gulp.js is a form framework, implying that you can utilize it to computerize normal undertakings to improve a site. It’s based on Node.js, and the Gulp source and your Gulp record, where you characterize assignments, are written in JavaScript (or something like CoffeeScript, in the event you so decide). This makes it awesome assuming you’re a front-end designer: You can compose undertakings to build up your JavaScript and CSS, parse your formats, and order your Less when the document has changed (and these are only a couple of models), and in a language that you’re most likely currently acquainted with.

How to Build Gulp?

Let’s see how we can build gulp as follows:

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 the Node.js; now, we need to install the gulp by 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.

Output:

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:

Code:

npm install --save-dev gulp-build

Using Gulp Build

Now let’s see how we can use gulp build as follows:

First, create a task to minify the JavaScript file; first, we need to create a .js file and run it with the help of the gulp command.

So here we created gulpfile.js and added the following code as follows:

Code:

var build = require('gulp-build');
gulp.task('Samplebuild', function() {
gulp.src('Gulp/Demo/scripts/*.js')
.pipe(build({ ID: '0011' }))
.pipe(gulp.dest('dist'))
});
var gulpf = required(‘gulp’);
var uglifyf = require (‘gulp-uglify’);
gulp.task(‘sample’, function(){
gulp.src(‘Gulp/Demo/gulpfile.js’)
.pipe(uglify())
.pipe(gulp.dest(build))
});

Explanation:

• If we don’t have to uglify, we need to install it with the help of the below command.

Code:

npm install -save-dev gulp-uglify

Now everything is ok, run the file and see the output. Here first created gulpfile.js and added uglify modules to minify the JavaScript.

Examples of Gulp Build

Different examples are mentioned below:

Example #1

We usually know that gulp writes all tasks in a JavaScript file called gulfile.js, so first, create that file and write the following code.

Code:

var gulpfile = require('gulp'), htmlcleanfile = require('gulp-htmlclean');
var f = {
src: 'src/',
build: 'build/'
};
gulp.task('html', function() {
var o = folders.build + 'html/';
return gulp.src(folder.src + 'html/**/*')
.pipe(htmlclean())
.pipe(gulp.dest(o));
});

Output:

Example #2

Streams.

A stream is used to send the data with the help of several small functions, which means we send data from one function to the following function.

Code:

gulp.task('sampledemo', function () {
return gulp.src('Gulp/Demo/*.js')
.pipe(hint())sample
.pipe(sampehint.reporter('default'))
.pipe(uglify())
.pipe(concat('sample.js'))
.pipe(gulp.dest('build'));
});

Explanation:

• In the above example, we try to create a sample demo task as shown; here, we try to concat the .js file into a single file and store the result in the destination folder.
• The end result of the above implementation is shown in the below screenshot.

Output:

We use two different css files from the source folder, and we need to combine that files by using concat().

After creating a new file and giving it a name per our requirement with the .js extension.

Code:

var gulpc = require('gulp');
var concat = require('gulp-concat');
gulp.task('concatf', [], function() {
console.log("concat all css file and placed inside the style folder");
gulp.src("https://cdn.educba.com/Gulpdemo/styles/**.css")
.pipe(concat('final.css'))
.pipe(gulp.dest('dest/styles'));
});

Explanation:

• In the above code, we can see a couple of changes we made. First, we decided to name this concat. Depending on the developer, we could call it anything we need; however, concat conveys how the module treats those perusing our fabricated script. In the following steps, we added another task In the middle between the src and the pipe (gulp.dest) steps, as well as added pipe (concat(…)).
• Gulp works by streaming documents from one cycle to the next. This permits us to make complex form errands out of little, straightforward advances. Now run the gulp as shown below screenshot with the result of concat as follows.

Output:

Conclusion

From this article, we know basic things about the Gulp build, and we also saw the integration of the Gulp build and how we use it in the Gulp build.

Recommended Articles

This is a guide to Gulp Build. Here we discuss the introduction and how to build a gulp. 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