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