Gulp 从入门到实践开发

Gulp 特点
任务化
基于流

Gulp 有自己的内存

livestyle

针对样式前端实时可视化编辑

操作步骤

  • 安装浏览器的插件-livestyle,开启 livestyle
  • 安装编辑器的插件 Sublime 安装 livestyle
  • 通过 http-server 启动页面

livereload

支持文件修改实施展示

  • 安装浏览器的插件-livereload,开启 livereload
  • 安装 livereload npm i -g livereload
  • livereload 启动服务

livereload 结合 Gulp

1
2
3
4
5
6
7
8
9
10
11
// gulpfile.js
var gulp = require("gulp");
var livereload = require("gulp-livereload");
gulp.task('watch',function(){
// 启动 livereload 监听
livereload.listen();
gulp.watch('./*.html',function(file){
console.log(file)
gulp.src(file.path).pipe(livereload)
})
})

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// gulpfile.js
var gulp = require("gulp");
var browserSync = require('browser-sync').create();

// 静态服务器
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "./"
}
});
});

// 代理
gulp.task('browser-sync', function() {
browserSync.init({
proxy: "你的域名或IP"
});
});
方案名称 安装和配置 使用限制 最佳应用场景 其他附加功能
liveStyle 浏览器插件、编辑器插件 仅限于样式文件 开发中针对样式的微调和重样式的前端项目
liveReload 浏览器插件、编辑器插件 任何文件,单向修改 简单的 web 项目 gulp、grunt支持
BrowserSync node.js插件 任何文件,单向修改 所有业务场景优先考虑,特别是响应式 web 开发必选 gulp、grunt 支持、网络设置、交互同步等

相关资料
[视频]前端实时可视化开发工具体验
[视频]尚硅谷前端Gulp教程,自动化构建工具gulp
npm在项目目录安装插件需要使用sudo
gulp-livereload
Browsersync中文官网

You need to set client_id and slot_id to show this AD unit. Please set it in _config.yml.