Gulp配置实例

Gulp.js 自动化构建工具，是基于Node.js构建的，利用Node.js流，快速构建项目。

常用API

src()

读取给定目录的文件创建stream

gulp.src('/src')

dest()

将stream写入给定目录下

gulp.dest('./dist')

task()

定义任务。

gulp.task('copy', () => {
  return gulp.src('lib')
    .pipe(gulp.dest('./dist/lib'))
})

series()

执行组合操作时，顺序执行任务，如果一个任务中发生错误，则不会运行后续任务。

gulp.task('default', gulp.series('sass', 'ts', 'connect', 'open_browser', 'watch', (done) => {
    done()
}))

parallel()

执行组合操作时，所有任务都将以最大并发性运行。如果一个任务中发生错误，不确定其他任务是否会运行。

gulp.task('build', gulp.parallel('copy_lib', 'sass', 'css', 'image_min', 'ts', 'js', 'html', (done) => {
  done()
}))

watch()

用于对指定目录/文件监听，执行指定task。

gulp.task('watch', (done) => {
    gulp.watch(['./src/*.html', './src/css/**/*', 'img/**/*.*'], gulp.series('reload'))
    done()
})

常用插件

插件名	备注
yargs	命令行传参
gulp-connect	Web服务器(热更)
http-proxy-middleware	代理
gulp-open	打开浏览器
gulp-rev-append-all	版本号
gulp-sourcemaps	map文件
gulp-uglify	js压缩
gulp-pxtorem	px 转 rem
gulp-clean-css	css压缩
gulp-css-spriter-filter	css文件内精灵图
gulp-sass	sass编译
node-sass	sass编译
gulp-image	图片压缩
gulp-babel	bable
@babel/core	babel编译核心
@babel/preset-env	bable预设
@babel/core	babel编译核心
gulp-typescript	typescript编译
through2	buffer 处理

gulp配置实例

包含以下task：

• 创建基本结构
• 热更新
• 打开浏览器
• 代理
• css,js压缩并生成map文件
• sass
• ts
• bable
• 雪碧图
• 图片压缩
• 静态文件添加版本号

欢迎大家指指点点GitHub～～～