CODEWITHSUNDEEP
gruntjsconcatenationboweruglifyjs
JasonM
JasonM

Reputation: 165

Javascript package management with bower and grunt

So in my project my javascript comprises of

Pretty standard stuff.

My goal was to find a reliable, automated way, to minify all my separate javascript files (approx 25 files) into one file for production.

I've installed bower and it seems like a good way to keep my external libraries up to date. I've also installed grunt. I'm using a bower plugin in grunt that copies all downloaded files to a specified directory, then concat can look in that directory to combine them and finally uglifyJS minifies the file. Again, it seems like a standard setup of grunt.

The bower plugin will create a folder like

vendorjs

 - bootstrap.js
 - jquery.js
 - etc

concat will then read from this dir, and as the files are in alphabetical order will combine them in an incorrect order, bootstrap before jquery, so it wont be of use.

I'm aware of RequireJS, but it seems like overkill for my needs. And it also seems like I'd need to rewrite all of my js to comply with the requirements of RequireJS.

Is there some configuration I'm missing that will help with my problem? Am I going about this in the wrong way?

Edit this is my Gruntfile.js for more clarity.

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    bower: {
        dev: {
            dest: 'vendorjs',
            options: {
                stripJsAffix: true
            }
        }
    }
    concat: {
        options: {
            separator: ';'
        },
        dist: {
            src: ['vendorjs/*.js'],
            dest: 'vendor.js'
        }
    },
    uglify: {
        dist: {
            files: {
                '../../public/js/admin/vendor.min.js': ['vendor.js']
            }
        }
    }
});

};

Upvotes: 2

Views: 1347

Answers (1)

Sindre Sorhus
Sindre Sorhus

Reputation: 63487

I'm not sure what your config looks like, but you can easily specify the order of files in grunt-contrib-concat:

grunt.initConfig({
  concat: {
    dist: {
      src: ['src/jquery.js', 'src/bootstrap.js'],
      dest: 'dist/built.js'
    }
  }
});

Upvotes: 2

Related Questions