grunt代码压缩

grunt

官网：https://gruntjs.com/

下载：

优点：

使用方法

1、grunt它是基于node

判断node是否安装

2、装grunt的命令行

npm install -g grunt-cli

全局      命令行

3、检查是否安装成功

grunt --version

4、准备两个文件

package.json

工程文件（配置文件）

--------------

在node中下载模块的时候--save 保存在工程文件中

如果把项目给别人，npm install

--------------

有两种方法创建工程文件

1、手动创建

2、命令行自动创建

npm init

需要些一些项目相关的内容

注：name 除了grunt或者空（默认grunt）别写，其他随便

Gruntfile.js

注：首字母大写

配置你的任务

module.exports=function(grunt){

console.log(1);

};

运行任务：

进入gruntfile对应的文件夹，执行grunt

报错：没有发现本地的grunt

5、安装grunt

npm install grunt

-------------------

注：在grunt里有三种安装方式:

npm install grunt

npm install grunt --save

npm install grunt --save-dev 推荐

-------------------

6、编写任务

https://gruntjs.com/plugins

模块分两种：

contrib-XXX  grunt团队自己写的

XXX          个人编写的

7、编写流程

a)下载模块

npm install 模块名 --save-dev

压缩js：npm install grunt-contrib-uglify --save-dev

b)引入模块

grunt.loadNpmTasks('模块名')

c)配置具体的任务

grunt.initConfig({

/*主任务名：{  //主任务必须写模块名

子任务名：{ //子任务随便

src:要压缩的文件目录

dest:压缩后的文件目录

}

}*/

})

如果想多文件分开

expand:true,//确定分开压缩

cwd:'js/',//现在（当前要压缩文件的目录）

注意：

1、js在压缩的时候默认是破话压缩如果想不破坏

options: {

mangle: false

}

2、html

options: {

removeComments: true,//移出注释

collapseWhitespace: true//移出空白格

},

3、图片压缩的时候

*.{png,jpg,gif}

a: {  //次任务名

files: [{

expand: true,

cwd: 'src/',

src: ['**/*.{png,jpg,gif}'],

dest: 'dist/'

}]

4、监听模块：

watch:{//主任务名

a:{//子任务名

files:'css/index.css',

//你要监听的模块，

tasks:'cssmin'

//你要用到的任务

}

}

5、合并文件

grunt-contrib-concat

d)执行任务

       grunt 主任务名

                 主任务里面的子任务都会执行

         grunt 主任务名:子任务名

          grunt 想要这么执行，必须配置默认项

                    配置默认项：

                    grunt.registerTask('default',['任务名'])