實戰演練:用gulp 構建前端頁面(1)---靜態構建

阿新 • • 發佈：2019-01-20

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%>

實戰演練:用gulp 構建前端頁面(1)---靜態構建

gulp模板外掛 npm install gulp-template --save-dev 通過這個外掛，我們可以像寫後臺模板（比如PHP）一樣寫前端頁面。建立一個新任務然後建立一個index.html檔案然後在body裡面寫上：我的年齡是:

nodejs用gulp管理前端檔案方法

1、安裝node.js（https://nodejs.org/en/）安裝後使用node -v檢視版本 node安裝完之後會順帶安裝npm ps：npm其實是Node.js的包管理工具（package manager）為啥我們需要一個包管理工具呢？因為我們在Node.js

微信公眾號開發用vue做前端頁面解決IOS返回白屏問題

問題描述：進入A頁面——>B頁面——>ios自帶的返回——>白屏出現——>手動點選白屏處——>問題解決原因分析: 在ios機器上使用webview開發Vue專案時候，go history(-1)，無法將body的高度拉掉，使得遮住，

構建多頁面應用——靜態資源的處理

load sync icon 矢量圖 limit -o pts web頁面 font 在之前的系列文章中，我已經介紹了如何用webpack實現多頁面應用的js，html，css的處理。今天就主要介紹如何處理靜態資源，在web開發中最常見的靜態資源就是圖片。圖片的引用方式

使用 gulp-file-include 構建前端靜態頁面

issue 官方文檔 type 也看 pan 循環引入 pip 就是前言雖然現在單頁面很流行，但是在 PC 端多頁面還是常態，所以構建靜態頁面的工具還有用武之地。最近也看到了一些詢問如何 include HTML 文件的問題。很多時候我們在寫靜態頁面的時候也希望

gulp 構建前端專案（三） js,css檔名MD5,並修改html中引入的檔名。公共頁面的引入

gulp已經能打包和實時在瀏覽器中更新了，接下來就是預防瀏覽器快取對程式碼的影響。通過修改檔名包含MD5值，可以預防無效快取。由於名稱修改就會有變化，所以加入了自動引入修改後的檔名。1.通過 gulp-rev 外掛給檔名加MD5的字尾。在處理css或者js檔案過程中，呼叫

python UI自動化實戰記錄六：頁面1用例編寫

使用python自帶的unittest測試框架，用例繼承自unittest.TestCase類。 1 引入介面類和頁面類 2 setUp函式中開啟頁面，定義介面物件 3 tearDown函式中關閉頁面 4 test打頭的函式都是用例。因頁面和介面的相關方法都已封裝好，所以用例會比較簡潔。 5 當一個

1.3 構建簡單的用戶界面

一課 val ava 區域調整獲得語言 clas providing 在本課中，您將學習如何創建一個 XML 格式的布局，其中包含一個文本字段和一個按鈕。在下一課中，在按下此按鈕時，您的應用會將文本字段的內容發送給另一個 Activity 作為響應。 Android

好用的前端頁面性能檢測工具—sitespeed.io

code http1 dns 指定工作 too png 我們 orm 引言最近在做HTTP2技術相關調研，想確認一下HTTP2在什麽情境下性能會比HTTP1.x有顯著提升，當我把http2的本地環境（nginx+PHP）部署完成後進行相關測試時，我遇到了以下問題：（

[實戰演練]python3使用requests模塊爬取頁面內容

取圖簡書服務器二進制 tty ret index 內容亂碼 20px 本文摘要： 1.安裝pip 2.安裝requests模塊 3.安裝beautifulsoup4 4.requests模塊淺析 + 發送請求 + 傳遞URL參數 + 響應內容

以太坊開發DApp實戰教程——用區塊鏈、星際文件系統（IPFS）、Node.js和MongoDB來構建電商平臺

IPFS 區塊鏈電商區塊鏈開發以太坊開發以太坊dapp 以太坊教程智能合約以太坊星際文件系統區塊鏈第一節簡介歡迎和我們一起來用以太坊開發構建一個去中心化電商DApp！我們將用區塊鏈、星際文件系統（IPFS）、Node.js和Mong

SpringCloud分布式事務實戰（七）在微服務1中創建整合函數，調用微服務2

request enable class alt cef 內容 llb 傳遞 turn （1）添加jar pom.xml <dependency> <groupId>org.springframework.clou

網站搭建筆記精簡版---廖雪峰WebApp實戰-Day8:構建前端筆記

前面已經構建好MVC，可以進行視覺化，但是，老醜了，因此需要CSS等進行美化一下。這樣形容一下，html為網頁的骨架，JavaScript為網頁的肌肉，css為網頁的衣服。模板下載感謝強大的網際網路，我們可以通過這裡找到已經寫好的強大的CSS框架。它具備完善的響應式佈局，漂亮的U

寫一份gulp常用配置檔案，構建前端工作流

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

nodejs+angularjs+npm+gulp+bower+jade+less構建前端框架

名詞解釋 nodejs:nodejs是這個框架的基礎，nodejs可以理解成js直譯器，相對於Python語言而言，以前執行js程式碼必須使用瀏覽器，現在就可以使用nodejs，nodejs還擴充了js語言，編寫了包括檔案，網路，程序管理在內的許多模組。 angularjs:angu

前端每日實戰5.用 CSS 創作一個立體滑動 toggle 互動控制元件

原文地址：https://segmentfault.com/a/1190000014638655 HTML程式碼： <html> <head> <link rel="stylesheet" href="index.css"&g

【gulp】用gulp搭建一個前端專案

一、安裝與建立 1.安裝node：https://nodejs.org/zh-cn/ 2.安裝gulp：npm install gulp -g 3.新建一個資料夾用來存放專案 4.在命令列進入建立的資料夾輸入 gulp init即可 5.新建一

gulp自動化構建前端工程

@第一步：安裝Node環境可以在這裡下載node進行安裝 https://nodejs.org/en/download/ 安裝完成後在命令列輸入node -v 可以看到版本號則安裝成功 @第二部：推薦安裝 cnpm npm伺服器在國外，網路影響大，甚至還會遇

Docker入門實戰(三)——用Dockerfile構建映象

在Docker中，構建一個自定義映象共有兩種方法，一是通過commit指令構建，二是通過Dockerfile檔案構建。第一種方式在上篇部落格中已經詳細介紹(Docker入門實戰(二)——Docker映象操作)，接下來介紹在Docker中更為常用的方法——使用

Web專案用到的技術（1）jsp頁面嵌入java程式碼

JSP中嵌入java程式碼的三種方式：（1）宣告變數或方法 : <%! 宣告; %> :慎重使用,因為此方法定義的是全域性變數（2）java片段: <% java程式碼; %> （3）表示式：用於輸出表達式的值到

實戰演練:用gulp 構建前端頁面(1)---靜態構建

相關推薦