Javascript variables in Gruntfile.js?

Question

I'm maintaining a web application that uses Grunt extensively. I have to minify, copy my html, css, js files to different locations in different times. So to make it easy I created a simple javascript variable in my GruntFile.js as follows:

var path="C:/dist";

uglify: {
    options: {
       mangle: false
     },
     my_target: {
       files: {
        path+'/js/jsFile.js': ['src/js/jquery-1.10.2.min.js']
        }
     }          
}

When I am building this i am getting the following error

>> SyntaxError: Unexpected token +

Can't I Use path variable in my GruntFile.js. Because I have 10 location paths.

score 47 · Accepted Answer · answered Feb 07 '14 at 18:40

47

Another way, is to utilize Grunt templates:

grunt.initConfig({
  path: 'C:/dist/',
  uglify: {
    options: {
      mangle: false
    },
    '<%= path %>js/jsFile.js': ['src/js/jquery-1.10.2.min.js']
  }          
});

answered Feb 07 '14 at 18:40

Kyle Robinson Young

13,732
1
47
38

1

This. This is the _grunt way_ to do it. – Evan Davis Feb 07 '14 at 18:45
Similarly: http://chrisawren.com/posts/Advanced-Grunt-tooling#Using-variables-in-your-configuration – Hugo Oct 01 '15 at 09:24
I have always used `[variable + 'string']: value`, which has suddenly stopped working. This answer fixes it for me. – ESR Oct 10 '16 at 10:57

score 2 · Answer 2 · edited May 23 '17 at 12:17

2

The javascript object format doesn't allow a variable as the actual key:

path+'/js/jsFile.js'

This should work for you:

var path = "C:/dist";

var files = {};
files[path+"/js/jsFile.js"] = ['src/js/jquery-1.10.2.min.js'];

//...
options: {
   mangle: false
 },
 my_target: {
   files: files
 }

You can see several example of using variables as the key here:

How To Set A JS object property name from a variable

edited May 23 '17 at 12:17

Community

1
1

answered Feb 07 '14 at 18:24

helion3

34,737
15
57
100

That's not JSON, it's JavaScript. – user229044 Feb 07 '14 at 18:24
Javascript object notation, same deal. – helion3 Feb 07 '14 at 18:26
1

No, it's not. It's *not* JSON, it's not even trying to be JSON. It's a JavaScript object literal. The two are not interchangeable. – user229044 Feb 07 '14 at 18:28
If I want to change the path again I have to change like 20 locations. Thats why I created javascript variable. – Rajeev Feb 07 '14 at 18:28
You can still use the variable, you just need to set the key a bit differently. @meagar You're right, it's not 100% JSON so I've updated my answer but much of the time, js objects are used where json is intended, similar to "ajax" referring to requests that do not make use of XML. – helion3 Feb 07 '14 at 18:31
4

Sorry, but no. JSON is a strict subset of JavaScript meant for serializing hierarchical data. This *isn't* JSON, it's a big ol' JavaScript Object. They are not the same thing *at all*. "JS objects" cannot be used where "JSON is intended". That doesn't make sense. The two are not the same, you cannot substitute JavaScript object literals for JSON. This is important, words have meaning, and computers are pretty picky about this sort of thing. – user229044 Feb 07 '14 at 18:33
Ok, I'm not being clear as to my meaning - I apologize. I never meant to imply that JSON === Javascript Objects. I mistakenly used the name when I meant "javascript object" similar to how people commonly use the term "ajax" for async requests that do not involve XML, etc. – helion3 Feb 07 '14 at 18:39
2

JSON is a *language-independent* textual data exchange format, like XML, CSV, or YAML. JavaScript object literals are a very specific syntactical construct of the JavaScript language. Only because they look similar doesn't make them the same. And using the terms incorrectly just adds to the confusion that already exists around this topic. *edit* I'm slow at typing on my phone ;) – Felix Kling Feb 07 '14 at 18:43
Thanks for noting the reason why the OP example gives a syntax error. – marcovtwout Jun 24 '15 at 08:13

Javascript variables in Gruntfile.js?

2 Answers2

Linked