在现代化的Web开发中，自动化构建和任务流是必不可少的一环。Gulp就是一个优秀的自动化构建工具，它可以让开发者通过编写简单的JavaScript代码，自动完成各种复杂的构建和任务流程，如代码压缩、文件合并、图片优化、CSS预处理等。Gulp相比于其他自动化构建工具，具有易于使用、灵活性高和扩展性强等优点，因此在Web开发中得到了广泛的应用。

依赖安装

• --save-dev：将所需的开发环境写入package.json中
• --save：将所需的生产环境（类库）写入bower.json中

创建项目

1.创建package.json

创建命令：npm init => 生成package.json

package.json参数（重点）

dependencies：指定项目运行所依赖的模块 ，生存环境，如类库（jq，angular）这类需要引入的文件，通常情况下放置在bower.json。

devDependencies：指定项目开发所需的模块，开发环境，如gulp，bower 这类开发需要的环境 。

2.项目目录下安装gulp（每次项目都需安装）

安装命令：npm install gulp --save-dev =>目录下生成node_modules

3.项目目录下安装bower（每次项目都需安装）

安装命令：npm install bower --save-dev

4.创建bower.json

创建命令：bower init =>生成bower.json

类库文件下载路径更换：

第一步：根目录下新建.bowerrc.json

第二步：在.bowerrc.json写入{ "directory" : "路径" }

常用Gulp工具

gulp-connect 开启服务器

js
 connect.server({
    host:'',//地址可不写，默认localhost
    port: 8080, //端口号，可不写，默认8000
    root: 'src/', //当前项目主目录
    livereload: true //自动刷新
  });
 connect.reload() //刷新页面

gulp-open 打开文件和URL

js
open({uri:'http://localhost:8080',app:''}) 

gulp-concat 合并文件

js
 concat('bower.min.js')

gulp-rename 重命名

js
rename('myaa.html')

gulp-uglify 压缩JS

gulp-minify-css 压缩CSS

gulp-minify-html 压缩HTML

gulp-imagemin 压缩图片

js
imagemin({
    progressive: true,//类型：Boolean 默认：false 无损压缩jpg图片
    svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox属性
    use: [pngquant()] //使用pngquant深度压缩png图片的imagemin插件
})