首页 > 代码库 > Grunt的初级应用
Grunt的初级应用
Grunt是什么呢?
Grunt是JavaScript世界的构建工具.为什么要用构建工具?一句话:自动化。对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。当你在 Gruntfile 文件正确配置好了任务，任务运行器就会自动帮你或你的小组完成大部分无聊的工作。
为什么要使用Grunt?
Grunt生态系统非常庞大，并且一直在增长。由于拥有数量庞大的插件可供选择，因此，你可以利用Grunt自动完成任何事，并且花费最少的代价。如果找不到你所需要的插件，那就自己动手创造一个Grunt插件，然后将其发布到npm上吧。
Grunt和 Grunt 插件是通过 npm 安装并管理的，npm是 Node.js 的包管理器。
Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用。；奇数版本号的 Node.js 被认为是不稳定的开发版。
在安装 Grunt 前，请确保当前环境中所安装的 npm 已经是最新版本，执行 npm update -g npm 指令进行升级（在某些系统中可能需要 sudo 指令）。
如果你已经安装了 Grunt，现在需要参考一些文档手册，那就请看一看 Gruntfile实例 和如何 配置任务吧。
在继续学习前，你需要先将Grunt命令行（CLI）安装到全局环境中。安装时可能需要使用sudo（针对OSX、*nix、BSD等系统中）权限或者作为管理员（对于Windows环境）来执行以下命令。
npm install -g grunt-cli
上述命令执行完后，grunt 命令就被加入到你的系统路径中了，以后就可以在任何目录下执行此命令了。
注意，安装grunt-cli并不等于安装了 Grunt！Grunt CLI的任务很简单：调用与Gruntfile在同一目录中 Grunt。这样带来的好处是，允许你在同一个系统上同时安装多个版本的 Grunt。
下面我们来看看具体的代码吧:
创建一个grunt的方法
module.exports=function(grunt){
引入你要干吗的一个插件
grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
grunt.loadNpmTasks(‘grunt-contrib-cssmin‘);
grunt.loadNpmTasks(‘grunt-contrib-concat‘);
grunt.loadNpmTasks(‘grunt-contrib-htmlmin‘);
grunt.loadNpmTasks(‘grunt-contrib-imagemin‘);
grunt.loadNpmTasks(‘grunt-contrib-jshint‘);
grunt.loadNpmTasks(‘grunt-contrib-watch‘);
grunt.initConfig({
uglify:{
yasuo:{
options:{
mangle:false
},
expand:true,
cwd:"development/abc",
src:‘*.js‘,
dest:‘a‘
}
},
cssmin:{
yasuo1:{
expand:true,
cwd:‘development/abc‘,
src:‘*.css‘,
dest:‘a‘
}
},
concat:{
hebing:{
src:"dest1/*.min.css",
dest: "dest4/he.css"
}
},
htmlmin: {
options: {
removeComments: true,//清除html中注释的部分
removeCommentsFromCDATA: true,
collapseWhitespace: true,//清空空格
collapseBooleanAttributes: true,//省略布尔值属性的值
removeAttributeQuotes: true,
removeRedundantAttributes: true,//清空所有的空属性
removeEmptyAttributes: true,//清除所有LINK标签上的type属性
removeOptionalTags: true //是否清除<html></html>和<body></body>标签
},
yasuo2: {
expand: true,
cwd: ‘development/abc‘,
src: ‘*.html‘,
dest: ‘a‘,
rename:function(dest2,html){
return dest2+‘/‘+html.replace(‘.html‘,‘.min.html‘);
}
}
},
imagemin:{
options:{
optimizationLevel: 3 //定义 PNG 图片优化水平
},
yasuo3: {
expand: true,
cwd: ‘development/images‘,
src: ‘*.{png,jpg,jpeg,gif,webp,svg}‘,
dest: ‘dest3‘
}
},
jshint:{
jiance:[
‘src/*.js‘
],
},
watch:{
jiant:{
files:[‘src/*.js‘,‘css/*.css‘,‘html/*.html‘,‘img/*.{png,jpg,jpeg,gif,webp,svg}‘,‘src/*.js‘],
tasks:[‘uglify‘,‘cssmin‘,‘concat‘,‘htmlmin‘,‘imagemin‘,‘jshint‘]
}
}
})
grunt.registerTask("default",[‘uglify‘,‘cssmin‘,‘concat‘,‘htmlmin‘,‘imagemin‘,‘jshint‘,‘watch‘]);
}
今天由于时间仓促就不加注释了,希望各位原谅,但是我相信以你们聪明的大脑也是可以看懂的,再见了.
Grunt的初级应用