Gulp and Browser-sync

July 20,2016
0
Gulp

安装

npm install -g browser-sync gulp

启动服务

可以和 gulp 搭配使用,也可以单独使用,通常我都是搭配 gulp 使用的,但在这里仅作演示。通过以下命令可以启动一个小型的服务器,并监听文件变化。

# *号代表要监听的文件,可以使任何文件
browser-sync start --server --file "*"

此时,会在默认浏览器中打开一个窗口并自动访问 http://localhost:3000 ,同时呢,命令行会显示一下内容:

[BS] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.103:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.103:3001
 --------------------------------------
[BS] Serving files from: ./

用你的移动设备打开 http://192.168.1.103:3000 ,你会看见网页会呈现在你面前,而且设备间可以同步进行滚动等操作,调试响应式网站简直不要太好用 😎

http://localhost:3001 这个地址是一个可视化操作的界面,可以在这个网页中配置 browser-sync 的相关服务,很神奇,有木有?

gulp & browser-sync

npm install gulp browser-sync --save-dev

gulpfile.js

var gulp = require('gulp'),
  browserSync = require('browser-sync').create()

gulp.task('server', function () {
  browserSync.init({
    server: {
      baseDir: './',
    },
  })
})

最后在命令行中运行 gulp server

Others

其实利用 gulp 可以做的事情很多很多,编译 SCSS 、压缩代码/图片等等。前端自动化的任务交给它就可以了。


商业转载请联系站长获得授权,非商业转载请注明本文出处及文章链接,您可以自由地在任何媒体以任何形式复制和分发作品,也可以修改和创作,但是分发衍生作品时必须采用相同的许可协议。
本文采用 CC BY-NC-SA 4.0 - 非商业性使用 - 相同方式共享 4.0 国际进行许可。