Managing Node.js-based Web Project Using Gulp and Nodemon

In building a website, there are two main components which are frontend and backend components. If we build a website based on Node.js for the backend side, and of course Javascript and CSS for the frontend side, we should handle our codes in the project differently.

We may perform a linter and the Typescript transpiler for our Node.js codes. While on the frontend side, we may additionally minify and bundle the project styles and scripts. The backend program needs to be restarted when there are any changes in the codes and transpiler is performed. The frontend codes need to be re-bundled when there are also any changes.

Nodemon is a tool that is designed to restart a Node program when a change of the program codes is detected. Gulp is a task runner that can be utilized to watch any changes in the program codes and perform specific tasks.

In this post, we will make a transpiler is run and the backend program is restarted when there are any changes. We will also compile our Sass-based styles and minify our Javascript codes when there are any changes in the frontend codes. For that purpose, we require several tools as follows.

• gulp, nodemon, & typescript: They are the main tools for managing tasks in the project.
• gulp-sass & node-sass: They are required for compiling Sass files.
• gulp-nodemon: This interface allows us to call the Nodemon task in a Gulp process.
• gulp-run: It is used to run an external program, in this case, we use it for calling the tsc command. Even we can utilize gulp-typescript or babel to transpile Typescript codes, we use the gulp-run tool in this sample to show another option how Gulp can be utilized.
• gulp-uglify: It can be used for minifying Javascript files.

Our project directory structure will be as follows.

src
-- app.ts
publicSrc
-- styles
-- -- style.scss
-- js
-- -- main.js
built
-- app.js
public
-- styles
-- -- style.css
-- js
-- -- main.js

src and publicSrc directories are where our working source codes are stored.

Then, we can create the gulpfile.js file for defining all desired tasks.

const {series, parallel, src, dest, watch} = require('gulp');
const sass = require('gulp-sass')(require('node-sass'));
const nodemon = require('gulp-nodemon');
const run = require('gulp-run');
const uglify = require('gulp-uglify');

function styleTask() {
  return src('./publicSrc/styles/**/*.scss')
    .pipe( sass({outputStyle: 'compressed'}).on('error', sass.logError) )
    .pipe( dest('./public/styles') );
}

function jsTask() {
  return src(['./publicSrc/js/**/*.js'])
    .pipe( uglify() )
    .pipe( dest('./public/js') );
}

function typescriptTask() {
  return run('tsc').exec();
}

exports.backend = series(typescriptTask);
exports.frontend = parallel(styleTask, jsTask);

// task for one-time build
exports.build = parallel(series(typescriptTask), parallel(styleTask, jsTask));

// task for monitoring code changes, performing additional tasks, and re-running the appliation
exports.watch = function(done) {
  watch(['./publicSrc/styles/**/*.scss'], {ignoreInitial:false, delay:1000}, series(styleTask));
  watch(['./publicSrc/js/**/*.js'], {ignoreInitial:false, delay:1000}, series(jsTask));
  nodemon({ 
    script: './built/app.js',
    ext: 'js ts',
    ignore: [
        'node_modules/'
    ],
    watch:['./src'],
    env: { 'NODE_ENV': 'development' }, // for example
    legacyWatch: true, // for enabling program in containerized environment
    tasks: [
      'backend'
    ],
    done: done
  });
}

We need to make sure that the tsconfig.json file has been configured properly before we run our Gulp program.