Automating tasks with Gulp and NPM


Sometimes we find ourselves repeating the same tasks many times. You can save a lot of time by automating builds and live reloading the browser page every time you do a modification to the code. This article will help you setup a front end web application with NPM and Gulp. We will use Materialize CSS to create a material design web page & automate all the tasks.

Without doing further ado, Lets get started.

Project Structure

Below is the project folder structure we are going to use throughout the application. I am using Visual Studio Code to edit files in this case.

app – this is the root folder under which we will keep our real code and serve the html pages. Copy this folder to host this project on an web server
assets – Images and other static assets.
sass – This is where you write the styles using sass, Learn more about SASS here.
scripts – For keeping javascript files
styles – All the sass is compiles into normal plain css and copied to this directory.

Setting up NPM

Lets create a project folder and start up terminal with the folder location. Once the terminal is open type below command to initialize a NPM project.

 $ npm init

Awesome, Once the package is initialized. Make sure we have the above folder structure ready. Once it is ready we can go ahead and start installing other stuff.

Install Gulp

$ npm install --save -dev gulp

As we talked earlier, this is required to create tasks and execute them. In this case we are only installing for the development environment.

Install Browsersync

 $ npm install --save -dev browser-sync

Browsersync is a really interesting javascript framework it makes your browser testing workflow faster by synchronizing URLs, interactions and code changes across multiple devices. We are using Browsersync here to live reload our page whenever we are making an edit to our html or css. This is also used only for development environment.

Install Materialize

$ npm install --save materialize-css

Materialize is a modern responsive CSS framework based on Material Design by Google.

Writing Gulp Tasks

To start writing gulp tasks we have to create a gulpfile.js file in the project root folder. This file will be responsible for the all the gulp tasks.

TASK 1 : Copy Materialize css classes from the node modules to Styles folder.

We write our gulp tasks with the gulp.task keyword followed by the task name and a function parameter where we write the task script.

Remember when we installed materialize using NPM ? Well by default all the NPM install goes to node_modules by default. But in this case we need the Materialize css framework in our app directory, so we will write a task which will copy the css from node_modules to styles folder in app directory. We can easily do with with gulp.src keyword.

TASK 2 : Copy Materialize javascript files from the node modules to Styles folder.

The same with Materialize javascript files also. We just copy them from the node_modules to styles folder in the app directory.

TASK 3 : Convert SCSS to CSS and Copy them to Styles folder.

Remember we have a SASS folder in our project. By default i have created a file called main.scss which will contain all our style. But we need to convert it to css and then give it to browser to render. Hmm, writing a task to convert the sass to css will so much make sense. Lets do it.

We will start by installing.

$ gulp-sass
$ gulp-autoprefixer

gulp-sass is a gulp extension package which helps to convert sass to css.

gulp-autoprefixer is a PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used in Twitter and Taobao.

After it is installed we can start writing the gulp task.

TASK 4 : Build and Serve

Finally, The last step.

In this step we hook the browsersync with the gulp build process. Meaning every time we build the project browsersync takes the app folder and serves it in the browser.

We have also created few watch on couple of files such as the css, scss and html files. Whenever the files under watch are modified the page reloads automatically with the current changes.

The full gulpfile.js can be found in this link.

Running the Project.

Done. Now for testing we will create a index.html file in the root of app folder. You can use the below template for testing.

Cool, now that we are done with everything start the project by typing the below command. You can also edit the page while the page is running, make make sure you hit the save button 🙂

$ gulp

Are we done ?

There is more to what he have seen so far, below are few links you can refer to do more.

Gulp API Documentation
Gulp Community Recipes
Gulp Plugins

About the author

Subodh Jena

I'm an open minded liberal type with curiosity as perhaps my main motivator. I love science, art, the natural world and learning from people of diverse backgrounds.

Add comment

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Latest updates

Subscribe to Blog