Gulp 从入门到实践开发
Gulp 特点
任务化
基于流
Gulp 有自己的内存
livestyle
针对样式前端实时可视化编辑
操作步骤
- 安装浏览器的插件-livestyle,开启 livestyle
- 安装编辑器的插件 Sublime 安装 livestyle
- 通过 http-server 启动页面
livereload
支持文件修改实施展示
- 安装浏览器的插件-livereload,开启 livereload
- 安装 livereload npm i -g livereload
- livereload 启动服务
livereload 结合 Gulp
1 | // gulpfile.js |
Browser-Sync
Browser-Sync 本质是启动代理服务器,代理服务器监听文件变化,通过 TCP 长连接,仅仅对变化的文件进行实时的同步
livereload 本质是 F5 的操作
安装 browser-sync
npm install -g browser-sync
启动 browser-sync
browser-sync start –server –files “**”
Browser-Sync 结合 Gulp
1 | // gulpfile.js |
方案名称 | 安装和配置 | 使用限制 | 最佳应用场景 | 其他附加功能 |
---|---|---|---|---|
liveStyle | 浏览器插件、编辑器插件 | 仅限于样式文件 | 开发中针对样式的微调和重样式的前端项目 | 无 |
liveReload | 浏览器插件、编辑器插件 | 任何文件,单向修改 | 简单的 web 项目 | gulp、grunt支持 |
BrowserSync | node.js插件 | 任何文件,单向修改 | 所有业务场景优先考虑,特别是响应式 web 开发必选 | gulp、grunt 支持、网络设置、交互同步等 |
相关资料
[视频]前端实时可视化开发工具体验√
[视频]尚硅谷前端Gulp教程,自动化构建工具gulp
npm在项目目录安装插件需要使用sudo√
gulp-livereload
Browsersync中文官网