什么是 gulp?
gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。gulp.js 是基于 node.js 构建的,利用 node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。gulp.js 源文件和你用来定义任务的 gulp 文件都是通过 javascript(或者 coffeescript )源码来实现的。更多关于 gulp,可以通过官网了解。
什么是 browsersync?
browsersync 能让浏览器实时、快速响应您的文件(html、js、css、sass、less等等)的更改,browsersync 支持多终端(PC、ipad、iphone、android等等)设备同时调试。无论您是前端还是后端工程师,使用它将提高您 30% 的工作效率。更多关于 browsersync,可以通过官网了解。
安装依赖包
npm install --save-dev gulp browser-sync
配置 gulpfile.js
'use strict';
var gulp = require('gulp'),
browserSync = require('browser-sync').create();
// 配置服务器
gulp.task('serve', function() {
browserSync.init({
server: {
baseDir: './'
},
port: 8000
});
});
gulp.task('default', ['serve']);
打开终端,输入:
gulp
如果显示如下,说明启动本地静态服务器成功了。
[15:16:00] Using gulpfile ~/Work/github/test-demo/gulpfile.js
[15:16:00] Starting 'serve'...
[15:16:00] Finished 'serve' after 12 ms
[15:16:00] Starting 'default'...
[15:16:00] Finished 'default' after 9.42 μs
[BS] Access URLs:
-------------------------------------
Local: http://localhost:8000
External: http://172.16.18.11:8000
-------------------------------------
UI: http://localhost:3001
UI External: http://172.16.18.11:3001
-------------------------------------
[BS] Serving files from: ./
这时候打开浏览器,输入 http://localhost:8000/ 就可以看到页面了。
-----分割线-----
以上示例只是最简单的 demo,一般项目不单单只有 browsersync 还有其他的 gulp 插件需要引用(比如,gulp-sass),后面的文章会逐一介绍如何使用这些插件,并逐步完善 gulpfile.js。
PS:
如果端口号设置在 1024 以下的话,在 linux 下监听会报错,是因为 linux 监听 <= 1024 的端口需要 root 权限。解决方法一:端口号 > 1024。解决方法二:sudo gulp。