"Nodejs+gulp+webpack Basic Combat" course note (iv)--Practical walkthrough

I. Building front-end pages with Gulp (1)---static build

　　With this plugin, we can write a front-end page like a background template (such as PHP). Let's begin by studying the wording.

Now we create a new task: Create a bare index.html file, and then write it in the body, my age is: <%= ages%>

Download Good gulp-template, we reference and configure

var gulp_tpl = require ("gulp-template"); Gp.task ("page",function() {    GP.SRC ([ ' index.html ')        . Pipe (Gulp_tpl ({Age:"}")        . Pipe (Gp.dest ('./build/html ')  ));})

　　In the index.html file, we write the following phrase

　　Then we　　
　　See if the build folder below is generated in an HTML folder is there a index.html file?

 
  
 Second,Generate news pages with gulp like CMS
　　We used the Gulp-template plugin. An HTML file was generated by writing to the static data. Start by preparing to learn a Nodejs library:
NPM Install request--save-dev   // with this library, we can easily implement a curl-like function inside the Nodejs. (like an external URL that simulates a browser request < You can imagine it as api>)
　　Let's start by writing a simple PHP file to test the request component:
<? PHP     New StdClass ();     id = "1024x768";     ->title = "PHP file for testing";     Content = "You are the only regret in my life, this is just a test php file, please do not care too much content";    Exit (Json_encode ($news));? >
Then refer to the request plugin in the xiaozu.js of the project directory and test
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, everything is fine, we begin to formally write the code, wrap the previous reference into our own class library, Change the Slib we wrote before, and write the file name Index.js formally. 
　we always have to remember one of the rules of COMMONJS: 1, external file reference with require 2, file (module) export method or variable with exports.xxxx=function () {...} or module.exports=function () {...}  
// Slib/index.js var req = require ("Request"function(dosomething) {    req.get ("HTTP/ 127.0.0.1:999/studir/news.php ",function(err,response,body) {        if(!err && Response.statuscode ==200 ) {            dosomething (body);       // Callback         }    })}
// write in 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 ');    });

 
  
 
Third, use gulp+ejs like CMS to generate complete news content surface
Let's do a prep work first, go to http://www.embeddedjs.com/.
　　This is a very classic and very simple JS template engine to use. If you have used Nodejs to develop the backend, then Ejs should know something about it. But our course is front-end and therefore separate from use.　
Let's test and use it.
　　Casually create a file called esj.html
<ul> for    (var in list) {%>    <li><%= list[i].name%></li >    <%}%></ul>//  <% This content is the JS script notation%>//  <%= hit "=" is output% >
　　This file is then read by the FS module in the Xiaozu.js file, and the template is rendered using the 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, this is the use of Ejs, testing. The following back to gulp, combined with gulp
NPM install Gulp-ejs--save-dev  //Gulp has been very thoughtful to help us prepare the plugin
Now we're going to write a new news2 in the Gulpfile file.
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 '));})
Or node run, we see that the build folder generated a file with the same name ejs.html, the following
　　　
　Copyright NOTICE: NOTE-taker fugitive pawns love freedom, advocating sharing. But this note stems from www.jtthink.com (programmer in the awkward way) Judging teacher's "front- end development of the rapid study of wealth (nodejs+gulp+webpack Basic Combat)". This study note pawn in the blog Park debut, if need to reprint please respect the teacher Labor, retain judging teacher attribution and course source address.
　　Previous lesson:"Nodejs+gulp+webpack Basic Combat" course Note (iii)--webpack
"Nodejs+gulp+webpack Basic Combat" course note (iv)--Practical walkthrough