2

I have a grunt tasks to concat and minify all my javascript files into one single file and the javascript file is in dist folder. "dist/<%= pkg.name %>.min.js'"

"Gruntfile.js"

module.exports = function (grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON("package.json"),
        concat: {
            options: {
                separator: ';'
            },
            dist: {
                src: ['src/main/resources/app/js/**/*.js',
                    'src/main/resources/app/config/*.js',
                    'src/main/resources/app/app/js'],
                dest: 'dist/<%= pkg.name %>.js'
            }
        },
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
            },
            dist: {
                files: {
                    'src/main/resources/app/dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
                }
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.registerTask("default", ["concat", "uglify"]);
};

Now, how can I use this minified version of javscript? Moreover, my index.html entry point of my code points to the non-minified version.

"index.html"

<div ui-view/>
<script data-main="config/require-conf" src="vendor/requirejs/require.js"></script>
would_like_to_be_anon
  • 1,639
  • 2
  • 29
  • 47
  • 4
    You use it like any other JavaScript file. *"Moreover, my index.html entry point of my code points to the non-minified version."* It should point to the minified version. – Felix Kling Nov 02 '15 at 04:20
  • @FelixKling So, if I have a directory structure for all my javascript files, I have to preserve the directory structure and place the minified javascript files in those respective directory locations so that I can point to those minified versions. Am I correct? – would_like_to_be_anon Nov 02 '15 at 04:26
  • 2
    It doesn't matter where you put the file as long as you load it in your HTML file. There really is nothing special about a file containing minified JS code. – Felix Kling Nov 02 '15 at 04:33
  • @FelixKling I was looking for something like this http://stackoverflow.com/questions/22045950/how-to-grunt-uglify-multiple-script-files-while-keeping-folder-structure?rq=1. I think I was not clear in my question. But, thanks for your answer. I applied it and my problem is resolved. – would_like_to_be_anon Nov 02 '15 at 04:47

2 Answers2

1

You could use usemin from https://www.npmjs.com/package/grunt-usemin. Usemin, with other tasks as

  • concat
  • uglify
  • cssmin
  • filerev

is able to minify all js and css in one single file. You only need to add a build:js as you can see in snippet below:

<!-- build:js SCLogic.min.js -->
        <!-- Load app main script -->
        <script src="app/app.js"></script>
        <!-- Load services -->
        <script src="app/services/authInterceptorService.js"></script>
        <script src="app/services/authService.js"></script>
        <script src="app/services/blablaService.js"></script>
       

        <!-- Load controllers -->
        <script src="app/controllers/indexController.js"></script>
        <script src="app/controllers/homeController.js"></script>
        <script src="app/controllers/loginController.js"></script>
        <script src="app/controllers/blablaController.js"></script>
        
        <script src="app/directives/validNumber.js"></script>
       
        <script src="app/controllers/angular-locale_es-es.js"></script>
       
        <!-- endbuild -->
Donald
  • 534
  • 1
  • 10
  • 18
  • "grunt-usemin is going under some major developments to tackle the long list of issues. As they might break with master they are merged into dev branch." – would_like_to_be_anon Nov 02 '15 at 16:51
  • 1
    @would_like_to_be_anon You are right, but it work in most cases. I used it and works fine. – Donald Nov 02 '15 at 17:12
0

You can just include the js file the normal way.

<script src="path to the minified file"></script>

in your index.html. Minified file is just like a normal JS file. What it does is:

  1. It will merge all the mentioned JS files into a single file.
  2. It will then minify it i.e it will remove the white spaces and auto change the variable names.
  3. Advantage of this is you will have a lower size file and a single http request made from your browser which will help you load the page at a faster speed.
Swaprks
  • 1,553
  • 11
  • 16