Grunt concat all package.json dependencies

问题:

This is the first time I use grunt & npm.

My package.json contains this:

"dependencies": {
    "angular": "latest",
    "bootstrap": "latest",
    "jquery": "latest"
}

Is there a way to tell grunt: "Look at all of my dependencies, load the right files, and create one JS file, and one CSS file for distribution"?

*This is because I don't want to list all of the distribution files for every dependency.

回答1:

yes you can use grunt modules like: concat, cssmin, and sass, for concat your files in just 1.

I will try give a small explanation, but you can read more and understand using the links.

concat: https://www.npmjs.com/package/grunt-contrib-concat

cssmin: https://github.com/gruntjs/grunt-contrib-cssmin

sass: https://github.com/gruntjs/grunt-contrib-sass

on package json: insert this dependencies:

"grunt-contrib-concat": "*",
"grunt-contrib-cssmin": "*",
"grunt-contrib-uglify": "*",
"grunt-contrib-uglify": "*",

on gruntfile.js insert these blocks bellow:

load the tasks:

var tasks = [


            ,'grunt-contrib-concat'
            ,'grunt-contrib-uglify'
            ,'grunt-contrib-sass'
            ,'grunt-contrib-cssmin'

    ];

for css min:

cssmin: {
  target: {
    files: [{
      expand: true,
      cwd: 'release/css',
      src: ['*.css', '!*.min.css'],
      dest: 'release/css',
      ext: '.min.css'
    }]
  }
}

for Concat :

            var concat
            config.concat = concat = {};

            concat.dev = {
                files: {
                    "public/myapp.development.js": [
                        "with-bootstrap/public/js/vendor"
                        ,"with-bootstrap/public/js/**/*.js"
                    ]
                }
            };

for uglify:

config.uglify = {dist: {
                options: {sourceMap:"public/myapp.production.js.map"}
                ,files: {
                    "public/myapp.production.js": ["public/myapp.development.js"]
                }
            }}

I hope this helped you.