gulp使用指北

因为公司业务需求，需要用到gulp。
但是第一次使用，于是有了这篇使用指南。

gulp的概念与作用

概念：基于流（stream）的自动化构建工具
作用：

• 压缩合并js、css文件
• 图片优化
• 添加文件指纹
• 项目按需打包
• 项目实时刷新
• 预编译
• 服务代理
• eslint…

Global

字符片段与分隔符
gulp 将 / （一个斜杠）作为分隔符
简单说就是以 / （一个斜杠）为分割单位进行分割

view/script
这里view/script 将被视为两个字符片段

特殊字符： *（一个星号）
可以匹配一个字符片段中的任意数量的字符，包括0个，多用于匹配单个目录下的文件

view/*.js   
匹配view目录下的所有js文件

特殊字符：**（两个星号）
可以匹配多个字符片段中的任意字符，包括0个，多用于匹配多级目录下的文件

view/**/*.js
匹配view目录下所有子目录中的js文件

Api接口

1.gulp.task(name,fn)
该接口创建一个任务，首参数为任务名称， 第二个参数为执行的回调函数

const gulp = require('gulp')

gulp.task('log', function(){
    console.log('日志输出')
})

如果该任务在其他任务之后，同时也允许接收一个方法数组，直到前置任务完成之后才会执行

gulp.task('log',['task1','task2'],function(){
    console.log('日志输出')
})

2.gulp.src(url，[opts])
该接口接收一个globl参数，读取匹配相应的文件，生成一个node流。
第二个参数可选，可对文件进行相应处理

gulp.task('log',function(){
    gulp.src('view/*.js')
})

3.gulp.pipe()
执行的操作管道，用于连接流。接收一个方法，用于处理文件

const babel = require('babel')

gulp.task('log',function(){
    gulp.src('view/*.js')
        .pipe(babel())
})

4.gulp.dest()
接收一个global参数，作为文件输出的目录

gulp.task('log',function(){
    gulp.src('view/*.js')
        .pipe(babel())
        .pipe(gulp.dest('dist')) // 将处理后的文件放在dist目录下
})

5.gulp.watch(url,[fn])
监听文件，并实时进行处理
接收一个global参数，对匹配到的文件进行监听
接收一个task方法数组，实时进行处理

gulp.task('log',function(){
    gulp.src('view/*.js')
        .pipe(babel())
        .pipe(gulp.dest('dist')) // 将处理后的文件放在dist目录下
})

gulp.task('watch',function(){
    gulp.watch('view/*.html',['log']) // 监听view目录下的所有html文件的变化，并实时执行log方法进行处理
})

常用插件

汇总：

• gulp-connect ( gulp开启服务
• gulp-proxy-middleware （ gulp 服务代理中间件
• gulp-load-plugins （ 插件汇总
• del （ 删除文件
• gulp-clean （ 清空文件
• gulp-sass （ sass 预编译
• gulp-less （ less 预编译
• gulp-imagemin （ 图片压缩
• gulp-uglify （ js 压缩
• gulp-minify-css （ css 压缩
• gulp-minify-html （ html压缩