I
I
Ilya Trusov2016-03-21 21:54:31
Grunt.js
Ilya Trusov, 2016-03-21 21:54:31

How to organize files in grunt-contrib-concat?

Hello, I am using grunt-contrib-concat for grunt. The problem is that he connects the files not in order, but as he wants. I need jquery.js to be first. Listed the library manually, but it does not help. I'm using the latest version of grunt and grunt-contrib-concat.
Gruntfile.js

module.exports = function (grunt) {

    grunt.initConfig({
        clean: {
            folder: ['build/']
        },
        bower: {
            dev: {
                dest: 'public/',
                js_dest: 'public/js/lib',
                css_dest: 'public/css/lib',
                fonts_dest: 'public/fonts/',
                images_dest: 'public/img/'
            }
        },
        concat: {
            js: {
                src: ['public/js/**'],
                dest: 'public/js/chill.js'
            },
            css: {
                src: ['public/css/**'],
                dest: 'public/css/chill.css'
            }
        },
        autoprefixer: {
            options: {
                browsers: ['last 2 versions', 'ie 8', 'ie 9', '> 1%']
            },
            main: {
                expand: true,
                flatten: true,
                src: 'public/css/chill.css',
                dest: 'public/css/'
            }
        },
        uglify: {
            dist: {
                src: ['<%= concat.js.dest %>'],
                dest: 'build/js/chill.min.js'
            }
        },
        cssmin: {
            options: {
                keepSpecialComments: 0
            },
            dist: {
                src: ['<%= concat.css.dest %>'],
                dest: 'build/css/chill.min.css'
            }
        },
        imagemin: {
            dynamic: {
                files: [{
                    expand: true,
                    cwd: 'public/img',
                    src: ['**/*.{png,jpg,gif}'],
                    dest: 'build/img',
                }]
            }
        },
        copy: {
            main: {
                expand: true,
                cwd: 'public/',
                src: ['fonts/*'],
                dest: 'build/'
            }
        },
        clean: {
            css: ['<%= concat.css.dest %>'],
            js: ['<%= concat.js.dest %>']
        }
    });

    grunt.loadNpmTasks('grunt-bower');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-autoprefixer');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-imagemin');
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-contrib-clean');

    grunt.registerTask('default', ['bower', 'concat', 'autoprefixer', 'uglify', 'cssmin', 'imagemin', 'copy', 'clean']);
};

PS I found a similar question on the stack , they offer to list manually, but it does not work, as I said above. What to do? Thank you in advance.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
I
Ivan Belenkov, 2016-03-24
@artgrosvil

In fact, you really need to enumerate manually. The stack indicates the old version of the syntax. Here's an example from the documentation:

concat: {
    bar: {
      src: ['src/bb.js', 'src/bbb.js'],
      dest: 'dest/b.js',
    }
  }

But personally, I prefer webpack, where you don't have to go into the config to add the file.
Excellent webpack screencast by Ilya Kantor - https://www.youtube.com/playlist?list=PLDyvV36pndZ...
UPDATE:
Didn't notice your comment right away. Here's what I found:
uglify has the hoist_funs option enabled by default. If you have functions declared globally, they are moved to the top. There are two solutions:
1) wrap the code in all the files that you wrote in a module - (function(){})();
2) disable the hoist_funs option
options: {
  compress: {
    hoist_funs: false
  }
}

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question