grunt gulp

grunt:

压缩代码，合并代码，检测代码书写规范...

前端自动化工具

构建项目

官网：http://gruntjs.com/

中文官网：http://www.gruntjs.net/

插件地址：http://gruntjs.com/plugins

基于：node

给grunt发任务，让他做什么

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

使用流程：

1.安装grunt的命令环境

npm install -g grunt-cli

验证grunt已安装

grunt -version

2.需要准备两个文件：（名字不能乱叫）

Gruntfile.js  编写任务(手动创建)

package.json 工程文件（npm init    一路回车）

3.编写具体任务（在Gruntfile里写）

module.exports=function(grunt){

}

4.运行任务

找到Gruntfile这个js所在目录

执行命令： grunt

5.安装本地grunt

npm install grunt

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

压缩一个js：

*任务->通过插件(模块)

关于grunt插件的一个分类：

1.加星的是grunt团队自己开发

2.由第三方编写

（能用官方的就用官方的）

引用：contrib-uglify

使用：  自觉在前面加一个grunt

编写具体任务的格式：

主任务名:{

子任务名:{},

子任务名2:{},

子任务名3:{},

子任务名4:{}

}

运行grunt任务：

1.grunt

2.grunt 主任务名

3.grunt 主任务名:子任务名

配置选项：

options: {

mangle: false

},

总结：

1.module.exports=function(grunt){});

2.在官网上找到对应的插件，复制下来下载后执行第三步

3.导入模块

grunt.loadNpmTasks('模块名称');

3.配置具体任务

grunt.initConfig({

uglify:{

a:{

options: {

mangle: false

},

src:'src/a.js',//源文件地址

dest:'dest/a.min.js'//目标文件

},

b:{

src:'src/jquery-3.1.1.js',//源文件地址

dest:'dest/jquery-3.1.1.min.js'//目标文件

}

}

});

js分开压缩

4.注册一个默认任务

grunt.registerTask('default',['uglify','','']);

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

通用选项：

src 源文件地址

dest 目标地址

expand 使分开

cwd  当前工作目录

配置任务，可以使用一些通配符（正则）

* 所有文件

** 任何目录

默认情况下，压缩并且合并了

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

合并css：

插件（模块）：

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

压缩css

npm install grunt-contrib-cssmin

css压缩

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

压缩html:

npm install grunt-contrib-htmlmin

选项配置：

options: {

removeComments: true, //删除注释

collapseWhitespace: true//删除空格

},

html压缩

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

压缩图片：

npm install grunt-contrib-imagemin

image压缩

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

监听模块：

npm install grunt-contrib-watch

用法：

任务名:{

files:监听哪些文件发生变动

tasks：运行哪些任务

}

监听压缩

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

一些常见模块：

grunt-contrib-watch 监听变化

grunt-contrib-uglify 压缩js

grunt-contrib-cssmin 压缩css

grunt-contrib-htmlmin 压缩html

grunt-contrib-imagemin 压缩图片

grunt-contrib-concat 合并文件

grunt-contrib-clean 删除文件以及文件夹

grunt-contrib-copy 复制东西

grunt-contrib-jshint 检测js语法代码

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

打包一个真正的项目：

压缩各个文件

js

css

html

压缩图片：

img

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

package.json  工程文件

1:手动创建：

{

'name':'application-name',

'version':'0.0.1'

}

2.npm init  初始化一个项目

一路回车

用处：告诉我们整个项目的情况

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

安装模块：

1.npm install 模块名

把此模块，安装到本项目目录中

2.npm install 模块名 -save

不仅会把模块，安装到本目录，而且会写入到package.json文件里面，写到dependencies选项里面

3.npm install 模块名 -save-dev  (推荐)

不仅会把模块，安装到本目录，而且会写入到package.json文件里面，写到dependencies选项里面

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

同事拿到你的代码后：（不给他插件）

1.npm install

2.grunt

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

玩grunt的时候一定一定要注意目录名称（比如说括号不能用）

———————————————————————————————————————————

gulp和grunt形式都差不多

gulp的监听是内有的所以就不用再单独去下载。

gulp1 gulp2