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

Pass a notification to a separate function

Issue Looking for a way to send an 'event' to another function using jQuery. The goal is to prevent the removal of a table row before executing certain treatments, and then remove the row. I want to insert a modal window in between these actions ...

javascriptjqueryeventsmodal-dialog

How can I create a semantic-ui dropdown with a dynamically generated header?

Here are the dropdown options: const options = [ { key: '1', text: 'Example 1', value: 'Example 1', type:'ABC' }, { key: '2', text: 'Example 2', value: 'Example 2', t ...

javascriptreactjsdrop-down-menusemantic-uisemantic-ui-react

Perform the subtraction operation on two boolean values using Typescript

I'm working with an array: main = [{ data: x, numberField: 1; }, { data: y, numberField: 2; }, { data: x, numberField: 3; }, { data: z, numberField: 4; }, { data: ...

javascripttypescriptecmascript-6

Leveraging the power of Ajax and Nodejs to dynamically refresh content on a webpage

I'm currently working on creating a loop to refresh a webpage every 30 seconds, but I'm facing some challenges with making an ajax call using the setInterval function. Below is a snippet of my server-side code: var app = express() app.get(' ...

javascriptajaxexpress

Activate the ajax function using a specific reference

I have been working on creating an ajax function that contains all the data inside the variable called $item within the following function: public function handleAjaxData(&$item,&$params,$limitstart) { $view = JRequest::getVar('view' ...

javascriptphpjqueryajaxjoomla

The Eclipse Phonegap framework is experiencing difficulty in loading an external string file with the jquery .load function

A basic index.html file has been created to showcase a text string from the test.txt file by utilizing the .load function from the jQuery library. The goal is to insert the textual content into an HTML (div class="konten"). The provided HTML script looks ...

javascriptjqueryajaxeclipsecordova

I am interested in extracting information from the Firebase real-time database and showcasing it on my HTML webpage

I am struggling to display data from the Firebase real-time database on my HTML page. Even though I can see all the data perfectly in the console, it doesn't show up on the webpage. I attempted to use a for loop, but it still doesn't display the ...

javascripthtmlfirebasefirebase-realtime-database

Checking to see if the prop 'isChecked' has been modified

I'm currently facing a challenge with testing whether a class's prop value changes after clicking the switcher. Below is the component class I am working with: import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core&a ...

javascriptangulartypescriptjasmine

The technique of accessing parent props from a child composition component in React

I am trying to reduce every letter prop from the child component, Palata. How can I achieve this? index.js <Block letter="I" mb={16}> <Palata letter="I" start={4} end={9}/> <Wall/> <Empty/> <Palata le ...

javascriptreactjsnext.js

Does Node.js offer a solution or module for converting Google Map polylines into a PNG image without the need for rendering HTML?

I'm attempting to generate a PNG image of polylines on a Google Map using Node.js on the backend without utilizing any view engine. I attempted to use the "webshot" Node.js package, but it was unable to save the polylines on the Google Map. app.get( ...

javascriptjquerynode.jsexpress

What is the best way to access data from outside a forEach loop in JavaScript?

I am trying to access the value of my uid outside of the foreach loop in my code. Can anyone assist me with this? This is the code I am working with: var conf_url = "https://192.168.236.33/confbridge_participants/conference_participants.json?cid=009000 ...

javascriptarraysajaxjson

Changing the counter using dual buttons in Vue.js

I am facing an issue with updating the counter when using both the add and remove buttons. The add button functions correctly, but unfortunately, the delete button does not update the counter as expected. Below is a picture showcasing the problem at hand: ...

javascriptvue.js

There seems to be a glitch in the functionality of annotations when using annotator.js

Currently, I am utilizing annotator.js to store the range in mysql. The following code fragment is being used for highlighting text within my file: <script src="/js/pdfjs/annotator.js"></script> <script> $(function(){ var annotation ...

javascriptjquerymysqlnode.jsannotations

Shifting attention from the main point to the surrounding details (including siblings)

In my search bar layout, the main parent component consists of three child components - location dropdown, date picker (calendar), and duration dropdown. By default, the user's location is pre-selected in the location dropdown. I want the focus to shi ...

javascriptreactjs

Every time I attempt to execute mupx deploy, an error message appears

issue in console shubhabrata@shubhabrata-VirtualBox:~/Meteor/myapp$ mupx deploy Meteor Up: Advancing Meteor Deployments for Production Configuration file : mup.json Settings file : settings.json “ Discover Kadira! A powerful tool to monitor yo ...

javascriptjsonmeteordigital-oceanmup

Encountering Error 100 when executing apt-get within Docker's environment, seeking resolution

I've been trying to dockerize my node.js application but encountered a problem with installing a system dependency called magicgraph. Despite using the "apt-get install" command in the Dockerfile like this: RUN apt-get install --force-yes -y graphicsm ...

node.jsdockernpmgraphicsmagick

Tips for achieving JSON formatting with JavaScript or jQuery

To achieve the desired output format, I am required to transform the provided input json. input json: [ { "key a": "value alpha" "key b": "value beta" "key c": "value gamma& ...

javascriptjqueryjson

NPM Scope for private repository changes forward slash to "%2F"

Hey there, I'm trying to fetch a private npm package from a private repository using scopes and I've configured my .npmrc file like this: registry=https://registry.npmjs.org/ @myco:registry=https://nexus.myco.com/nexus/repository/ In addition, ...

node.jsnpmnexus

Error: It seems that the window object is not defined when trying to run Firebase analytics

Encountering the error ReferenceError: window is not defined when attempting to set up Firebase analytics in my Next.js project. Below is the code snippet causing the issue: const app = initializeApp(firebaseConfig); const auth = getAuth(app); let analyti ...

javascriptfirebasenext.jsgoogle-analytics

``What is the mechanism behind callbacks in AngularJS when making a call to a REST service?

Currently, I am diving into the world of AngularJS and REST. The code snippet that I'm analyzing has the term callback repeatedly used in an authentication function. I'm curious to know if "callback" is a JavaScript or Angular keyword, or simply ...

javascriptangularjs