实战演练:用gulp 构建前端页面(1)---静态构建

    xiaoxiao2025-06-08  43

    gulp模板插件

    npm install gulp-template --save-dev

    通过这个插件,我们可以像写后台模板(比如PHP)一样写前端页面。

    创建一个新任务 然后创建一个index.html文件 然后在body里面写上:我的年龄是:<%=age %> (这是不是很像php?)

    <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> </head> <body> <h1>我的年龄是<%=age%></h1> </body> </html>

    接下来的问题是这个,变量怎么赋值? gulpfile.js:

    var gp = require('gulp'); var gulp_tpl = require('gulp-template'); gp.task('page',function(){ gp.src(['index.html']) .pipe(gulp_tpl({ 'age':18 })) .pipe(gp.dest('./build/html')); })

    最后在build/html目录下,生成的index.html

    <h1>我的年龄是18</h1>

    可以看出,gulpfile.js里面的age值,赋值给了html模板<%=age%>

    转载请注明原文地址: https://ju.6miu.com/read-1299716.html
    最新回复(0)