grunt的简单使用

一丶前言

工具使用

推荐使用Hbuilder X ,国产ide，这个版本有很多好用的node插件。
alt + c 打开终端，可以方便的执行命令行操作。
其他很多IDE例如sublime也可以，装上对应插件便可。

二丶安装

安装 Node.js

Grunt 依赖 Node.js 所以在安装之前确保你安装了 Node.js。然后开始安装 Grunt。
前往 Node.js官方下载页面 下载安装。

安装 Grunt-cli

使用npm安装 Grunt-cli
npm install -g grunt-cli

三丶文件结构

-src
-dist
-doc
-scss
-test
.gitignore
Gruntfile.js
package.json

文件（夹）名	描述	备注
.gitignore	git忽略文件	忽略node_modules 和
Gruntfile.js	配置grunt语法文件
package.json	Node.js 来描述一个项目的文件
src	存放源码文件目录
dist	存放最终产出文件	编译后或者压缩后的代码
doc	jsdoc导出的文件夹
scss	存放scss文件
test	存放测试文件
build
dest	压缩之后的源码文件	和src配套出现

.gitignore

git忽略文件，主要忽略node_modules文件夹。例如：

.sass-cache
.DS_Store
node_modules
doc

package.json

package.json文件其实是 Node.js 来描述一个项目的文件,生成方式有2种：

1. 可以使用npm init生成，期间填写项目名称
2. 复制已有文件

{
  "name": "gruntxx",
  "version": "0.0.1",
  "description": "学习 grunt",
  "repository": {
    "type": "git",
    "url": "https://gitee.com/zy_2016/gruntxx.git"
  },
  "author": "loveit",
  "license": "MIT",
  "bugs": {
    "url": "https://gitee.com/zy_2016/gruntxx.git/Issues"
  },
  "homepage": "https://gitee.com/zy_2016/gruntxx.git",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-concat": "^0.4.0",
    "grunt-contrib-connect": "^0.8.0",
    "grunt-contrib-jshint": "^0.10.0",
    "grunt-contrib-sass": "^0.7.4",
    "grunt-contrib-uglify": "^0.5.0",
    "grunt-contrib-watch": "^0.6.1"
  }
}

其中"devDependencies": {} 记录该项目依赖的所有插件。

Gruntfile.js

Gruntfile.js是使用grunt中最重要的配置文件。主要分成 任务配置代码、插件加载代码、任务注册代码。

grunt.initConfig({
  //读取package.json文件
  pkg: grunt.file.readJSON('package.json'),
  //任务配置代码
  uglify: {
    options: {
      banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
    },
    build: {
      src: 'src/<%= pkg.name %>.js',
      dest: 'build/<%= pkg.name %>.min.js'
    }
  }
  //插件加载代码
  grunt.loadNpmTasks('grunt-contrib-uglify');
  
  //任务注册代码
  grunt.registerTask('default', ['uglify']);
});

四丶简单demo

做一个demo完成 多文件合并,压缩js文件 这些功能。
可以clone gruntxxx 项目参考一下。

建立文档结构

1. dist 最终js文件
2. src 存放源代码
3. package.json

{
  "name": "grunt_test",
  "version": "0.0.1",
  "description": "学习 grunt",
  "repository": {
    "type": "git",
    "url": "https://gitee.com/zy_2016/gruntxx.git"
  },
  "author": "loveit",
  "license": "MIT",
  "bugs": {
    "url": "https://gitee.com/zy_2016/gruntxx.git"
  },
  "homepage": "https://gitee.com/zy_2016/gruntxx.git",
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "babel-eslint": "^8.0.0",
    "babel-preset-es2015": "^6.24.1",
    "grunt": "^1.0.3",
    "grunt-babel": "^8.0.0",
    "grunt-contrib-clean": "^2.0.0",
    "grunt-contrib-concat": "~0.3.0",
    "grunt-contrib-uglify": "^4.0.0",
    "grunt-contrib-watch": "^1.1.0",
    "grunt-jsdoc": "^2.3.0",
    "load-grunt-tasks": "^4.0.0"
  }
}

值得一提的是"devDependencies": {} 中的内容可以不填，使用 npm 安装 grunt及其插件 到当前项目，同时加上了 –save-dev 参数，表示会把刚安装的东西添加到 package.json 文件中。
例如 执行npm install grunt --save-dev [^1]

"devDependencies": {
  "grunt": "^0.4.5"
}

3. Gruntfile.js

module.exports = function(grunt) {
	grunt.initConfig({
		pkg: grunt.file.readJSON('package.json'),
		concat: {
			options: {
				separator: ';'
			},
			dist: {
				src: ['src/*.js'],
				dest: 'dist/global.js'
			}
		},
		uglify: {
			options: {
				banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - <%= grunt.template.today("yyyy-mm-dd") %> */'
			},
			build: {
				src: 'dist/global.js',
				dest: 'dist/<%=pkg.name%><%pkg.version%>.min.js'
			}
		},
		clean: {
			build: {
				src: ["dist/*"]
			}
		},
		watch: {
		  build:{
				files:['./global.js'],
				tasks:['jsdoc'],
				options:{
					spawn:false
				}
			}
		}
	});
	grunt.loadNpmTasks('grunt-jsdoc');
	grunt.loadNpmTasks('grunt-contrib-clean');
	grunt.loadNpmTasks('grunt-contrib-concat');
	grunt.loadNpmTasks('grunt-contrib-uglify');
	grunt.loadNpmTasks('grunt-contrib-watch');
	
	
	grunt.registerTask('cleandist', ['clean']);
	grunt.registerTask('default', ['concat', 'uglify']);
	
}

下载node_modules

使用npm install下载对应的node模块。

执行

使用grunt执行grunt.registerTask('default', ['concat', 'uglify']);中约定的任务。
使用grunt cleandist执行grunt.registerTask('cleandist', ['clean']);中约定的任务。

---

插件安装

1. npm install grunt-contrib-uglify --save-dev
2. npm install grunt-contrib-watch --save-dev
3. npm install grunt-babel --save-dev //–dev grunt-babel @babel/core @babel/preset-env
4. npm install load-grunt-tasks --save-dev
5. npm install grunt-contrib-concat --save-dev
6. npm install grunt-contrib-clean --save-dev
7. npm install grunt-jsdoc --save-dev