Codes►前端

大前端

grunt

一丶前言

二丶安装

安装 Node.js

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

安装 Grunt-cli

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

三丶文件结构

1
2
3
4
5
6
7
8
-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文件夹。例如：

1
2
3
4
.sass-cache
.DS_Store
node_modules
doc

package.json

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

  1. 可以使用npm init生成，期间填写项目名称
  2. 复制已有文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
  "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中最重要的配置文件。主要分成 任务配置代码、插件加载代码、任务注册代码。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{
  "name": "grunt_test",
  "version": "0.0.1",
  "description": "学习 grunt",
  "repository": {
    "type": "git",
    "url": "#"
  },
  "author": "loveit",
  "license": "MIT",
  "bugs": {
    "url": ""
  },
  "homepage": "",
  "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"
  }
}
  1. Gruntfile.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
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