CODEWITHSUNDEEP
javascriptangularjsgruntjs
Hendro Febrian
Hendro Febrian

Reputation: 222

Include js files which are located in different folders with grunt

I am struggling to include my js files with grunt. Since I use Angularjs, I need grunt to import so many js files I have. This is my /public directory structure:

image

gruntfile.js

module.exports = function (grunt) {
    grunt.loadNpmTasks('grunt-include-source');
    grunt.initConfig({
        includeSource: {
            options: {
              basePath: 'public/js',
              templates: {
                html: {
                  js: '<script src="{filePath}"></script>',
                  js: '<script src="/controllers/{filePath}"></script>',
                  js: '<script src="/services/{filePath}"></script>',
                  js: '<script src="/filters/{filePath}"></script>',
                }
              }
            },
            myTarget: {
              files: {
                'public/views/layouts/master_layout.html': 'public/views/layouts/master_layout.html'
              }
            }
          }
    });
    grunt.registerTask('build',[
        'includeSource'
    ]);
};

I want to import all js file inside

  1. /public/js
  2. /public/js/controllers
  3. /public/js/services
  4. /public/js/filters

I want to import those js files into my main layout which is located in:

public/views/layouts/master_layout.html

I placed this comment inside master_layout.html

<!-- include: "type": "css", "files": "*.css" -->
<!-- include: "type": "js", "files": "*.js" -->

And run command grunt build. There's no warning or something like that. But what grunt only does is replacing that comment with js files in /public/js folder. Please help. Thanks.

Upvotes: 1

Views: 1656

Answers (2)

Kousic
Kousic

Reputation: 2711

Automatically include Javascript files with grunt

To have your JavaScript files included in main_layout.html automatically during Grunt build or Grunt serve, first install the "grunt-include-source" plugin by running npm install grunt-include-source --save-dev and then add the below in the files:

Gruntfile.js

Add the app variable config to grunt.initConfig

app: {
    // Application variables
    scripts: [
           // JS files to be included by includeSource task into index.html
           'scripts/app/app.js',
           'scripts/app/app.constants.js',
           'scripts/components/**/*.js',
           'scripts/app/**/*.js'
         ]
}

Add the includeSource config at the end under the watch task in grunt.initConfig:

includeSource: {
    // Task to include files into index.html
    options: {
        basePath: 'src/main/webapp',
        baseUrl: '',
        ordering: 'top-down'
    },
    app: {
        files: {
            'src/main/webapp/index.html': 'src/main/webapp/index.html'
            // you can add karma config as well here if want inject to karma as well
        }
    }
}

Add the includeSource task to grunt.initConfig

grunt.registerTask('serve', [
    'clean:server',
    'wiredep',
    'includeSource',
    'ngconstant:dev',
    'concurrent:server',
    'browserSync',
    'watch'
]);

Add the includeSource task to the serve and build tasks so that it is included in the workflow

grunt.registerTask('build', [
    'clean:dist',
    'wiredep:app',
    'includeSource',
    'ngconstant:prod',
    'useminPrepare',
    'ngtemplates',
    'concurrent:dist',
    'concat',
    'copy:dist',
    'ngAnnotate',
    'cssmin',
    'newer:autoprefixer',
    'uglify',
    'rev',
    'usemin',
    'htmlmin'
]);

Add the needles to the main_layout.html file so that includeSource can inject JS files there

<!-- build:js({.tmp,src/main/webapp}) scripts/app.js -->
<!-- !DO NOT EDIT! autogenerated includes, see Gruntfile.js -->
<!-- include: "type": "js", "files": "<%= app.scripts %>" -->
    <!-- Files willbe added here by includeSource-->
<!-- /include -->
<!-- endbuild -->

Upvotes: 1

Michel Hanna
Michel Hanna

Reputation: 157

You can concatenate all of your js files and group each related set into one js file and place it in your /public/js folder using concat task and that shall help you in avoiding trigger requests back and forth for your asset files. besides it can watch for any change in these files.

You can either concatenate all your js files in one main file with the following code sample or define sub objects under concat task that group each set of related js files together.

    concat: {
        js: {
            src: [
                //----------------------------Angular Services----------------------------//
                'wwwroot/js/angular/modules/vendors/services/VendorsService.js',
                'wwwroot/js/angular/modules/shared/services/SharedService.js',
                //----------------------------Angular Controllers----------------------------//
                'wwwroot/js/angular/modules/vendors/controllers/VendorsController.js',
                //----------------------------Application JS Files----------------------------//
            ],
            dest: 'wwwroot/public/js/site.js'
        }
    },

Upvotes: 1

Related Questions