《nodejs+gulp+webpack基础实战篇》课程笔记（四）-- 实战演练
一.用gulp 構建前端頁面(1)---靜態(tài)構建
npm install gulp-template --save-dev通過這個插件，我們可以像寫后臺模板（譬如PHP）一樣寫前端頁面。我們首先學習一下寫法.
現(xiàn)在我們創(chuàng)建一個新任務:創(chuàng)建一個裸的index.html文件，然后在body里面寫上 ，我的年齡是:<%= age %>
下載好gulp-template，我們引用并配置
var gulp_tpl = require("gulp-template"); gp.task("page",function(){gp.src(['index.html']).pipe(gulp_tpl({age:"18"})).pipe(gp.dest('./build/html')); })在index.html文件中，我們寫上下面這句話
<h1>大家好，我的年齡<%= age %></h1>然后我們
看看build文件夾下面是不是生成了一個html文件夾里面是不是有一個index.html文件？
二、用gulp像CMS那樣生成新聞頁面
我們使用了gulp-template這個插件。通過寫入靜態(tài)數(shù)據(jù)生成了一個 HTML文件。先準備一下,學習一個NodeJS庫：
npm install request --save-dev//有了這個庫，我們可以在NodeJS里面方便的實現(xiàn)類似curl功能。（好比是模擬瀏覽器請求外部的網址<你可以想象成API>)我們先寫一個簡單的PHP文件測試一下request組件：
<?php$news = new stdClass();$news -> id = "1024";$news ->title = "測試用PHP文件";$news -> content = "你是我這一生唯一的遺憾,這只是一個測試用PHP文件，請不要太在意內容";exit(json_encode($news)); ?>然后在項目目錄的xiaozu.js中引用request插件并測試
var req = require("request"); req.get("http://127.0.0.1:999/stuDir/news.php",function(err,response,body){if(!err && response.statusCode ==200 ){console.log(body);} })
OK，一切正常，我們開始正式寫代碼，把前面的引用封裝進我們自己的類庫中，改造一下我們之前寫的slib,正規(guī)的寫上文件名index.js。
我們永遠要記住CommonJS的規(guī)則之一 ：1、外部文件引用用require 2、文件（模塊）導出方法或變量 用exports.xxxx=function(){…} 或者module.exports=function(){…}?
//slib/index.jsvar req = require("request"); exports.loadNews = function(doSomething){req.get("http://127.0.0.1:999/stuDir/news.php",function(err,response,body){if(!err && response.statusCode ==200 ){doSomething(body); //回調 }}) }?
//gulpfile中寫入 var gulp_tpl = require("gulp-template"); gp.task("news",function(){var _slib = require("slib");_slib.loadNews(function(body){gp.src(['index.html']).pipe(gulp_tpl(JSON.parse(body))).pipe(gp.dest('./build/html'));});?
?
三、用gulp+EJS像CMS那樣生成完整新聞內容面?
我們還是先做一個準備工作，去http://www.embeddedjs.com/
npm install ejs --save-dev這是一個功能很經典且使用非常簡單的JS模板引擎。如果你用過NODEJS開發(fā)后端，那么EJS應該有所了解。但是我們的課程是前端，因此單獨剝離使用。
我們來來測試、使用一下。
隨隨便便的創(chuàng)建一個文件，叫做esj.html?
<ul><% for(var i in list){ %><li><%= list[i].name %></li><% } %> </ul> // <% 這里面的內容就是js腳本寫法%> // <%= 碰到”=“ 就是輸出%>然后在xiaozu.js這個文件中利用FS模塊讀取這個文件,并且渲染模版，利用node
var fs=require('fs'); var str = fs.readFileSync("./ejs.html","utf8"); var ejs = require("ejs");var data={list:[{name:"xiaozu"},{name:"tiger"},{name:"biubiu"}] } var html = ejs.render(str,data); console.log(html);
OK,這就是使用EJS使用、測試。下面回到gulp，結合gulp
npm install gulp-ejs --save-dev//gulp已經很貼心的幫我們準備好了插件現(xiàn)在我們在gulpfile文件中寫個新的news2
var gulp_ejs = require("gulp-ejs"); gp.task("news2",function(){var data={title:"hello tiger",list:[{name:"xiaozu"},{name:"tiger"},{name:"biubiu"}]}gp.src(['ejs.html']).pipe(gulp_ejs(data)).pipe(gp.dest('./build/html')); })還是node運行，我們看到build文件夾中生成了一個同名文件ejs.html，內容如下
?
版權聲明：筆記整理者亡命小卒熱愛自由，崇尚分享。但是本筆記源自www.jtthink.com（程序員在囧途）沈逸老師的《前端開發(fā)速學成財(nodejs+gulp+webpack基礎實戰(zhàn)篇)》。本學習筆記小卒于博客園首發(fā)， 如需轉載請尊重老師勞動，保留沈逸老師署名以及課程來源地址 .
上一課：《nodejs+gulp+webpack基礎實戰(zhàn)篇》課程筆記（三）--webpack篇
?下一課：《nodejs+gulp+webpack基礎實戰(zhàn)篇》課程筆記（五）-- 實戰(zhàn)演練，構建用戶登錄
?
轉載于:https://www.cnblogs.com/xz1024/p/5857340.html
總結
以上是生活随笔為你收集整理的《nodejs+gulp+webpack基础实战篇》课程笔记（四）-- 实战演练的全部內容，希望文章能夠幫你解決所遇到的問題。
