Automate your transformations with a Gruntfile that includes grunt-contrib-watch, browserify, and hbsfy (handlebars) plugins

I am fairly new to the world of tools like grunt, browserify, and handlebars. I have set up my gruntfile.js to monitor changes in certain .js files and then automatically run the default browserify bundle command on them. Below is a snippet from my current gruntfile.js:

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('node_modules/grunt/package.json'),
    watch: {
      js: {
        files: ['tvguide.js', 'responsive-tables.js'],
        tasks: ['browserify']
      }
    },
    browserify: {
      js: {
        src: ['responsive-tables.js','tvguide.js'],
        dest: 'bundle.js'
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-handlebars');
  grunt.loadNpmTasks('grunt-browserify');
   grunt.registerTask('default', ['watch', 'browserify']);
};

The setup works as expected but now I want to integrate handlebars for templating into my app. After some research, I came across the npm package hbsfy which seems to provide what I need. The instructions suggest running 

browserify -t hbsfy myscriptusingatemplate.js > bundle.js
. I would like this command to be executed automatically when specific .js files are saved, but I am unsure how to incorporate both -o and -t options either on the same or different files.

I tried using an options object but didn't achieve the desired outcome. Any guidance or suggestions on this matter would be greatly appreciated.

gruntjsnpmhandlebars.jsbrowserifygrunt-contrib-watch

Answer №1

To integrate hbsfy into your Grunt workflow, consider using a configuration similar to the following:

browserify: {
    js: {
        src: ['responsive-tables.js','tvguide.js','tmpl/**/*.handlebars'],
        dest: 'bundle.js'
    },
    options: {
        transform: ['hbsfy']
    }
}

By doing this, you can eliminate the need for grunt-contrib-handlebars entirely.

Additionally, it is recommended to enable the watch option in browserify instead of relying on grunt-contrib-watch.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Localhost is causing issues with Laravel in retrieving webfonts

I was trying to incorporate font-awesome into my Laravel project, but encountered a strange error. When I run the project, the following error appears in the console: GET http://localhost/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff2?5 ...

phpcsslaravelnpm

Containerize your Laravel/VueJS application using Docker

My goal is to dockerize my Laravel application, and I have come across various tutorials that seem helpful: Tutorial 1 Tutorial 2 Tutorial 3 Tutorial 4 In my development Dockerfile, I have defined the necessary steps for setting up the environment. Ho ...

phplaraveldockernpm

Is there a way to retrieve bookmarks (TOC) from a PDF document using technologies such as NodeJS, ReactJS, or PHP?

I'm sure most people have noticed that when you open a PDF in the browser or Acrobat PDF reader, a bookmarks tab appears like the one shown here: https://i.stack.imgur.com/obFer.png If the PDF doesn't have any bookmarks, the list will be empty. ...

javascriptphpnode.jsreactjsnpm

Is there a way to precompile jade.php templates efficiently?

I've developed strong feelings for Jade, and can't bear to see her anymore, but now I have a WordPress theme to design. So, I utilize Codekit, and it works well with jade - is there a way to incorporate jade.php instead of the node module? (I co ...

phpwordpresspugnpm

Implementing an npm-installed package in Laravel: A step-by-step guide

Apologies for the newbie question, but I'm completely new to package management systems, especially npm. Normally, I just link my CSS/Scripts to CDNs. However, I am currently working on a Laravel app that requires a more advanced <select> eleme ...

phplaravelnpmcomposer-php

Having issues with setting up Spatie on a Windows system

I've been working on setting up Spatie/Browsershot for my Laravel project, but even after following all the necessary steps, I keep encountering an error: 'node' is not recognized as an internal or external command, operable program or batc ...

phpnode.jslaravelnpmbrowsershot

Is there a similar feature to npm link in composer for PHP projects?

During my JavaScript module development process, I utilize npm link to easily install my local version into projects that require the module as a dependency. This method provides a seamless workflow. Although not quite as ideal as TDD, this approach simpl ...

phpnpmcomposer-phpdependency-managementnpm-link

Can composer be used to verify if npm is installed on the system?

Currently working on a composer file, verifying the presence of both imagick and mysql. Additionally, I am interested in determining if npm is installed on the system. Is there a way to confirm this? Appreciate any guidance. ...

phpdependenciesnpmcomposer-php

Guide to setting up npm pug-php-filter in conjunction with gulp

I'm having trouble setting up pug-php-filter (https://www.npmjs.com/package/pug-php-filter) with gulp in order to enable PHP usage in my Pug files. Any assistance would be greatly appreciated. ...

phphtmlnpmgulppug

Laravel has not been properly initialized

Recently, I've been exploring Laravel 5.3 and vue.js and I'm trying to make a GET request to fetch some user data from my database. I'm utilizing components in this project. Here is a snippet from my app.js file: require('./bootstrap ...

javascriptphplaravelnpmvue.js