Grunt的初级应用

时间 2019-11-22

标签 grunt 初级应用栏目 Node.js 繁體版

原文原文链接

Grunt是什么呢?css

Grunt是JavaScript世界的构建工具.为何要用构建工具?一句话:自动化。对于须要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具能够减轻你的劳动，简化你的工做。当你在 Gruntfile 文件正确配置好了任务，任务运行器就会自动帮你或你的小组完成大部分无聊的工做。html

为何要使用Grunt?web

Grunt生态系统很是庞大，而且一直在增加。因为拥有数量庞大的插件可供选择，所以，你能够利用Grunt自动完成任何事，而且花费最少的代价。若是找不到你所须要的插件，那就本身动手创造一个Grunt插件，而后将其发布到npm上吧。npm

Grunt和 Grunt 插件是经过 npm 安装并管理的，npm是 Node.js 的包管理器。svg

Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用。；奇数版本号的 Node.js 被认为是不稳定的开发版。grunt

在安装 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']);
}

今天因为时间仓促就不加注释了,但愿各位原谅,可是我相信以大家聪明的大脑也是能够看懂的,再见了.