Grunt-将多个文件缩小/处理为一个

Question

I'm new to Grunt and I'm lost in all it's option. I'm trying to do two things :

• Minify all my js files into one each time I change one of them
• Process a specific scss file when one of my scss file is changed

Here is the current Gruntfile.js I got :

module.exports = function (grunt) {
    grunt.initConfig({

    // define source files and their destinations
    uglify: {
        files: { 
            src: 'js/*.js',  // source files mask
            dest: 'jsm/',    // destination folder
            expand: true,    // allow dynamic building
            flatten: true,   // remove all unnecessary nesting
            ext: '.min.js'   // replace .js to .min.js
        }
    },
    watch: {
        js:  { files: 'js/*.js', tasks: [ 'uglify' ] },
    }
});

// load plugins
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-uglify');

// register at least this one task
grunt.registerTask('default', [ 'uglify' ]);


};

How could I achieve this?

Answer 1

Use the grunt-contrib-concat

grunt.initConfig({    
  concat: {
    dist: {
      src: ['files/**.min.js'],
      dest: 'project.js',
    },
  }
});

You should wrap all you files in an anonymous function and define variables using var so you do not get variable conflicts between files.

(function(){

  // foo has function scope
  var foo = 3; 
  console.log(foo);

  // FOO is a global variable and 
  // can be accessed between files
  window.FOO = 3;
  console.log(FOO);

}).call()