grunt前端自动化(压缩)工具

grunt非常强大的自动压缩代码，使用代码更加轻量、简洁，所以grunt是非常值得学习的。

安装grunt是基于nodeJS，打开cmd框，我们可以输入node -v 检测是否在node服务下

。

需要npm包管理工具安装grunt，检测npm参考上面，安装好是会提示版本号。

然后全局安装grunt输入命令： npm install grunt-cli -g 

 → 安装完成。

切到D盘创建一个存放grunt的文件夹，输入命令：npm install grunt。参考上面会有安装成功的提示。

依次安装好。输入： grunt --version

  grunt安装好了。

 

接下来就可以操作frunt压缩了O(∩_∩)O~

 1  //创建Gruntfile.js--->
 2 
 3 1.引入
 4 module.export(grunt){
 5 grunt.loadNpmTasks('grunt-contrib-uglify')//依赖插件
 6 
 7 2.设置任务
 8 grunt.initconfig({
 9     uglify:{
10         min:{
11             options:{
12             mangle:false
13        },
14             expand:true,(分开压缩)
15             cwd:'src',
16             src:'*.js',(文件的地址文件名)
17             dest:'dest',(压缩后的地址和文件名)
18             rename:funcion(dest,src){
19             return dest + '/' +src.replace('.js','.min.js');
20             }
21         }
22       }
23 })
24 //设置默认任务
25 grunt.registerTask('default',['uglify'])
26 }

//Gruntfile.js放在要压缩的代码同级目录下。

然后可以打开cmd，运行grunt 就可以看到压缩好的加min的代码了O(∩_∩)O~.

常用的的插件有

grunt.loadNpmTasks('grunt-contrib-uglify');//js压缩
grunt.loadNpmTasks('grunt-contrib-concat');//css合并
grunt.loadNpmTasks('grunt-contrib-cssmin');//css压缩
grunt.loadNpmTasks('grunt-contrib-htmlmin');//html压缩
grunt.loadNpmTasks('grunt-contrib-imagemin');//image压缩
grunt.loadNpmTasks('grunt-contrib-watch');//检测代码变化，无刷新压缩

grunt和gulp用法基本一样，依客户习惯而使用。

转载于:https://www.cnblogs.com/chw8/p/7082397.html