grunt compressed js file

grunt is a node in a very good tool for managing the project, which allows you to manage the entire project, to avoid a lot of repetitive work such as mergers, compression, check grammar.

Use grunt must first install node environment, nodejs official website http://nodejs.org/ can choose to download the appropriate node version.

Be installed after the installation nodejs grunt success. (Example for the windows version nodejs)

nodejs 0.6 or later installed automatically npm package management tool, if you nodejs version 0.6 please download and install npm package manager.

After a successful installation npm install grunt-cli (grunt-cli installation is represented by the command line interface grunt)

Run npm install grunt-cli -g (g represents the global installation parameter.)

 The following message appears after the installation is complete

 

If you are unsure whether a successful installation can run grunt --version

   

After successful installation of the version information grunt-cli appears.

 

Run the command npm install grunt -g

 

The following message appears after successful operation

 

 

Run the command Npm install grunt-init (optional) grunt-init scaffolding is a tool intended to build the profile of package.json npm.

After creating their own projects in the appropriate directory in order to facilitate the use of the test project name my_project

Add two test source files

Creating package.json file in the root directory of the project

 

{
"name": "my_project", 
"version": "0.1.0",
"basename":"src", //项目路径
"devDependencies": {
"grunt": "~*",
"grunt-contrib-concat": "^0.5.0",
"grunt-contrib-jshint": "^0.10.0",
"grunt-contrib-uglify": "^0.6.0"
}
}

Referring to the parameters described package.json https://www.npmjs.org/doc/files/package.json.html

Run npm install (grunt loaded package will be needed for this project)

Root directory folder will appear node_modules grunt and the corresponding plug-in package.

As already stated in package.json grunt module used, installation is also possible to use npm.

npm install grunt-contrib- <modules> (widget name) --save-dev (write package.json). After everything installed before running Npm install

 

Creating Gruntfile.js (Gruntfile.js is grunt profile)

General wording gruntfile.js file is:

modules.exports = function(grunt){
   grunt.initConfig({
       Load Module Name: {} the module configuration information corresponding to  
   }); 

   grunt.loadNpmTasks (module);   
   grunt.resigsterTask ( 'default / task name' , [module 1, module 2 ....]);
};


 Grunt.initConfig: parameter defines the various modules, each entry corresponding to a member of a module of the same name. 

grunt.loadNpmTasks: loaded modules required tasks. 

grunt.registerTask: define specific tasks. The first parameter is the name of the task, the second parameter is an array, it indicates that the module This task requires sequential use. default task name indicates, if you enter commands directly grunt, not followed by any parameters, then the module called;

Examples are as follows

module.exports = function(grunt) {
  var pkg = grunt.file.readJSON('package.json');

  grunt.initConfig({
    pkg: pkg,
     concat: {
            domop: {
                src: ['<%= pkg.basename %>/*.js'],
                dest: 'dest/domop.js'
            }
        },
    uglify: {
      options: {
        banner:"\n",
        mangle:false //mangle 为是否替换变量，false时不替换变量，默认替换。还可为数组 mangle: {except: ['jQuery', 'Backbone']}此时文件中遇到jQuery,Backbone则不进行替换
　　//详情见 https://github.com/gruntjs/grunt-contrib-uglify

},

         Files: {
              'dist / main.js': [ '<% =% concat.dist.dest>'] // the merged document directly to the compressed and designated main.js
          }

    }
  });
  //载入concat和uglify插件，分别对于合并和压缩
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');

    //注册任务
    grunt.registerTask('default', ['concat', 'uglify']);
};

Wherein: package.json the basename, may be directly defined in gruntFile. js used as

After each plug-in variables can be after the file path configurations such as those used gruntfile.js src: [ '. <% = Basename%> / * js'] format. 

If there are multiple paths project, you can also edit files separately, create dynamic route details, see http://www.w3ctech.com/topic/130 

merged plug-in parameter linking https://github.com/gruntjs/grunt-contrib-concat 

other plug-ins and features see the official website grunt 
grunt official website address is: http: //www.gruntjs.org/docs/sample-gruntfile.html

Reproduced in: https: //www.cnblogs.com/mole/p/4013110.html