GULP
gulp是前端开发过程中对代码进行构建的工具她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。
gulp是基于Nodejs的自动任务运行器，她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。
gulp 和 grunt 非常类似，但相比于 grunt 的频繁 IO 操作，gulp 的流操作，能更快地更便捷地完成构建工作。
gulp 是基于note.js的首先确保自己已经安装了node.js
选装cnpm
npm插件都是在外国的服务器上，因为网络波动影响比较大。所以我们可以去淘宝对我们做了很大的贡献
网址 http://npm.taobao.org
#1.安装淘宝的镜像
他的命令是：npm install -g cnpm --registry=https://registry.npm.taobao.org
#2.生成项目描述文件 packge.json
cnmp init (可以代替 npm init)
（需要项目名称、版本号、描述、入口文件、运行命令、作者、证书---一直按回车键就够了）
#3.全局安装gulp
cnpm i [email protected] -g
**全局安装gulp**
**@3 代表了版本选择了第三代的版本 **
**i 即为 install**
**-g 即为 --global**
gulp -v //可以查看安装好的版本号
#4.当前目录内部安装gulp模块
cnpm i [email protected] -D
cnpm i [email protected] -S (二选一 不懂的话建议选S)
**-D 缩写 --save -dev 开发依赖**
**-S 缩写 --save 项目依赖 **
开发依赖：开发过程中需要使用到的依赖模块，项目上线时不需要的模块 ---代码格式校验模块
项目依赖： 项目上线仍然需要使用的模块
如果你不知道 你就写-S
#5.创建文件 gulpfile.js ,配置gulp；
```
const gulp = require(‘gulp‘)
```
接下来我们可以尝试用gulp做一些事情
##5.1创建一个index的html，使用gulp完成对index的赋值操作，复制到当前目录的dist目录内
```
gulp.task(‘copy-index‘,function(){
gulp.src(‘./index.html‘)
.pipe(gulp.dest(‘dist‘))
}
```
然后命令行执行 gulp copy-index 就会发现多出了一个dist目录
##5.2复制gulp/css/a.css和gulp/css/b.css
#5.2.1复制到gulp至dist/css
```
gulp.task("copt-csss",function(){
gulp.src("./css/**/*") //copy css文件夹以及文件夹内的文件
.pipe(gulp.dest("dist/css"))
})
```
命令行执行gulp copy-css
#5.2.2合并css文件
需要添加模块 cnpm i gulp-concat -s
```
const concat = require（"gulp-concat"）
gulp.task("copt-csss",function(){
gulp.src("./css/**/*")
.pipe(concat("main.css")) //合并
.pipe(gulp.dest("dist/css"))
```
#5.2.3压缩css
需要添加模块 cnpm i gulp-minify-css -s
```
const minifyCss = require("gulp-minify-css")
gulp.task("copt-csss",function(){
gulp.src("./css/**/*")
.pipe(concat("main.css"))
.pipe(minifyCss()) //压缩
.pipe(gulp.dest("dist/css"))
```
#5.2.4想要拿到压缩的 也想要未压缩的
需要添加模块 cnpm i gulp-rename -S
```
const rename = require("gulp-rename")
gulp.task("copt-csss",function(){
gulp.src("./css/**/*")
.pipe(concat("main.css"))
.pipe(gulp.dest("dist/css))
.pipe(minifyCss())
.pipe(rename("main.min.css"))
.pipe(gulp.dest("dist/css"))
```
##5.3复制js文件
###复制js文件
```
gulp.task("copy-js",()=>{
gulp.src("./js/**/*")
.pipe(gulp.dest("dist/js"))
}）
```
###合并js代码至dist/js
```
gulp.tast("copy-js",()=>{
gulp.src("./js/**/*")
.pipe(concat("main,js"))
.pipe(gulp.dest("dist/js"))
})
```
###压缩js
添加模块cnpm i gulp-uglify -S
压缩 js 模块
```
gulp.tast("copy-js",()=>{
gulp.src("./js/**/*")
.pipe("concat.js")
.pipe(uglify("main,js"))
.pipe(gulp.dest("dist/js"))
})
```
###合并压缩重命名js文件
```
gulp.tast("copy-js",()=>{
gulp.src("./js/**/*")
.pipe("concat（”main.js“）")
.pipe(gulp.dest("dist/js"))
.pipe(uglify()) //压缩js
.pipe(concat("main.min,js"))
.pipe(gulp.dest("dist/js"))
})
```
##5.4 gulp/asses ---图片
###复制图片到 dist/assets
```
gulp.task("copy-images",()=>{
gulp.src("./assets/**/*")
.pipe(gulp.dest("dist/assets"))
})
```
###压缩图片
添加模块
cnpm i gulp-imagemin -S
```
const imagemin = require("gulp-imagemin")
gulp.task("copy-images",()=>{
gulp.src("./assets/**/*")
.pipe(imagemin()) //压缩图片
.pipe(gulp.dest("dist/assets"))
})
```
##数据的处理
没有后端接口的时自己模拟数据
复制
```
gulp.task("copy-data",()=>{
gulp.src("./data/**/*")
.pipe(gulp.dest("dist/data"))
})
```
#6.一次性执行多个任务
任务名不要自己随意定义，就写build
```
gulp.task("build",["copy-index","copy-css","cope-js","copy-images","copy-data"],()=>{
console.log(success)
})
```
#7.gulp服务器
cnpm i gulp-connect -S
server 任务名不能更改
```
gulp.task("server",()=>{
connect.server({
//说明服务器的根目录
root:"dist",
livereload:true //实时更新
})
})
```
#8检测html文件.css.js.data.图片的改变，执行不同的任务
```
gulp.task("watch",()=>{
gulp.watch("index.html",["copy-index"])
gulp.watch("./css/**/*",["copy-css"])
gulp.watch("./js/**/*",["copy-js"])
gulp.watch("./assets/**/*",["copy-images"])
gulp.watch("./data/**/*",["copy-data"])
})
````
#9同时默认执行server 任务和watch任务
```
gulp.task("default",["server","watch"])
```
#10热更新---主动更新页面
在页面 css js 图片 数据相关的任务后面加上一句话，重新启动服务器
```
.pipe(connect.reload())
```
原文地址：https://www.cnblogs.com/goodboyzjm/p/11605766.html