gulp 给予前端小伙伴利用 JS 操作本地文件系统的能力。原本需要手动执行的工作，如文件压缩，编译CSS，优化图片等等交由gulp自动化处理，让我们更加专注于代码本身，大大提升了生产力。熟悉 gulp 的使用与基本原理，可以为今后的工作提供不小助力。
gulp 的安装与使用
下载，安装等操作，请参考 gulp 官方文档。
概念
- 任务（task） gulp 任务是一个异步函数, 可接收 callback 作为参数；或者返回 stream, promise, eventEmitter, child process, 或者 observable 类型的函数。
// task
// 当不返回任何数据时，调用 cb 以表示任务已经完成
function task1(done){
// do something
done() // call done when the task is done
}
// 返回 stream
function output(){
return gulp.src('./*.js').
pipe(gulp.dest('./dist'))
}
// 更多示例查看官网
- 插件 插件可以赋予 gulp 更加强大的能力，在这里列举一些例子
- gulp-ugligy
- gulp-connect 可以开启本地服务器
- gulp-sass
- gulp-babel
- gulp-autoprefixer
- readable-stream …
- Demo
const gulp = require('gulp')
const babel = require('gulp-babel')
const del = require('del')
const uglify = require('gulp-uglify')
const {pipeline} = require('readable-stream') // 方便操作 stream
const less = require('gulp-less')
const base64 = require('gulp-base64')
const connect = require('gulp-connect')
const {series,parallel,watch} = gulp // 通过官网了解详情
const jsDest = 'src/**/*.js'
const cssDest = 'src/**/*.less'
const htmlDest = 'src/**/*.html'
function clean(){
return del(['./dist'])
}
function jsTask(){
return gulp.src(jsDest).
pipe(
babel({
presets: ['@babel/env']
})
).
pipe(uglify()).
pipe(gulp.dest('./dist/static'))
}
function cssTask(){
return gulp.src(cssDest).
pipe(less()).
pipe(base64()).
pipe(gulp.dest('./dist/static'))
}
function htmlTast(){
return gulp.src(htmlDest).
pipe(gulp.dest('./dist'))
}
function server(){
return connect.server({
port: 8800,
root: 'dist',
livereload: true // 开启热刷新
})
}
watch([jsDest], function(){
return jsTask().pipe(connect.reload())
})
watch([cssDest], function(){
return cssTask().pipe(connect.reload())
})
watch([htmlDest], function(){
return htmlTast().pipe(connect.reload())
})
exports.default = series(clean, parallel(jsTask, cssTask, htmlTast), server)
提一句 connect.reload 当 js / html 文件改变是，会通过 websocket 向浏览器推送消息，当前应用通过 location.reload() 刷新页面; 对应 css 文件做了特殊处理，修改 css 文件的引用而无需重新加载页面就可以刷新 css。
文档信息
- 本文作者：xu jinshan
- 本文链接：https://xujs0813.github.io/gitpage/2021/01/17/gulp/
- 版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）