Sending Grunt Jade configurations to a specific file

Question

Sending Grunt Jade configurations to a specific file

I'm currently using grunt-contrib-jade and I'm trying to utilize the pkg.name and pkg.version variables to generate my css file name. Unfortunately, I haven't been able to make this work on my own and would appreciate any assistance. Below is what I have so far:

Snippet from jade task in Gruntfile

compile: {
    options: {
        data  : {
            app    : '<%= pkg.name %>',
            version: '<%= pkg.version %>',
        },
        pretty: true
    }

And then in my jade file:

link(href='_assets/css/<%= app %>-<%= version %>.css', rel='stylesheet', media='screen')

I'm uncertain how to include the data from the compile options defined in the jade task within the Gruntfile.

Any insight or guidance you can offer would be greatly appreciated. Thank you!

javascript gruntjs

Answer 1

Answer №1

Seems like you forgot to include package.json in your Grunt configuration. To fix this, simply add the following code snippet to your grunt file:

grunt.initConfig({
   pkg: require("./package.json"),// <---- don't forget this line
   compile: {
       options: {
          data  : {
              app    : '<%= pkg.name %>',
              version: '<%= pkg.version %>',
          },
          pretty: true
       }
  }
});

In my opinion, it's better to place it within a meta object like shown below:

grunt.initConfig({
   meta{
      pkg: require("./package.json"),// <---- don't forget this line
   },
   compile: {
       options: {
          data  : {
              app    : '<%= meta.pkg.name %>', // <-- pay attention to adding meta
              version: '<%= meta.pkg.version %>',// <-- make sure to add meta
          },
          pretty: true
       }
  }
});

Alternatively, you can try the following approach:

var pkg = require("./package.json");

grunt.initConfig({
   compile: {
       options: {
          data  : {
              app    : pkg.name, // <-- no need for quotes or micro templating
              version: pkg.version ,// <-- no need for quotes or micro templating
          },
          pretty: true
       }
  }
});

This method may not be as flexible as the previous one.

Answer 2

Seems like you forgot to include package.json in your Grunt configuration. To fix this, simply add the following code snippet to your grunt file:

grunt.initConfig({
   pkg: require("./package.json"),// <---- don't forget this line
   compile: {
       options: {
          data  : {
              app    : '<%= pkg.name %>',
              version: '<%= pkg.version %>',
          },
          pretty: true
       }
  }
});

In my opinion, it's better to place it within a meta object like shown below:

grunt.initConfig({
   meta{
      pkg: require("./package.json"),// <---- don't forget this line
   },
   compile: {
       options: {
          data  : {
              app    : '<%= meta.pkg.name %>', // <-- pay attention to adding meta
              version: '<%= meta.pkg.version %>',// <-- make sure to add meta
          },
          pretty: true
       }
  }
});

Alternatively, you can try the following approach:

var pkg = require("./package.json");

grunt.initConfig({
   compile: {
       options: {
          data  : {
              app    : pkg.name, // <-- no need for quotes or micro templating
              version: pkg.version ,// <-- no need for quotes or micro templating
          },
          pretty: true
       }
  }
});

This method may not be as flexible as the previous one.

Sending Grunt Jade configurations to a specific file

Answer №1

Similar questions

My Gatsby website is being rendered in its HTML form on Netlify

Best practices for server side countdown implementation

Learn how to obtain a response for a specific query using the `useQueries` function

Filtering an array of objects by multiple arrays of keys

Creating a dropdown menu for an extensive list of 100 menu items: a step-by-step guide

What is the most effective way to retrieve distinct values in Mongoose?

Angular - Navigate to Login Page post registration and display a confirmation message

What is the best way to obtain the present date in Nuxt directly from the server?

Can Firebase data be updated in real-time in a Vue app?

Attempting to execute a function within a MAP operation

What is the process for including body text in a Bootstrap tooltip?

Front-end displaying empty data fields on my webpage

How to retrieve the value of a SelectField component within a constant using Material-UI

Linux web server blocking requests across different domains, even with correct Access-Control-Allow-Origin headers set

"Unexpected outcome: Angular's HTTP request for a JSON file yields an undefined

Using jQuery to convert JSON data into an array

What is the best way to create a visual separation between these two arrows using styled-components?

How can Reactjs access a configuration file?

Adjust the input and transition the UI slider

Using JQuery's ajax() method within a for loop