grunt

通过配置Grunt的一系列grunt-contrib-插件，实现前端自动化功能。

自动化。对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。当你在 Gruntfile 文件正确配置好了任务，任务运行器就会自动帮你或你的小组完成大部分无聊的工作。

教程

Gruntfile.js

//grunt 配置文件命名 Gruntfile.js
module.exports = function(grunt) {//grunt wrap 包管理函数

  grunt.initConfig({//初始化配置grunt
    pkg: grunt.file.readJSON('package.json'),//获得通过npm init创建的package.json里面的项目名称 grunt
    concat: {//拼接合并代码 //配置 concat 教程:https://github.com/gruntjs/grunt-contrib-concat
      options: {
        separator: ';'// 定义一个用于插入合并输出文件之间的字符
      },
      dist: {
        src: ['src1/**/*.js'],//拼接合并 src1文件夹下所有文件夹下的所有js文件
        dest: 'dist/<%= pkg.name %>.js'//拼接到dist文件下，拼接后的文件通过grunt模版引擎拼接名为：grunt.js
      }
    },
    uglify: {//压缩代码编程一行去空格等。 教程：https://github.com/gruntjs/grunt-contrib-uglify
      options: {//banner在压缩代码中配合grunt自带的模版引擎添加头部信息，这里是项目名称加日期 /*! grunt 06-02-2018 */
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
      },
      dist: {
        files: {//压缩concat插件拼接好的grunt.js文件到dist文件下，名为grunt.min.js
          'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
        }
      }
    },
    qunit: {//单元测试，test文件下所有文件下的所有html文件运行检查是否有错误。自动跑一边，那个文件有错误就跑出错误
            //教程：https://github.com/gruntjs/grunt-contrib-qunit
      all: ['test/**/*.html']
    },
    jshint: {//检查Gruntfile.js src1下的所有js文件，test下的所有js文件，是否有语法标记错误。语法风格是否统一，入js语句结尾是否有缺少分号。
             //教程 https://github.com/gruntjs/grunt-contrib-jshint 
      files: ['Gruntfile.js','src1/**/*.js','test/**/*.js'],
      options: {
        reporterOutput:"",//如果 msg.log 则将输出到文件
        eqnull:true,
        browser: true,           
        devel: true,
        globals: {
          jQuery: true,
          console: true,
          module: true,
          document: true
        }
      }
    },
    watch: {//监听代码变化，只要 files: ['Gruntfile.js','src1/**/*.js','test/**/*.js'] 变化，重新执行jshint和qunit tast任务。
      files: ['<%= jshint.files %>'],
      tasks: ['jshint', 'qunit']
    } 
  });
  //引入插件
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-qunit');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-concat');
  //创建task 任务 
  //运行 grunt test 执行 jshint qunit 检查语法 单元测试
  grunt.registerTask('test', ['jshint', 'qunit']);
  //运行 grunt 或 grunt default 执行 语法检查  单元测试  代码合并   代码压缩   监听变化
  grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify','watch']);

};

pakege.json

在pakege.json文件夹下，运行npm init 安装依赖包

{
  "name": "grunt",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "grunt": "^1.0.1",
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-connect": "^1.0.2",
    "grunt-contrib-qunit": "^2.0.0",
    "grunt-contrib-watch": "^1.0.0"
  },
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "^0.10.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-qunit": "^2.0.0",
    "grunt-contrib-uglify": "^0.5.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

项目目录结构

grunt文件夹
- dist文件夹
  - grunt.js
  - grunt.min.js
- src1文件夹
  - js1文件夹
    - test01.js
  - js2文件夹
    - test02.js
- test文件夹
  - html文件夹
    - index.html
  - html01文件夹
    - index01.html
  - libs文件夹
    - qunit.js
- Gruntfile.js
- package.json

进行单元测试的时候在html文件中一定要引入libs下的qunit.js，否则单元测试会报错。其他文件内容随意。这里举例index.html和test01.js

qunit.js

qunit.js下载地址
http://code.jquery.com/qunit/qunit-1.17.1.js
qunit单元测试报错解决方法
https://www.cnblogs.com/sapho/p/5310773.html

test01.js

var a = 5;
var abcd_1 = 7;
var myPlane = null;
function myFunc(){
	console.log("test01.js");
}
var a = 5;
var div = document.getElementById("div");
var arr = [2,4,6,7,"23"];
console.log("你好"); 

var aa1 = "新增内容";
console.log(aa1);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- <script src="http://code.jquery.com/qunit/qunit-1.17.1.js"></script> -->
<script src="../libs/qunit.js"></script>

</head>
<body>
	<div id="div"></div>
<script>

	console.log("index111")
	// var a b =5;
	console.log("haha")
	var div = document.getElementById("div")
	div.innerHTML = "hello"
	var arr = [12,6,9,3,8,9]
	var max = arr[0]
	for(var i=0;i<arr.length;i++){
		if(max<arr[i]){
			max = arr[i]
		}
	}
	console.log(max);
</script>
</body>
</html>

来源：CSDN

作者：wanda000

链接：https://blog.csdn.net/wanda000/article/details/104016210

标签

qunit

前端自动化工具 Grunt 总结