Gulp系列教程:使用BrowserSync浏览及相关配置
来源:互联网 发布:淘宝金牌店铺 编辑:程序博客网 时间:2024/05/16 06:54
这是Gulp.js介绍系列的第二篇教程。今天我想讨论一些首要的Gulp.js
任务并用BrowserSync设置开发服务器。接下来我开始创建一个配置文件。
安装Gulp.js
运行gulpfile.js
前需要安装gulp:
$ npm install --save-dev gulp@3.9.0
如果现在在命令行中运行gulp
会报错,报错信息为gulpfile.js
中不存在default
任务。这是因为到现在为止我还没创建gulp任务。
我在gulp/tasks
目录中创建了default.js
文件并添加如下代码:
var gulp = require('gulp');gulp.task('default', function() { console.log('Hello Gulp.js!');});
我知道…我说过我不喜欢Hello World式指南,但这些内容不会太多。很快我会给出更实用的代码。所以跟着我继续吧。
如果运行gulp
命令,这个Gulp.js
任务会向控制台输出Hello Gulp.js!
。
现在开始我将加快一些学习速度了。
Watch
我不需要调用函数并在控制台输出文本就可以执行任务。我打算在运行gulp
命令时执行watch
任务。这个任务随后会监听变化并更新文件。
var gulp = require('gulp');gulp.task('default', ['watch']);
可以同时运行多个任务,因此我把watch
任务写成一个数组。注意:这些任务会同时运行,而不是按序运行。随后我会讲解如何按预定顺序运行任务。
我会在task
目录中创建另一个development
目录并把所有开发中的任务放到这个目录里,这不是必要的,但我是这么做的:
var gulp = require('gulp');/** * Start browsersync task and then watch files for changes */gulp.task('watch', ['browsersync'], function() {});
我晚一些再写watch
任务。现在函数没有内容并且在运行watch任务前会运行另一个任务:browsersync
。所有数组中的任务都会在这个任务执行之前执行。
BrowserSync
你也许听过LiveReload,一个监听文件变化的工具并能自动刷新服务。如果仅仅是样式的改变都不需要重新加载。一旦有改变页面立即刷新。
然而BrowserSync更进一步:它能实现LiveReload所有功能,但是不需要安装浏览器插件并且它可以在所有连接的浏览器上同步操作例如滚动,点击,刷新或填充表单。移动设备上也同样有效。BrowserSync甚至支持开发服务器。这就是我在开发服务器上只用BrowserSync来实现实时刷新的原因。
首先安装BrowserSync:
$ npm install --save-dev browser-sync@2.9.11
在gulp/tasks/development/
中创建一个新的browser-sync.js
文件。这个文件只用来启动BrowserSync和开发服务器。
var gulp = require('gulp');var browsersync = require('browser-sync');var config = require('../../config').browsersync.development;/** * Run the build task and start a server with BrowserSync */gulp.task('browsersync', ['build'], function() { browsersync(config);});
这段代码需要解释一下:首先我加载Gulp.js
和BrowserSync,在这个任务中需要用到。随后载入BrowserSync的配置。分分钟就能创建好配置文件。把所有的配置从任务中分离可以提高服用性并且可以在不同项目中分享。
第二件值得一提的事情是[build]
。它的意思是在运行BrowserSync前先运行build
Gulp.js任务(我随后会写)。每个Gulp.js
任务都需要名字。第二个参数可以传入一个JavaScript回调函数或任务或两者。
配置
在主要Gulp.js
目录创建一个新的config.js
文件:
var src = 'app';var build = 'build';var development = 'build/development';var production = 'build/production';var srcAssets = 'app/_assets';var developmentAssets = 'build/assets';var productionAssets = 'build/production/assets';module.exports = { browsersync: { development: { server: { baseDir: [development, build, src] }, port: 9999, files: [ developmentAssets + '/css/*.css', developmentAssets + '/js/*.js', developmentAssets + '/images/**', developmentAssets + '/fonts/*' ] } }};
首先我用变量声明了一些后续要重复使用的路径,接下来创建了一个CommonJS模块并给BrowserSync添加了一个入口。BrowserSync按默认选项运行,但是我想重写端口并指定服务目录。
Jekyll在重建时删除所有文件因此要加速开发过程我要有点创意,因此我不想在每次Jekyll构建时重建所有资源。因此我服务监听了不止一个目录。我监听了build/development
目录,包含了Jekyll创建的文件。我的资源会生成到一个不同的目录build/assets
从而不让Jekyll删除。并且稍后把app/_assets
目录额外添加到link source map。
BrowserSync只监听资源文件,防止每次Jekyll创建一个文件浏览器就发疯一样刷新。随后我会写一个任务,当Jekyll构建完成后刷新一下浏览器。
源代码
在Github上查看源码
总结
这是Gulp.js介绍系列的第二篇的总结。我们学习了如何安装Gulp.js,如何编写一个Gulp.js任务。运行其他任务以及使用BrowserSync来设置开发服务器。
- Gulp系列教程:使用BrowserSync浏览及相关配置
- gulp配置使用教程
- 使用Gulp与BrowserSync做页面刷新
- Gulp编译、合并、压缩,以及Browsersync实时刷新教程
- 通过Gulp使用Browsersync实现浏览器实时响应文件更改
- Browsersync(浏览器同步测试工具)配置教程
- Browsersync省时的浏览器同步测试工具配置教程
- gulp使用教程
- gulp使用教程
- gulp简易使用教程
- gulp的使用教程
- Gulp使用教程
- 前端构建工具gulp超详细配置, 使用教程(图文)
- gulp相关命令及操作
- gulp插件gulp-repath使用教程
- browserSync+gulp多浏览器实时刷新页面
- Gulp安装及使用
- 【gulp】gulp安装及使用初探
- 《Linux正则表达式知识介绍》
- Android Studio导入项目方法
- 从Uri获得图片真实路径
- Iframe 高度自适应解决方案
- ViewPager 无线轮播
- Gulp系列教程:使用BrowserSync浏览及相关配置
- C++11,正则表达式应用
- jQuery的选择器—层次选择器
- js获取节点
- MySQL的账号密码管理
- 编写C程序容易犯错的地方
- My first java class!
- Linux中的popen函数
- dotNET_Reactor 命令行 参数大全