In recent times different tools and workflows have emerged to make the front-end development process easier and better. I call one of such tools a build tool. In this tutorial, we will explore what build tools are, how to use them and some of their benefits etc. We’d look at NPM scripts, grunt, gulp and also webpack. We will also talk about how to choose between which build tool to use based on your project needs.
Most build tools are built on top of NODE and NPM. In this tutorial, basic knowledge of NPM is assumed, however having no knowledge or experience with NPM you can still go through the tutorial as we will also do an introduction to NPM. It requires a basic knowledge of HTML, CSS, and JavaScript.
NPM (Node package manager) is a Javascript package manager that comes pre-installed with Node.js even though no Node.js skills are needed to use it. NPM'S primary function is to run a small easy, simple task like browser-synching, loading in libraries and style sheets dynamically from your package.json file. NPM installs a node_modules folder which then lets you run even more commands from the various installed packages. Any native CLI task can be done within the script using the right objects. Let's see examples:
By default NPM comes pre-installed with NODE. So you need not install it differently. To use npm scripts all you have to do is initialize it.
Create a new folder called npm_test then initialize NPM to create a package.json file. In your terminal type: npm init then follow the prompt. Once that is done you should now see a package.json file inside your projects folder. The file should look like this:
https://gist.github.com/502e8570a86a4f970d696cda448268f5
As you see in index.js is defined as the main script otherwise known as the entry point to our application. We need to create that file and also tell NPM how to start our app.
Create a blank file called index.js then update the scripts object in your package.json file to look like this:
https://gist.github.com/bf85bed18de2d14ea6e9e8ee70995345
This tells node that whenever we type the command npm start in the terminal, it should start up the index.js file.
Inside your index.js file let's put a simple log message. Add the following code:
https://gist.github.com/119b6a5e3ae843ab9663af720e2e7c8a
Now in your terminal type npm start and you should see the following output.
https://gist.github.com/8937a91488f6f2e46ba54e41b5af3107
Now although this example isn't very robust. Later on, when we talk about other build tools we will see how we can use npm scripts to perform other useful commands like installing dependencies, testing, etc.
Yarn (Yarn Package Manager) is also a JavaScript package manager created by Facebook. Over time it's been regarded as a faster & most reliable alternative to NPM because they have similar syntax and functionality. Yarn also installs packages from the NPM Registry so any NPM Package can also be installed with Yarn. Yarn has a different philosophy for managing packages. Let's see some of them.
Yarn and NPM perform basically the same functions. Though they are similar in functions, they both have a different syntax. To find out how to install and use yarn follow the instructions on this page.
WHICH TO USE: NPM or Yarn?
Many have argued and tests have proven that Yarn is faster than npm, however, a great majority still use npm and most of the build tools we will talk about support npm by default. However, choosing a tool to use is mainly a function of the developers and project needs. Always be sure to pick a tool that best fits your projects needs.
Grunt is a JavaScript task runner built on top of Node.Js and NPM. Its primary function is to optimize and help you reduce all repetitive tasks in your project like loading in JavaScript resources, style sheets, linting and debugging. Since GRUNT is built on top of NPM it is initialized with a package.json file but the tasks are defined in a Grunt.js file.
N/B: **'G'** in **Grunt.js** must be capitalized. Let's see how to use it to enhance our development:
To use grunt we first need to install it. In your terminal type: npm install -g grunt. This will install grunt globally on your machine. Next, create a folder called grunt_test and initialize a package.json file.
In your terminal type: npm init and follow the prompt to create the file. Now your package.json file should look like this:
https://gist.github.com/e5e3a92de2bf337b69fcfca4fd2510ea
Next, we need to install Grunt as a dependency. In your terminal type: npm install --save grunt. That command will install grunt as a dependency and your package.json file will now look like this:
https://gist.github.com/02758b62428dbc912d52afffdc4c5921
Now that grunt is installed, let's use it.
Create an empty gruntfile.js file. For us to use this file we need to set a goal, let's assume we have several files with codes in it and we want to compile them into one. For that, we need to use a plugin (plugins are pieces of code that add extra functionality to a tool). To achieve our goal, we will use a plugin called grunt-contrib-concat. To install the plugin type this in your terminal:
https://gist.github.com/32f0d80d5cd2fef386ab1ff0028da6ec
Now let's put it in action. Create a folder called js, then create two files main1.js and main2.js and add this code:
https://gist.github.com/3d913eb1621f974e3eb5fe77ed816cfb
Do the same for main2.js . Now in your gruntfile.js file add the following lines of code to it:
https://gist.github.com/6e2df5b9d1a63e927625231c04b89558
This task is instructing grunt to copy the files from main1.js and main2.js to a folder/file called dist/built.js. Though this file is not already created grunt will automatically create it for us. In your terminal type: grunt concat
https://gist.github.com/bb4b12a821caaa1ec7d2c8bafb364a84
Now you will see a new folder has been created dist/built.js and it will contain this:
https://gist.github.com/329767bbcd8b587b58a6a1a033e6c9e0
This shows it added the contents of the two files together. This is powerful when you have a lot of JavaScript styles it will help optimize your website by compiling all the code into just one file. They are a lot of other functions and uses of grunt, you can find them here.
Gulp.js is yet another JavaScript task runner built on top of Node.Js and NPM. Its primary function is to help you reduce all repetitive tasks in your project and also save time-consuming tasks. Gulp is a front-end build system, so it doesn’t matter what front-end technology is used (VUE, REACT OR ANGULAR) it still works and performs optimally. It is also managed with a package.json file and has built-in support for various plugins that help in performing various tasks.
Gulp is built on top of node strings and processes data in the form of pipelines. Create a folder called gulp_test and initialize a package.json file. In your terminal type: npm init and follow the prompt to initialize the file. Your package.json will now look like this:
https://gist.github.com/05f14ff2bc773181d56d831eac5ee3c2
To use gulp, we must install it as a project dependency. In your terminal type:
npm install --save-dev gulp. This will save it as a project dependency and your package.json file will now look like this:
https://gist.github.com/4edb003394f660fe370aa847d66ce868
To create tasks we have to create a file called gulpfile.js and add code to it. Gulp has 4 top-level functions:
- gulp.task - sets a task for gulp to run
- gulp.src - tells gulp the file to use
- gulp.dest - tells gulp where to output the files
- gulp.watch - tells gulp to watch for updates
Let’s create dummy HTML for use. create a src folder and add the two files to it. index.html and test.html then add the following code to it:
https://gist.github.com/4b1b31830b8dc936606e2359defc2e07
Let's set some tasks. In your gulp.js file add the following lines of code:
https://gist.github.com/698df9d32a25010c7d6df3d5936aa518
This command tells gulp to copy all the files from the src directory to a build directory. We created a function compileHtml, and that is what we will refer to when we want to run our tasks. In your terminal type:
gulp compileHTml. Now see a build folder has been created with the files in it.
Next, let’s use a gulp plugin to minify our Javascript. First, we need to install the plugin. For a list of gulp plugins check here. First, let’s create a folder called js and create a test file in it test.js. Next, we need to install a plugin called uglify to help us minify our files. In the terminal type:
npm install --save-dev gulp-uglify. This will install it as a dependency in our project. Now in your gulpfile.js update the code to this:
https://gist.github.com/f4cff3b0ed56f1e3b3274dbb7d84f80e
Webpack is a front-end build tool. More accurately, it is defined as a Module Bundler. Webpack’s functionality goes beyond just converting different modules into static assets. Webpack makes it easy to bundle code, transpile all older JS code into ES6, load development dependencies, run automated tasks and manage your project. With Webpack you can load custom files or files installed by NPM. The basic functionality of Webpack can be extended into more complex ones by using plugins and loaders
css
sass
jsx
CoffeeScript
are examples of common Webpack loaders.
To use Webpack, we must first install it. We can install it through the terminal by typing npm install -g Webpack. This command will install Webpack globally on your machine. Next, let’s create a folder to work with.
Create a folder webpacktest and initialize a package.json file. In your terminal type npm init and follow the prompts to create the file. Now the package.json file should look like this:
https://gist.github.com/9bf988fdefe693c94d141df8d33ddae7
Now we have it setup let’s do something with it. Let’s say we want to use JQuery library in our new project, here’s how we can do it;
First, we need to install JQuery. In your terminal type: npm install --save jquery. If that is successful your package.json file will now look like this:
https://gist.github.com/e7860fd1851b7cc4397bd2a8455e4d01
You can see JQuery has been installed as a dependency. Now for us to use it we need to create files. First, let’s create an HTML file we will load in our browser. Create an index.html file and add the following lines of code to it:
https://gist.github.com/87b14cdf2ed982588d867c871b2db2eb
You can see we called a file called bundle.js even though it has not been created yet. When we run our Webpack command, Webpack will automatically compile all the code we tell it to into that file. Now create an app.js file and add the following lines of code:
https://gist.github.com/d9d87b1cd4560f8242a33efd9f17d9ce
Here we are requiring JQuery to use in our project then we are using the append JQuery function to add data to our page. To see this, type webpack --mode=development app.js -o bundle.js.
Once done, open your index.html file in the browser and you will see the following:
This means that Webpack successfully bundled the code and imported the JQuery library for us to use. You can already see how beneficial this is as if we had to import 10 dependencies Webpack makes it possible for us to add all to just one file instead of individual files.
Let’s use useful data. Create a books.js file and add the following lines of code to it:
https://gist.github.com/d8ae6674bc0df5577d2407ea61d9b5ee
Next, update your app.js to look like this:
https://gist.github.com/75548f4bbf56d3e9d9078850aec446b6
Here we import the books from the books.js file and dynamically add it on our HTML page using special JQuery functions. Now if you run the command webpack --mode=development app.js -o bundle.js you will see this on your page:
In your terminal type webpack --mode=development app.js -o bundle.js --watch
. Now any change you make Webpack automatically watches and updates the bundle.js file.
Finally, let’s see how we can add styles to our page. For us to use CSS or SASS in Webpack we must use a loader. Let’s install it. In your terminal type: npm install --save-dev css-loader style-loader. Your package.json file will now look like this:
https://gist.github.com/92e922c9a5920bf74fccd4fe080d4a39
You can see both loaders have been installed as dev dependencies for us to use them. Let’s create a style sheet and add basic styles to it. Create a styles.css file and add the following lines of code to it:
https://gist.github.com/a08513622741896bbf480eeb712d1bcc
Now update your app.js file to look like this:
https://gist.github.com/6f852259fd68239e5a4775c04696af9f
Now since Webpack is in watch-mode, refresh your browser and you will see this:
Now we’ve seen how to use Webpack and how it can help development. There are still a lot of Webpack commands, techniques, and plugins to explore, you can find them here.
In this tutorial, we talked about different build tools and how they can help improve our development. All the tools are great and are fit for certain use cases. However, try not to spend so much time thinking on which tool to use, just define your projects needs then try to use a tool that best fits that need and is not too difficult to set up and get up to speed with. Thanks. Happy coding!