实战演练:用gulp像CMS那样生成新闻页面_gulpjs 构建新闻列表-优快云博客

本文介绍如何使用Node.js的request库获取PHP新闻API数据，并利用Gulp进行HTML模板填充，最终生成带有动态内容的HTML文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先学习一个nodejs库

npm install request --save-dev

有了这个库，我们可以在nodejs里面很方便的实现类似curl功能。

1.先来试一下这个request，写一个1.js，代码如下：

var request = require('request');
request.get('http://localhost/myphp/news.php',function(error,response,body){
    if(!error && response.statusCode == 200){
        console.log(body);
    }
});

执行 node 1.js后终端输出：
这里写图片描述
http://localhost/myphp/news.php 代码如下：

<?php

$news['id'] = 123;
$news['title'] = '今天的气温到达了38℃';
$news['content'] = '天气太热啦，天气太热啦，天气太热啦，天气太热啦';

header("Access-Control-Allow-Origin:http://localhost");
header("Content-type: application/json");

// json_encode 加JSON_UNESCAPED_UNICODE参数 中文不转码.在PHP5.4可用
die(json_encode($news));

试验通过，证明nodejs这个request类库可用。

2.封装一个自己的类库，专门用来加载新闻数据
node_modules/myLib/index.js 下：

var request = require('request');

exports.loadNews = function(doSomething){
    request.get('http://localhost/myphp/news.php',function(error,response,body){
        if(!error && response.statusCode == 200){
            doSomething(body);
        }
    });
}

这样就可用在其他地方引入这个类库，比如我们在2.js下：

var myLib = require('myLib');
myLib.loadNews(function(data){
    console.log(data);
});

然后终端执行 node 2.js 发现成功打印新闻数据啦。

3.最后我们终于可用进入主题来看看，gulp里是怎么做的
编辑gulpfile.js:

var gp = require('gulp');
var gulp_tpl = require('gulp-template');

gp.task('news',function(){
    var myLib = require('myLib');
    myLib.loadNews(function(data){
        gp.src(['index.html']) 
        .pipe(gulp_tpl(JSON.parse(data))) 
        .pipe(gp.dest('./build/html'));
    });
})

并且修改项目根目录下的index.html模板文件：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<body>
<span>ID:<%=id%></span>
<h1>新闻标题：<%=title%></h1>
<hr/>
<p><%=content%></p>
</body>
</html>

然后在终端执行gulp任务：gulp news, 最后果然在/build/html目录下多了一个index.html，内容就是我们的新闻数据

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<body>
<span>ID:123</span>
<h1>新闻标题：今天的气温到达了38℃</h1>
<hr/>
<p>天气太热啦，天气太热啦，天气太热啦，天气太热啦</p>
</body>
</html>

4.因为我们读取的html模板名是index.html，最后生成的也是index.html，如果我们想要最后生成不同的文件名，怎么办呢？
我们需要现在安装一个gulp-rename插件：

npm install gulp-rename --save-dev

然后gulpfile.js这样写：

var gp = require('gulp');
var gulp_tpl = require('gulp-template');
var gulp_rename = require('gulp-rename');
gp.task('news',function(){
    var myLib = require('myLib');
    myLib.loadNews(function(data){
        var news = JSON.parse(data);
        gp.src(['index.html']) 
        .pipe(gulp_tpl(news))
        .pipe(gulp_rename(news.id+'.html')) 
        .pipe(gp.dest('./build/html'));
    });
})