概述
grunt
1.安装CLI
在继续学习前，你需要先将Grunt命令行（CLI）安装到全局环境中。安装时可能需要使用sudo（针对OSX、*nix、BSD等系统中）权限或者作为管理员（对于Windows环境）来执行以下命令。
npm install -g grunt-cli
上述命令执行完后，grunt 命令就被加入到你的系统路径中了，以后就可以在任何目录下执行此命令了。
注意，安装grunt-cli并不等于安装了 Grunt！Grunt CLI的任务很简单：调用与Gruntfile在同一目录中 Grunt。这样带来的好处是，允许你在同一个系统上同时安装多个版本的 Grunt。
这样就能让多个版本的 Grunt 同时安装在同一台机器上。
2.假定Grunt CLI已经正确安装，并且已经有一份配置好package.json 和 Gruntfile 文件的项目了，接下来就很容易拿Grunt练手了：
a.将命令行的当前目录转到项目的根目录下。
b.执行npm install命令安装项目依赖的库。
c.执行 grunt 命令。
OK，就是这么简单。还可以通过grunt --help 命令列出所有已安装的Grunt任务（task），但是一般更建议去查看项目的文档以获取帮助信息。
参考官网：
http://www.gruntjs.net/getting-started
grunt 插件：
1.
grunt-contrib-clean (v0.5.0)
清理文件或文件夹
2.
grunt-contrib-coffee (v0.7.0)
编译coffee文件为javascript文件
3.
grunt-contrib-compass (v0.6.0)
采用compass方式编译sass文件
4.
grunt-contrib-compress (v0.5.2)
压缩文件或文件夹
5.
grunt-contrib-concat (v0.3.0)
文件拼接（可将多个文件合并到一个文件）
6.
grunt-contrib-copy (v0.4.1)
复制文件或文件夹
7.
grunt-contrib-cssmin (v0.6.2)
压缩CSS文件
8.
grunt-contrib-csslint (v0.1.2)
CSS文件语法检查
9.
grunt-contrib-htmlmin (v0.1.3)
压缩HTML文件
10.
grunt-contrib-imagemin (v0.3.0)
PNG、JPEG图片压缩（保证质量压缩）
11.
grunt-contrib-jshint (v0.6.4)
JS语法检查
12.
grunt-contrib-less (v0.7.0)
将LESS编译成CSS
13.
grunt-contrib-sass (v0.5.0)
把SASS编译成CSS
14.
grunt-contrib-stylus (v0.8.0)
把Stylus文件编译成CSS
15.
grunt-contrib-uglify (v0.2.4)
用UglifyJS方式压缩JS文件
16.
grunt-contrib-watch (v0.5.3)
实时监测文件的增删改状态，状态改变时自动执行预定义任务
17.
grunt-contrib-yuidoc (v0.5.0)
编译YUIDoc文档
18. grunt-contrib-connect (v0.5.0)
启动一个web服务器连接
19.
grunt-contrib-jade (v0.8.0)
编译Jade模版
20.
grunt-contrib-handlebars (v0.5.11)
预编译Handlebars模板到JST文件（Handlebars：结合json数据的模版）
21.
grunt-contrib-jasmine (v0.5.2)
通过PhantomJS运行jasmine（PhantomJS：JS单元测试）
22.
grunt-contrib-jst (v0.5.1)
预编译Underscore模板到JST文件（Underscore：JS工具库）
23.
grunt-contrib-nodeunit (v0.2.1)
运行Nodeunit单元测试（NodeUnit：Node.js单元测试框架）
24.
grunt-contrib-qunit (v0.3.0)
用PhantomJS对象运行QUnit单元测试
25.
grunt-contrib-requirejs (v0.4.1)
用r.js优化RequireJS项目
项目目录
Gruntfile.js 配置信息：(这是一个简单的配置信息，所有的css和js列出来进行压缩或者合并)
module.exports = function(grunt) {
//配置参数
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';'
},
dist: {
src: [
"js/jquery-1.10.1.min.js",
"js/materialize.min.js",
"js/jquery.raty.min.js",
"js/drawingboard.min.js",
"js/md5.min.js",
"js/Global.js",
"js/peer.min.js",
"js/mobiscroll.core-2.5.2.js",
"js/mobiscroll.core-2.5.2-zh.js",
"js/mobiscroll.datetime-2.5.1.js",
"js/mobiscroll.datetime-2.5.1-zh.js",
"js/mobiscroll.android-ics-2.5.2.js",
"js/main.js",
"js/editQuestion.js",
"js/Render.js",
"js/SocketPlayer.js",
"js/AjaxUtil.js",
"js/Utils.js",
"js/label.js",
"js/creatPeer.js",
"js/base.js",
"js/getName.js",
"js/bundle.js",
"js/Camera.js"
],
dest: "assets/js/index.js"
}
},
uglify: {
options: {
},
dist: {
files: {
'assets/js/index.min.js': ['assets/js/index.js']
}
}
},
cssmin: {
options: {
keepSpecialComments: 0,
stripBanners: true
},
compress: {
files: {
'assets/css/index.css': [
"css/materialize.min.css",
"css/bootstrap.min.css",
"css/common.css",
"css/style.css",
"css/mobiscroll.android-ics-2.5.2.css",
"css/icon.css",
"css/mobiscroll.core-2.5.2.css"
]
}
}
},
cachebreaker: {
dev: {
options: {
match: ['assets/js/index.min.js', 'assets/css/index.css'],
},
files: {
src: ['index.html']
}
}
}
// jshint: {
// all: ['assets/js/index.js']
// }
});
//载入concat和uglify插件，分别对于合并和压缩
grunt.loadNpmTasks('grunt-contrib-concat'); // 用于js合并
grunt.loadNpmTasks('grunt-contrib-cssmin');// 用于合并css
// grunt.loadNpmTasks('grunt-contrib-jshint');//是一个用于JavaScript静态语法检查的工具，它会帮助开发者在进行较为严格的语法检查
grunt.loadNpmTasks('grunt-contrib-uglify');// 用于压缩
grunt.loadNpmTasks('grunt-cache-breaker');// 用于控制浏览器缓存
//注册任务
grunt.registerTask('default', ['concat', 'uglify', 'cssmin', 'cachebreaker']);
}
最后
以上就是留胡子小白菜为你收集整理的grunt的简单使用的全部内容，希望文章能够帮你解决grunt的简单使用所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复