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用法基本同样，依客户习惯而使用。