Convert the jade file to an HTML file while keeping the original file name

I'm currently attempting to configure Jade in a way that allows me to save my Jade files as HTML files while retaining the same file name.

For example, I would like the file views/index.jade to be saved as dist/index.html

This should apply to all additional files as well.

My tool of choice is grunt-contrib-jade

The jade configuration in my Gruntfile looks like this:

module.exports = function(grunt){
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    jade: {
      compile: {
        options: {
          pretty: true
        },
        files: {
          'dist/*.html': ['views/*.jade']
        }
      }
    }

  });
  grunt.loadNpmTasks('grunt-contrib-jade');
  grunt.registerTask('default', ['jade']);
};

Unfortunately, when I run it, the files are only being saved as *.html

javascriptgruntjsnpmpug

Answer №1

It seems like the code is following your instructions correctly. To configure the jade task, you can try the following:

jade: {
    compile: {
        options: {
            pretty: true
        },
        files: [{
            expand: true, // enabling additional options
            cwd: '/jade', // matches are relative to this path
            src: ['{,*/}*.jade'], // finds *.jade in current directory and subdirectories
            dest: 'dist/', // destination folder
            ext: '.html' // new file extension
        }]
    }
}

Here is some helpful information on dynamically building file lists with Grunt.

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

"Learn how to easily send media files stored on your local server via WhatsApp using Twilio with Node.js and Express

Whenever I attempt to send the PDF file created through WhatsApp, an error pops up preventing me from viewing it. easyinvoice.createInvoice(data, function(result) { //The response will contain a base64 encoded PDF file ...

javascriptnode.jsexpresstwiliotwilio-api

Challenges encountered when passing objects with Angular 2 promises

I am encountering a problem when using a promise to retrieve a Degree object in Angular 2. The initial return statement (not commented out) in degree.service functions correctly when paired with the uncommented implementation of getDegree() in build.compon ...

javascripttypescriptangularangular-promise

Having trouble accessing the name property of a select dropdown in Material UI React

Currently, I am facing an issue with implementing a select dropdown. When handling the onChange method, I am encountering a situation where event.target.name is undefined. Specifically, when I choose the 1st option, I want to be able to access 'Englis ...

javascriptreactjsdrop-down-menuinternationalizationmaterial-ui

Utilizing Ajax and JQuery to send information to a ASP server for processing

Hello everyone, I am facing an issue with ajax and need some help. I'm struggling to figure out how to properly display a variable in asp. Any guidance would be greatly appreciated. $(document).ready(function () { $("button").click(function () { ...

javascriptjqueryasp.netajax

Grab the code snippet from JSFiddle

I apologize for the seemingly simple question, but I have been struggling with it. I tried looking at similar questions, but I couldn't find a solution. Despite copying the code from http://jsfiddle.net/sB49B/21/, I can't seem to get it to work ...

javascripthtmlcssjsfiddle

Customizing File Size and Dimensions in Form Submission with Dropzone.js in JavaScript

I am currently experimenting with some sample code for Dropzone.js and am interested in finding a way to include the file size as a form field when submitting: var KTFormsDropzoneJSDemos = { init: function(e) { new Dropzone("#kt_dropzonejs_exam ...

javascriptdropzone.jsdropzone

Sundays and last days are excluding React-big-calendar and dayjs longer events from being displayed

I've encountered a bug in my calendar view implementation. Long events are not displaying on Sundays or the ending day. Please refer to this image for reference: https://i.stack.imgur.com/V0iis.png Event details: Start time: Mon Aug 07 2023 15:44:00 ...

javascriptreactjstypescriptreact-big-calendardayjs

Enhance Bootstrap typeahead to accommodate multiple values

I have a basic typeahead setup for searching city names. However, upon selecting a city, I also need to retrieve its latitude and longitude in order to send that data to the backend. $('.typeahead').typeahead({ minLength : 3, source : ...

javascriptjqueryhtmljsontwitter-bootstrap

Guide on Generating SAS Token for Azure Table Storage in a jQuery Application

I am currently working on a jQuery web application that requires read-only access to an Azure Table Storage, fetching one record at a time by passing in the PartitionKey and RowKey. To simplify my code, I have integrated the Azure Storage JavaScript Client ...

javascriptazureaccess-token

Change the location of an html td element with JavaScript

I am currently working on a simple JavaScript car racing game where the cars are represented by HTML table elements. I want to implement functionality where pressing the "e" key moves player one's car and the "d" key moves player two's car. This ...

javascripthtmlcss

Create a function that multiplies every element in an array by 2

This example involves some JavaScript code. Currently, I have written the following: var double = function (array) { var newArray = []; for(var i = 0; i<array.length; i++) { newArray.push(array[i]); newArray.push(array[i]); ...

javascriptarraysfunction

Having trouble loading the JSON data for display

My select dropdown is supposed to display the names of states. The data is being fetched from PHP and is also available in the controller JS file. However, the data is showing up as blank in the HTML. When I use console.log(), the fetched result from PHP s ...

javascriptangularjs

Unpacking JSON Objects in Typescript: Working with Private Variables

I have a TypeScript model object called user export class User { constructor( private _name: string, private _email: string ) {} public get name():string { return this._name; } public set name(value:string) { this._name = value; } g ...

javascriptjsontypescriptlocal-storage

Typescript - type assertion does not throw an error for an invalid value

When assigning a boolean for the key, I have to use a type assertion for the variable 'day' to avoid any errors. I don't simply do const day: Day = 2 because the value I receive is a string (dynamic value), and a type assertion is necessary ...

javascripttypescript

Leveraging jest.unmock for testing the functionality of a Promise

I've implemented Auth0 for managing authentication in my React App. Below is the code snippet I am trying to test: login(username: string, password: string) { return new Promise((resolve, reject) => { this.auth0.client.login({ ...

javascriptreactjsjestjses6-promise

What are the best practices for implementing serialization in NestJS?

Recently, I delved into a fresh NestJs project and encountered a hurdle while trying to integrate serialization. The goal was to transform objects before sending them in a network response. Initially, everything seemed to be working smoothly until I attemp ...

javascriptnode.jsnestjsclass-transformer

Utilizing Node.js to send emails through Outlook configured for a specific company

I attempted to send a basic email from my Node.js code to my company email on Outlook. However, the email address is not as expected '[email protected]', but rather more complicated like '[email protected]'. An error message ...

node.jsemailnpmoutlooknodemailer

What could be causing the issue with my hour parameter in node-cron?

Having difficulty setting up a cron job to run with node-cron every Monday at 8:30. I've tried using "30 8 * * Mon" and even "30 08 * * Mon", but it doesn't seem to work. Interestingly, "30 * * * Mon" does work and runs every hour on the 30th min ...

javascriptnode.jscroncron-tasknode-cron

The equivalent of an event listener in event handling

Here is an example of how to set up event listeners: document.getElementById("A").addEventListener("change", function (e) { // do something when A changes }, false) document.getElementById("B").addEventListener("click ...

javascriptdom-events

Unable to establish a connection with Metamask

Looking to connect to Metamask and retrieve the account balance: <!DOCTYPE html> <html> <head> <title>Testing Ethereum with Metamask</title> <meta charset="UTF-8"> <meta name=&quo ...

javascriptethereumblockchaincdnethers.js