Maintain the organization of folders during compilation using grunt

Currently, I am using grunt to convert jade files into HTML files.

The structure of my files is as follows:

index.jade
|--partials/
           view1.jade
           view2.jade

To compile these files, I am utilizing grunt-contrib-jade. Below is the code snippet that I am using:

    jade: {
  compile: {
    options: {
      data: {
        debug: true
      }
    },
    files:
      [{
        expand: true,
        cwd: 'src/',
        src: ['*.jade', '*/*.jade'],
        dest: 'dist/views',
        ext: '.html',
      }]
  }
},

Although the compilation process works fine, it alters the file structure by placing all files in the dist/views directory.

Is there a way to maintain the original file structure, achieving something like this?

dist/views
|--------- index.html
|---------/partials/
                   / all other files

Thank you in advance.

Answer №1

To prevent flattening of the folder structure, make sure to include the flatten property in your configuration:

files:
  [{
    expand: true,
    flatten: false, // <---- Keep the folder structure intact
    cwd: 'src/',
    src: ['**/*.jade'], // <---- Update glob pattern to match all .jade files at once
    dest: 'dist/views',
    ext: '.html',
  }]

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

location on an item within THREE.JS

After successfully loading an .obj file, I am looking to anchor a point on the brain within the image. This point should remain stationary regardless of camera movement, always staying in the same position as depicted in the image below: https://i.sstatic ...

Is there a way to handle button click event when utilizing this.props.children in React?

I have recently completed a React component that serves as a modal wrapper. The content for this modal is passed through the props.children property. Inside the content, there is a button that, when clicked, should trigger an event in the parent component. ...

invoking a function at a designated interval

I am currently working on a mobile application built with Ionic and TypeScript. My goal is to continuously update the user's location every 10 minutes. My approach involves calling a function at regular intervals, like this: function updateUserLocat ...

Can you create a while loop that continuously asks for user input, stores the responses, and then makes them accessible in an array?

When developing a Yeoman generator, the necessary dependencies can be found at https://github.com/sboudrias/mem-fs-editor#copytplfrom-to-context-settings and https://github.com/SBoudrias/Inquirer.js/. The main goal is to prompt the user with a question an ...

What is the best way to ensure an AJAX get-request waits for the page to finish rendering before providing a response?

I've been working on a Greasemonkey Script for a specific section of this website (Site1). Site1 offers various deals and discounts, and my script is designed to perform the following task: When a user visits an offer on Site1, the script checks with ...

What are some ways to enhance the loading time of my PHP-powered website?

Having troubles with my PHP-driven website that showcases real-time stock market data due to slow loading speeds. The site utilizes PHP for scraping financial information from external sources and presenting it on the front end. However, the performance is ...

Obtaining a dependency directly from the Injector within a directive

I am currently working on developing a versatile directive that can take a class type for validating rules. Depending on the rule specified in the class, the directive will either display or hide an element. This is my progress so far. Check out the PLUN ...

How come a TypeScript project created using Create React App can locate modules, while an Express project cannot?

WebStorm is my go-to tool for development. I recently set up a React project and an Express project using the built-in wizard feature. While TypeScript was automatically integrated into the React project, I had to manually add it to the Express project. B ...

Return true in an incorrect manner

Coderbyte Challenge 7 Need help with a function that checks if every letter in the string is bounded by '+' signs. The code provided seems to be returning incorrect results - it should return false for the input string below as 'k' is ...

Utilizing Ionic Storage to set default request headers through an HTTP interceptor in an Angular 5 and Ionic 3 application

I'm attempting to assign a token value to all request headers using the new angular 5 HTTP client. Take a look at my code snippet: import {Injectable} from '@angular/core'; import {HttpEvent, HttpInterceptor, HttpHandler, HttpRequest} from ...

The controller method in Laravel is not being triggered by AJAX

In my blade layout file, I have some code that is included in my view multiple times using the @include.layout("blade file link") syntax. When a button is pressed, I want to call a controller function. This works fine without AJAX, but when AJAX is added, ...

What is the best method to retrieve a specific data field from a JavaScript object using jQuery?

I am new to the world of jQuery and JavaScript and I am unsure if this question has been asked before. Despite searching extensively, I have not found a relevant answer to my specific query. My goal is to create a web crawler using Apify. I am looking to e ...

What is the process of mapping an array of object IDs in order to retrieve the corresponding objects associated with each ID

I currently have a specific collection that stores IDs referencing objects in a separate schema. If I'm working with an array containing these IDs, what is the best way to iterate through and retrieve the corresponding object? Although I've mad ...

Hide Transform Controls at Center in Three.js

Is there a way to hide the central controls of the three.js transform controls and only display the xyz arrows in the controller? I have highlighted the sections of the controller that I want to hide in the image below. https://i.sstatic.net/eRz80.png In ...

Transform the Angular function into a factory and take advantage of caching

My query differs from others with a similar title. I am attempting to transform a function into a factory in order to share data across controllers, but unlike my other factories, this one is not functioning as expected. I have successfully implemented ot ...

Tips for eliminating repetitive code in JavaScript

I have a jQuery function that deals with elements containing a prefix 'receive' in their class or ID names. Now, I need to duplicate this function for elements with the prefix 'send'. Currently, it looks like this: function onSelectAddr ...

AngularJS: Retrieve individual objects from an array and subsequently initiate asynchronous requests

I am working with two tables, Category and Products, linked by a 1-N cardinality relationship. https://i.sstatic.net/e6C2y.png My goal is to retrieve all products belonging to a specific category. https://i.sstatic.net/yDrjr.png Here is the HTML table ...

Angular 4: Triggering a function by clicking a link with specific parameters

I am relatively new to working with Angular 4. I have an anchor tag that, when clicked, should redirect me to a link where I also need to pass parameters. I'm unsure if my current approach is correct or not. Above all, I really need guidance on how to ...

While iterating through a dynamically generated JSON data array, omitting the display of the ID (both title and value) is preferred

I am working with a JSON data Object and using $.each to dynamically retrieve the data. However, I want to display all values except for one which is the ID. How can I achieve this and prevent the ID from being displayed in the HTML structure? Thank you. ...

Issue with setting a cookie on a separate domain using Express and React

My backend is hosted on a server, such as backend.vercel.app, and my frontend is on another server, like frontend.vercel.app. When a user makes a request to the /login route, I set the cookie using the following code: const setCookie = (req, res, token) = ...