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文件夹。例如：

.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

最后

以上就是甜蜜小馒头为你收集整理的grunt的简单使用的全部内容，希望文章能够帮你解决grunt的简单使用所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。