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