grunt 使用教程及步骤

---

入门教程

grunt 是一套前端自动化构建工具，一个基于 NodeJs 的命令行工具，它是一个任务运行器，配合器丰富强大的插件

全局安装 grunt-cli

npm install -g grunt-cli

安装 grunt

npm install grunt --save-dev

配置 Gruntfile.js 配置文件（注意首字母大写）

插件分类

• grunt 团队贡献的插件：插件名大都以 contrib- 开头
• 第三方提供的插件：大都不以 contrib- 开头

常用插件

grunt-contrib-clean : 清除文件（打包处理生成的）
grunt-contrib-concat : 合并多个文件的代码到一个文件中
grunt-contrib-uglify : 压缩 js 文件
grunt-contrib-jshint : javascript 语法错误检查
grunt-contrib-cssmin : 压缩/合并 css 文件
grunt-contrib-html : 压缩 html 文件
grunt-contrib-imagemin : 压缩图片文件（无损）
grunt-contrib-copy : 复制文件、文件夹
grunt-contrib-watch : 实时监控文件变化、调用相应的任务重新执行

---

合并 js —— 使用 grunt-contrib-concat

安装

npm install grunt-contrib-concat --save-dev

在 Gruntfile.js 配置

module.exports = function(grunt) {

    // 初始化配置 grunt 任务
    grunt.initConfig({
        concat: {
            options: {
              separator: ';',
            },
            dist: {
              src: ['src/js/*.js'],  // *.js 表示所有的js包
              dest: 'build/js/build.js',
            },
        },
    });
  
    // 加载包含 "uglify" 任务的插件。 当grunt任务执行时加载对应的任务插件
    grunt.loadNpmTasks('grunt-contrib-concat');
  
    // 注册默认被执行的任务列表。  
    grunt.registerTask('default', ['concat']);
  
  };

执行 grunt concat 命令

grunt concat

生成 build/js/build.js 文件，即是 src/js 中所有 js 文件的合并

---

压缩 js —— 使用 grunt-contrib-uglify

安装

npm install grunt-contrib-uglify --save-dev

在 Gruntfile.js 配置

module.exports = function(grunt) {

    // 初始化配置 grunt 任务
    grunt.initConfig({
        concat: {
            options: {
              separator: ';',
            },
            dist: {
              src: ['src/js/*.js'],  // *.js 表示所有的js包
              dest: 'build/js/build.js',
            },
        },
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
           options: {
           banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
            '<%= grunt.template.today("yyyy-mm-dd") %> */'
           },
           build: {
              files: {
                  'build/js/build.min.js': ['build/js/build.js']   // 将合并后的build/js/build.js文件 压缩成 build.min.js
              }
           }
        }
    });
  
    // 加载包含 "uglify" 任务的插件。 当grunt任务执行时加载对应的任务插件
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
  
    // 注册默认被执行的任务列表。   执行任务是同步的
    grunt.registerTask('default', ['concat','uglify']);
    // 注意：为了简便，此行代码的作用为：可直接输入命令 grunt，就可以执行concat 和 uglify 的操作
    // 并且按顺序执行'concat','uglify'
  };

执行 grunt uglify 命令

grunt uglify

生成 build/js/build.min.js 文件，即是 build/js/build.js 的压缩文件

---

js 语法检查 —— 使用 grunt-contrib-jshint

安装

npm install grunt-contrib-jshint --save-dev

新建一个配置文件 .jshintrc

{
  "curly": true,
  "eqnull": true,
  "eqeqeq": true,
  "expr": true,
  "immed": true,
  "newcap": true,
  "noempty": true,
  "noarg": true,
  "regexp": true,
  "browser": true,
  "devel": true,
  "node": true,
  "boss": true, 
  "globals": {
    "jQuery": true
  }
  // 不能使用未定义的变量
  "undef": true,
  // 语句后面必须有分号
  "asi": false,
  // 预定义不检查的全局变量
  "predef": ["define", "Bmap", "vue", "angular"]
} 

在 Gruntfile.js 配置

module.exports = function(grunt) {

    // 初始化配置 grunt 任务
    grunt.initConfig({
        concat: {
            options: {
              separator: ';',
            },
            dist: {
              src: ['src/js/*.js'],  // *.js 表示所有的js包
              dest: 'build/js/build.js',
            },
        },
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
           options: {
           banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
            '<%= grunt.template.today("yyyy-mm-dd") %> */'
           },
           build: {
              files: {
                  'build/js/build.min.js': ['build/js/build.js']   // 将合并后的build/js/build.js文件 压缩成 build.min.js
              }
           }
        },
        jshint: {
            options: {
                jshintrc : '.jshintrc'  // 上一个步骤新建的配置文件            
            },
            build : ['Gruntfile.js','src/js/*.js']  // 指定检查的文件        
        }
    });
  
    // 加载包含 "uglify" 任务的插件。 当grunt任务执行时加载对应的任务插件
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-jshint');
  
    // 注册默认被执行的任务列表。   执行任务是同步的
    grunt.registerTask('default', ['concat','uglify','jshint']);
    // 注意：为了简便，此行代码的作用为：可直接输入命令 grunt，就可以执行concat 和 uglify 的操作
    // 并且按顺序执行'concat','uglify','jshint'
  };

执行 grunt 命令

 // 注意：为了简便，此行代码的作用为：可直接输入命令 grunt
 grunt

---

合并压缩css —— 使用 grunt-contrib-cssmin

安装

npm install grunt-contrib-cssmin --save-dev

在 Gruntfile.js 配置

module.exports = function(grunt) {

    // 初始化配置 grunt 任务
    grunt.initConfig({
        concat: {
            options: {
              separator: ';',
            },
            dist: {
              src: ['src/js/*.js'],  // *.js 表示所有的js包
              dest: 'build/js/build.js',
            },
        },
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
           options: {
           banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
            '<%= grunt.template.today("yyyy-mm-dd") %> */'
           },
           build: {
              files: {
                  'build/js/build.min.js': ['build/js/build.js']   // 将合并后的build/js/build.js文件 压缩成 build.min.js
              }
           }
        },
        jshint: {
            options: {
                jshintrc : '.jshintrc'  // 上一个步骤新建的配置文件            
            },
            build : ['Gruntfile.js','src/js/*.js']  // 指定检查的文件        
        },
        cssmin: {
          options: {
                mergeIntoShorthands: false,
                roundingPrecision: -1
          },
          target: {
                files: {
                      'build/css/build.min.css': [src/css/*.css]
                }
           }
        }
    });
  
    // 加载包含 "uglify" 任务的插件。 当grunt任务执行时加载对应的任务插件
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
  
    // 注册默认被执行的任务列表。   执行任务是同步的
    grunt.registerTask('default', ['concat','uglify','jshint',,'cssmin']);
    // 注意：为了简便，此行代码的作用为：可直接输入命令 grunt，就可以执行concat 和 uglify 的操作
    // 并且按顺序执行'concat','uglify','jshint','cssmin'
  };

执行 grunt 命令

 // 注意：为了简便，此行代码的作用为：可直接输入命令 grunt
 grunt

---

watch 监视实现自动打包编译

安装

npm install grunt-contrib-watch --save-dev

在 Gruntfile.js 配置

module.exports = function(grunt) {

    // 初始化配置 grunt 任务
    grunt.initConfig({
        concat: {
            options: {
              separator: ';',
            },
            dist: {
              src: ['src/js/*.js'],  // *.js 表示所有的js包
              dest: 'build/js/build.js',
            },
        },
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
           options: {
           banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
            '<%= grunt.template.today("yyyy-mm-dd") %> */'
           },
           build: {
              files: {
                  'build/js/build.min.js': ['build/js/build.js']   // 将合并后的build/js/build.js文件 压缩成 build.min.js
              }
           }
        },
        jshint: {
            options: {
                jshintrc : '.jshintrc'  // 上一个步骤新建的配置文件            
            },
            build : ['Gruntfile.js','src/js/*.js']  // 指定检查的文件        
        },
        cssmin: {
          options: {
                mergeIntoShorthands: false,
                roundingPrecision: -1
          },
          target: {
                files: {
                      'build/css/build.min.css': [src/css/*.css]
                }
           }
        },
        watch: {  
            scripts: {    
                   files: ['src/js/*.js','src/css/*.css'],    
                   tasks: ['concat','uglify','jshint','cssmin'],    
                   options: {      
                       spawn: false,    // false:变量更新  true:全量更新 
                   },  
             },
         },
    });
  
    // 加载包含 "uglify" 任务的插件。 当grunt任务执行时加载对应的任务插件
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-watch');
  
    // 注册默认被执行的任务列表。   执行任务是同步的
    grunt.registerTask('default', ['concat','uglify','jshint',,'cssmin']);
    // 注意：为了简便，此行代码的作用为：可直接输入命令 grunt，就可以执行concat 和 uglify 的操作
    // 并且按顺序执行'concat','uglify','jshint','cssmin'
  };
   // 上线的项目无需监听，只有在开发时使用， 为了开发方便我们可以自己注册一个任务执行列表用于开发
    grunt.registerTask('myWatch',['default','watch'])
    // 开发时执行命令 grunt myWatch
    // 打包上线时执行 grunt