利用gulp和browser-sync实现Pug(jade)的实时预览

jade由于和注册商标重名，更名为pug。

一、Pug安装编译

$ npm install -g pug #全局安装

这里如果遇见了

bash: pug: command not found

还需要安装pug-cli，具体原因，Github给出的解释是这样的：

1	You need to install pug-cli. The CLI was separated from the core library as part of this release.

1	$ npm install -g pug-cli

cli是命令行端的程序。我们通过命令行来编译pug文件。

pug简单使用：

pug -h— 查看帮助

pug demo.pug—在同级目录渲染并生成html文件

常用参数说明:
-o 制定html输出目录
-P 格式化输出html文件（样式美观）
-w 监听模式，一旦pug文件有修改，自动会再次渲染输出html文件
-b 制定所有pug文件的根目录用来指定文件的绝对路径
-p 使用绝对路径方式

二、gulp和browser-sync安装

1
2
3

$ sudo npm install gulp-pug
$ sudo npm install browser-sync gulp --save-dev  
#—save-dev这个属性会将条目保存到你package.json的devDependencies里面

在当前目录创建package.json和gulpfile.js

1	$ node init #创建package.json文件

1.package.json文件配置：

{
	"name": "gulp",
	"version": "3.9.1",
	"description": "配置package文件，实现文件更改后浏览器即时刷新",
	"main": "gulpfile.js",
	"scripts": {
		"test": "echo \"Error: no test specified\" && exit 1"
	},
	"keywords": [
		"gulp"
	],
	"author": "fidding.hjh",
	"devDependencies": {
		"browser-sync": "^2.10.0",
		"gulp": "^3.9.1"
	}
}

注意里面的版本号要与安装的版本相对应

2.gulpfile.js配置：

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

/**
 * 编译pug
 */
gulp.task('task_pug', function() {
	console.log(pug);
	return gulp.src('./src/*.pug')
		.pipe(pug({pretty:true})) //格式化
		.pipe(gulp.dest('./src')) //输出到文件夹
});



/*静态页面html实时预览*/
gulp.task('browser-sync', function() {
	browserSync.init({
		server: "./src"	////指定服务器启动根目录  
	});
	
	gulp.watch('src/*.pug', ['task_pug']);	//监听pug文件变化-执行task_pug方法使用gulp-pug编译pug
	gulp.watch(['src/*.html',]).on("change",browserSync.reload);//监听pug文件变化 刷新浏览器
});

gulp.task('default',['task_pug','browser-sync']); //定义默认任务 命令 gulp default

执行 $ gulp default 会打开http://localhost:3000 页面，如果出现Can’t get url 页面，需要在src目录下添加index.html页面。

gulp 等价于gulp default,运行default中定义的所有任务

Mac系统可以使用http-server或Python开启 Web Server,当前工作目录下执行

1	$ python -m SimpleHTTPServer 3000 #指定与gulp相同端口3000

把生成的网页目录以文件名index.html保存到src目录下即可

这样每次修改pug文件会自动编译成html文件，并利用browser-sync实时刷新预览。

三、出错解决：

Can’t get Gulp to run: cannot find module ‘gulp-util’

一、Pug安装编译

pug简单使用：

二、gulp和browser-sync安装

三、出错解决：

参考：