CODEWITHSUNDEEP
javascriptangularjs
Ajay Kotnala
Ajay Kotnala

Reputation: 1045

How can i add reference of all Javascript files in one?

I have a situation here. i have started angularjs project from the scratch. for every js file i am adding to my project it require its reference in index.html. which i want to avoid . can anyone please suggest me the best possible and easy implemented way to resolve it.

i am looking for kind of 2 options:(but dnt know how to do it)

1) single file which contain all js files and then that single file can refers in index.html

2) or it should be somehow added automatically when browser required it?

obviously there might be others options as well other then just mentioned above. any suggestion will be helpful Thanks in advance.

Upvotes: 1

Views: 695

Answers (2)

jenjis
jenjis

Reputation: 1097

As Alexander said, if you choose Grunt, you can use a concat plugin to merge a list of selected files into a single destination:

after you load the select plugin in your gruntfile.js

grunt.loadNpmTasks('grunt-contrib-concat');

define a task in grunt configuration:

grunt.initConfig({
  concat: {
    options: {
      separator: ';',
    },
    dist: {
      // your source file list
      src: ['src/js/*.js'], 
      //your destination file
      dest: 'dist/app.js',
    },
  },
});

then register this task to a list:

grunt.registerTask('compile', ['concat']);

this would be run by typing "grunt compile" on the command line

so you only have to include the dist/app.js file in your index.

There are many plugins available in grunt, i.e. you can inculde your app.js file dynamically using the grunt-include-source plugin, or minimize the js files using grunt-contrib-uglify.

More information on the gruntfile are available here

You can achieve the result as requested in the second point instead, i think you could use solutions like:

UPDATE:

I couldn't find a concat end to end tutorial, I'm sorry.

For a generic Grunt tutorial you can read this

Otherwise you can follow the getting started page from the official Grunt site for installation, configuration and have a general overview.

When they talk about plugins please refer to the README of the grunt-contrib-concat plugin linked and explained above.

Those pages could give you all the skills needed.

Finally, customize the concat configuration in Gruntfile.js by putting in dist.src all files to be merged into the file set as dist.dest and only include the latter in your html.

Once the set-up is complete, execute your task by typing grunt compile on the command line in your project folder, and the merged file will be produced.

Upvotes: 2

Alexander Mikhalchenko
Alexander Mikhalchenko

Reputation: 4565

As it has been already mentioned in comments by ShanShan, Grunt (or Gulp) is what you're looking for.

So, you set up a watch task, and after js file is modified, you concatenate all these files / compress them / whatever.

I bet this topic has been already discussed a lot.

Please consider the basic app generated with Yeoman and Yeoman angular generator.

Best regards, Alexander

Upvotes: 1

Related Questions