0

I have this problem: In order to refactor the frontend part of an existing project, I'm trying to use Grunt compiler into this. This project has the following structure:

file1.jsp loads file1.js
file2.jsp loads file2.js

So the javascript files generated from grunt contains file1 + file2. The problem is: if in the file1.js I have:

$(document).on('ready', function()...)

var funct = function() {
...
};

$('.class').on('click', function(){...})

And also in the file2 I have another definition of the funct variable and also the jquery part, with the generated javascript file, file1.jsp and file2.jsp calls both the same functions. I would like to keep the previous behavior, but I would also to load a single js file, instead of multiple js files in different jsp pages.

UPDATE:

I a few words, I have this structure:

js
 - eu
 - folder1
 -- file1.js
 - folder2
 -- file2.js
...

What I want to do is: minify all js files inside js/eu folder, than concat all the minified files and load the applicationScripts.min.js file into my index.jsp instead of loading all single files inside the related jsp file.

The Gruntfile.js is:

concat: 
  { options: 
    { separator: '\n' }, 
    dist: { 
      src: [ 'js/eu_min/**/*.min.js' ], 
      dest: 'js/applicationScripts.min.js' } }, 
uglify: 
  { options: 
    { pretty: true }, 
    dist: { 
      files: { 
        expand: true, 
        src: "js/eu/**/*.js", 
        dest: "js/eu_min/", 
        ext: ".min.js" } } }, 
watch: { files: [ 'js/eu/**/*.js' ], 
tasks: [ 'uglify', 'concat' ] }

Thanks for your support

d_vucin91
  • 119
  • 2
  • 12
  • Are you unable to modify the source files? Alternatively, have you tried uglifying both files beforehand? – ryanwebjackson Jun 29 '18 at 13:31
  • Hi @ryanwebjackson, thanks for the answer. Modifying source files is really complicated (I've simplified the example). For the last part, can you explain better? Thanks again – d_vucin91 Jun 29 '18 at 13:47
  • All you have to do is put the code in a namespace, such as an IIFE, and then duplicate variable names are not an issue. – Taplar Jun 29 '18 at 14:08
  • Potential duplicate: https://stackoverflow.com/questions/8228281/what-is-the-function-construct-in-javascript – Taplar Jun 29 '18 at 14:12

2 Answers2

0

Try using Grunt's Uglify plugin: https://github.com/gruntjs/grunt-contrib-uglify

This minifies code, which includes changing variable names to be short, random characters.

Do this before combining the files, because if they are combined beforehand, the parser will assume they're the same variable.

ryanwebjackson
  • 1,017
  • 6
  • 22
  • 36
  • So if I have the following structure:
    jsp
    - file1.jsp
    - file2.jsp
    js
    - folder1
    - file1.js
    - folder2
    - file2.js     I have to run first uglify than concat. How I have to configure uglify function in order to read all subfolder and js inside the js root folder?     – d_vucin91 Jun 29 '18 at 14:10
  • Try something like "[js-root-folder]/**/*.js". The wildcard syntax is called a minimatch expression. – ryanwebjackson Jun 29 '18 at 14:16
  • something like this `concat: { options: { separator: '\n' }, dist: { src: [ 'js/eu_min/**/*.min.js' ], dest: 'js/applicationScripts.min.js' } }, uglify: { options: { pretty: true }, dist: { files: { expand: true, cwd: "js/eu", src: "js/eu/**/*.js", dest: "js/eu_min/", ext: ".min.js" } } }, watch: { files: [ 'js/eu/**/*.js' ], tasks: [ 'uglify', 'concat' ] }` – d_vucin91 Jun 29 '18 at 14:41
  • gave me this error: `Warning: pattern.indexOf is not a function Use --force to continue.`. What I want to do is: minify all js files inside `js/eu` folder, than concat all the minified files and load the `applicationScripts.min.js` file into my index.jsp instead of loading all single files inside the related jsp file – d_vucin91 Jun 29 '18 at 14:41
  • Can you add this detail to your question? – ryanwebjackson Jun 29 '18 at 14:44
0

Conflicting variable names or methods are the primary reason why many developers use a namespace for their logic. This can come in different forms. One way being to wrap your logic in an IIFE or Immediately Invoked Functional Expression

(function(){
    var funct = function() {
    ...
    };

    $('.class').on('click', function(){...})
}());

What this does is puts the logic inside an anonymous function that is invoked immediately. Elements inside the IIFE, so long as you scope them properly, will only exist inside that function, so multiple files performing this same type of namespacing will not conflict with one another.

Taplar
  • 24,788
  • 4
  • 22
  • 35
  • thanks for the answer, but my problem is different. I don't want to use multiple files, I want to use grunt in order to use one single file and I want to avoid conflicts between same named methods or vars – d_vucin91 Jul 01 '18 at 16:49
  • @user10011121 you can still do what you are currently doing. You can use a namespace in any file(s). – Taplar Jul 02 '18 at 14:44