How to use grunt js correctly?

Question

JavaScript

Good afternoon.
Recently got acquainted with grunt. As I understand it, this thing is needed in order to glue several files, minify them, and put them into production (well, as one of the main purposes of the utility).
Here I am using the MVC PHP framework. I create several views, and for each view I have a certain set of included files. For all views, I use common scripts, such as bootstrap.js, and for each view I separately use some of my files (view1.js, view2.js)
The articles I found on grunt gave an example of how to glue everything into one file. Is it correct to create a config for each view in the concat module? Well here is an example of my usage:

module.exports = function(grunt) {
    var commonScripts = [
        'public/bower-modules/jquery/dist/jquery.js',
        'public/bower-modules/bootstrap/dist/js/bootstrap.js'
    ];

    grunt.initConfig({
        concat: {
            options: {
                separator: "\n"
            },

            index: {
                src: commonScripts.concat([
                    'public/bower-modules/bxslider-4/jquery.bxslider.js',
                    'public/src/js/views/public.index.js'
                ]),

                dest: 'public/assets/js/public.index.js'
            },

            singlePage: {
                src: commonScripts.concat([
                    'public/bower-modules/SyntaxHighlighter/scripts/XRegExp.js',
                    'public/bower-modules/SyntaxHighlighter/scripts/shCore.js',
                    'public/bower-modules/SyntaxHighlighter/scripts/shAutoloader.js',
                    'public/src/js/views/public.pages.single.js'
                ]),

                dest: 'public/assets/js/public.pages.single.js'
            }
        },

        watch: {
            mainLayout: {
                files: ['public//src/js/**/*.js'],
                tasks: ['concat:index']
            }
        }
    });

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

That is, if there are 10 pages, then there will be 10 variables in concat for each page.
But to prescribe this for each view - the config will grow. Or do they do it? I don’t want to do one file for everything, because there will be 20 libs (all sorts of graphics, etc.) and why load them all the time.
Accordingly, I have two folders for js. I name the files the same, for example public.pages.single.js. In one folder (src) are the source codes for the view, in the other - what is obtained by gluing the lib and the file from src.

Answer 1

grunt is primarily a task manager and build system. Concatenation, etc. that's the job of plugins. By itself, the grant can only launch tasks. You can replace this case with make and it will be the same.
In general, if I understand you correctly, then you have some kind of strange logic. Usually a frontend is a frontend. You can only divide it into modules and not into pages. If your frontend code is so independent, then fine. but this is usually not the case, and scripts from one page are present on most others. Thus, based on the task, you can break the scripts into modules and combine everything in this way.
And then there is gulp, which has no targets out of the box. And I would recommend that you take it, as it will be more difficult to create trash.

Answer 2

I still apparently have not matured to the level of a front-end jejay. I just have applied tasks, such as displaying graphs on a page, or doing form validation. At the same time, I just connect js nicknames where necessary.
I don't know how to work with js at the modular level. I just load, say, jquery/bootstrap/google charts and draw charts. On another page, I load jquery/bootstrap/validation and do validation. Etc.
I would like to minify them and make 1 file instead of loading several