利用 Gulp 处理前端工作流程
文章目录
基本用法
|
|
基本 API
gulp.src(glob[, options])
- 根据
glob
匹配文件,返回stream
,可以通过.pipe()
方法传递给后续的插件。
- 根据
gulp.dest(path[, options])
一般用法
.pipe(gulp.dest(path))
,把pipe
中的内容按照指定的path
写成文件,会自动创建不存在的文件夹。注意,可以通过
.pipe
多次指定输出的地方,具体请看 这里
gulp.task(name[, deps], fn)
定义名为
name
的任务,定义之后就可以在命令行中使用gulp xxx
来执行任务。deps
里面的任务全部完成后才会执行fn
deps
里面的任务都是并行执行的,如果需要顺序执行,需要特殊写法。具体看 这里
gulp.watch(glob[, opts, cb])
监听文件变化
根据这个帖子,
gulp.watch
不会监听新文件(目录),所以一般你会需要 gulp-watch
常用命令 (自定义)
|
|
gulp server
流程
把
less
,sass
, 之类的文件编译成 CSS,常用插件:创建 Web Server (with Live Reload),常用:
gulp-connect,用来创建 Web Server,其实还有其他选择的,但多数都是利用 connect 来创建 Web Server 的。
node-proxy-middle,用来代理请求,可以把
/api/xxx
发送到指定的地址。(常用于 SPA 开发)connect-modrewrite,匹配资源,如果不匹配就可以重定向到指定地址。(常用于 SPA 开发)
connect-history-api-fallback,作用同上,也用于匹配资源,但用起来简单很多。(常用于 SPA 开发)
监听文件变化,常用插件:
示例代码
|
|
gulp build
流程
清理
dist/
文件夹- del,根据
glob
来删除文件/目录
- del,根据
压缩文件
gulp-htmlmin,压缩
html
文件gulp-cssmin,压缩
css
文件gulp-minify-css,同上,封装了 clean-css,star 比上面的多
gulp-uglify,混淆
JavaScript
代码gulp-usemin,合并指定
block
中的文件gulp-rev,给静态文件加上版本号,如
app.js
->app-d41d8cd98f.js
复制其他文件到
dist/
gulp.src(...).pipe(gulp.dest(...))
实例代码
|
|
参考资料
文章作者 scarletsky
上次更新 2019-04-30 (95a170d)