2020-03-21发表2020-11-02更新3 分钟读完 (大约506个字)

Gulp 从入门到实践开发

Gulp 特点
任务化
基于流

Gulp 有自己的内存

livestyle

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

操作步骤

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

livereload

支持文件修改实施展示

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

livereload 结合 Gulp

// 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

// 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 支持、网络设置、交互同步等