hexo高階教程：教你怎麼讓你的hexo博客在搜索引擎中排第一

時間  2019-11-06
標籤 hexo 高階 教程 怎麼 讓你 博客 搜索引擎 第一 欄目 搜索引擎 简体版
原文   原文鏈接

本文首發在個人我的博客：cherryblog.site/
歡迎你們前去參觀，順便求fork，麼麼噠~javascript

上一次在掘金上發表的hexo高階教程：hexo高階教程next主題優化之加入網易雲音樂、網易雲跟帖、動態背景、自定義主題、統計功能，收到了很多朋友的喜歡，手動比心♪(＾∀＾●)ﾉ，也有很多朋友私信我給我提改進的意見，本着生命就是要折騰的原則，我又作了以下的優化： css

  • seo優化
  • 多終端修改項目
  • 同時託管到github和coding上
  • 設置google和百度sitemap，讓搜索引擎更好的抓取你的網站
  • 使用gulp對css、js進行優化
  • 接入七牛圖牀
  • 加入打賞功能
  • 加入照片模塊

開始作這個博客的時候是想着記錄本身學習的過程，並無期望別人發現（本身比較菜，寫的都是一些基礎的東西，也沒有什麼特別nb的技巧值得炫耀〒▽〒），可是自從給博客增長了統計的功能以後，而且在掘金社區發佈以後，看着天天還有那麼百十號人來看看，心裏還有點小激動呢~[]~(￣▽￣)~* html

酒香不敵巷子深
咱們要作對搜索引擎友好的站點
前端

因此我就在想，怎麼才能讓其餘小夥伴搜索到我寫的文章呢？因而就想到了對網站進行seo優化，這段時間也一直在作網站的seo優化，對於hexo生成的博客來講，代碼其實修改的並很少，主要是要多用心去給各個搜索引擎提交你的sitemap，讓搜索引擎的小蜘蛛多來你的站點，這樣別人在搜索東西的時候纔有更多的可能搜出你的文章，給你的網站帶來人氣~java

做爲一個前端工做者，對網站的優化確定仍是須要有不少的，奈什麼時候間基本都被工做佔用，因此就先把優化功能先放了放，只進行了代碼壓縮node

在這半個月的時間，對於hexo搭建搭建的我的博客，雖然沒有讓我對某一門語言的深度增長，可是卻讓我對整個建站流程的寬度增長了很多，優化是一件比寫出代碼的技術難度還要高的事情。git

seo優化

推廣是一個煩人的事情啊喂，特別是對於咱們搞技術的來講，可能就不擅長推廣，那麼怎麼才能讓別人知道咱們呢，咱們就要想辦法讓別人經過搜索就能夠搜索到你博客的內容，給咱們帶來天然流量，這就須要seo優化,讓咱們的站點變得對搜索引擎友好github

SEO是由英文Search Engine Optimization縮寫而來， 中文意譯爲「搜索引擎優化」。SEO是指經過站內優化好比網站結構調整、網站內容建設、網站代碼優化等以及站外優化。web

讓百度收錄你的站點

咱們首先要作的就是讓各大搜索引擎收錄你的站點，咱們在剛建站的時候各個搜索引擎是沒有收錄咱們網站的，在搜索引擎中輸入site:<域名>,若是以下圖所示就是說明咱們的網站並無被百度收錄。咱們能夠直接點擊下面的「網址提交」來提交咱們的網站
npm

查看站點是否被百度收錄
查看站點是否被百度收錄

驗證網站全部權

登陸百度站長平臺：zhanzhang.baidu.com, 只要有百度旗下的帳號就能夠登陸，登陸成功以後在站點管理中點擊添加網站而後輸入你的站點地址，建議輸入的網站爲www開頭的，不要輸入github.io的，由於github是不容許百度的spider爬取github上的內容的，因此若是想讓你的站點被百度收錄，只能使用本身購買的域名

百度站長添加網站
百度站長添加網站

在選擇完網站的類型以後須要驗證網站的全部權，驗證網站全部權的方式有三種：文件驗證。html標籤驗證和cname解析驗證，使用哪種方式均可以，都是比較簡單的， 可是必定要注意，使用文件驗證文件存放的位置須要放在source文件夾下，若是是html文件那麼hexo就會將其編譯，因此必需要加上的layout:false，這樣就不會被hexo編譯。（若是驗證文件是txt格式的就不須要），其餘兩種方式也是很簡單的，我我的推薦文件驗證和cname驗證，cname驗證最爲簡單，只需加一條解析就好~
驗證網站全部權
驗證網站全部權

生成網站地圖

咱們須要使用npm自動生成網站的sitemap，而後將生成的sitemap提交到百度和其餘搜索引擎

安裝sitemap插件

npm install hexo-generator-sitemap --save     
npm install hexo-generator-baidu-sitemap --save複製代碼

修改博客配置文件

在根目錄配置文件中修改url爲你的站點地址

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://cherryblog.site
root: /
permalink: :title.html
permalink_defaults:複製代碼

執行完以後就會在網站根目錄生成sitemap.xml文件和baidusitemap.xml文件，能夠經過www.cherryblog.site/baidusitema…

向百度提交連接

而後咱們就能夠將咱們生成的sitemap文件提交給百度，仍是在百度站長平臺，找到連接提交，這裏咱們能夠看到有兩種提交方式，自動提交和手動提交，自動提交又分爲主動推送、自動推送和sitemap

如何選擇連接提交方式
一、主動推送：最爲快速的提交方式，推薦您將站點當天新產出連接當即經過此方式推送給百度，以保證新連接能夠及時被百度收錄。
二、自動推送：最爲便捷的提交方式，請將自動推送的JS代碼部署在站點的每個頁面源代碼中，部署代碼的頁面在每次被瀏覽時，連接會被自動推送給百度。能夠與主動推送配合使用。
三、sitemap：您能夠按期將網站連接放到sitemap中，而後將sitemap提交給百度。百度會週期性的抓取檢查您提交的sitemap，對其中的連接進行處理，但收錄速度慢於主動推送。
四、手動提交：一次性提交連接給百度，可使用此種方式。

通常主動提交比手動提交效果好，這裏介紹主動提交的三種方法
從效率上來講：

主動推送>自動推送>sitemap

鏈接提交
鏈接提交

主動推送

安裝插件npm install hexo-baidu-url-submit --save
而後再根目錄的配置文件中新增字段

baidu_url_submit:
  count: 100 # 提交最新的一個連接
  host: www.cherryblog.site # 在百度站長平臺中註冊的域名
  token: 8OGYpxowYnhgVsUM # 請注意這是您的祕鑰， 因此請不要把博客源代碼發佈在公衆倉庫裏!
  path: baidu_urls.txt # 文本文檔的地址， 新連接會保存在此文本文檔裏複製代碼

在加入新的deploye

deploy:
 - type:baidu_url_submitter複製代碼

這樣執行hexo deploy的時候，新的連接就會被推送了

設置自動推送

在主題配置文件下設置,將baidu_push設置爲true：

# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
baidu_push: true複製代碼

而後就會將一下代碼自動推送到百度，位置是themes\next\layout_scripts\baidu_push.swig,這樣每次訪問博客中的頁面就會自動向百度提交sitemap

{% if theme.baidu_push %}
<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>
{% endif %}複製代碼

sitemap

將咱們上一步生成的sitemap文件提交到百度就能夠了~

將sitemap提交到百度
將sitemap提交到百度

我記得被百度收錄過程仍是蠻久的，一度讓我覺得個人方法有問題，提交連接在站長工具中有顯示大概是有兩天的時候，站點被百度收錄大概花了半個月= =，讓你們看一下如今的成果
在百度搜索 site:cherryblog.site已經能夠搜索到結果
站點已被百度收錄
站點已被百度收錄

在搜索框輸入域名也能夠找到站點
站點已被百度收錄
站點已被百度收錄

輸入關鍵字的名字也能夠在第二頁就找到呢，好開森~
站點已被百度收錄
站點已被百度收錄

讓google收錄你的站點

相比於百度，google的效率實在不能更快，貌似十分鐘左右站點就被收錄了，其實方法是和百度是同樣的，都是先驗證你的站點全部權，而後提交sitemap
google站點平臺：www.google.com/webmasters/…

站點已被google收錄
站點已被google收錄

站點已被google收錄
站點已被google收錄

站點已被google收錄
站點已被google收錄

讓其餘搜索引擎收錄你的站點

除了百度和google兩大搜索引擎，還有搜狗、360等其餘的搜索引擎，流程都是同樣的
，你們就自行選擇添加哈，這裏就再也不贅述了~

優化你的url

seo搜索引擎優化認爲，網站的最佳結構是用戶從首頁點擊三次就能夠到達任何一個頁面，可是咱們使用hexo編譯的站點打開文章的url是：sitename/year/mounth/day/title四層的結構，這樣的url結構很不利於seo，爬蟲就會常常爬不到咱們的文章，因而，咱們能夠將url直接改爲sitename/title的形式，而且title最好是用英文，在根目錄的配置文件下修改permalink以下：

url: http://cherryblog.site
root: /
permalink: :title.html
permalink_defaults:複製代碼

其餘seo優化

seo優化應該說是一個收益延遲的行爲，可能你作的優化短時間內看不到什麼效果，可是必定要堅持，seo優化也是有很深的能夠研究的東西，從咱們最初的網站設計，和最基礎的標籤的選擇都有很大的關係，網站設計就如咱們剛剛說的，要讓用戶點擊三次能夠到達網站的任何一個頁面，要增長高質量的外鏈，增長相關推薦（好比說咱們常常見到右側本站的最高閱讀的排名列表），而後就是給每個頁面加上keyword和描述
在代碼中，咱們應該寫出能讓瀏覽器識別的語義化HTML，這樣有助於爬蟲抓取更多的有效信息：爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重；而且對外鏈設置nofollow標籤，避免spider爬着爬着就爬出去了（減小網站的跳出率），而且咱們要儘可能在一些比較大的網站增長咱們站點的曝光率，由於spider會常常訪問大站，好比咱們在掘金等技術社區發表文章中帶有咱們的站點，這樣spider是頗有可能爬到咱們中的站點的，so....

  • 網站外鏈的推廣度、數量和質量
  • 網站的內鏈足夠強大
  • 網站的原創質量
  • 網站的年齡時間
  • 網站的更新頻率（更新次數越多越好）
  • 網站的服務器
  • 網站的流量：流量越高網站的權重越高
  • 網站的關鍵詞排名：關鍵詞排名越靠前，網站的權重越高
  • 網站的收錄數量：網站百度收錄數量越多，網站百度權重越高
  • 網站的瀏覽量及深度：用戶體驗越好，網站的百度權重越高

同時託管到github和coding上

前面已經提到過一個慘絕人寰的消息，那就是github是不容許百度的爬蟲爬取內容的，因此咱們的項目若是是託管在github上的話基本是不會被百度收錄的，因此我又同時託管到了coding上，而後在作解析的時候海外的ip 指向到github，國內的或者說百度的直接指向coding

將你的項目託管在coding上

coding
coding

Coding 是一個面向開發者的雲端開發平臺[1] ，目前提供代碼託管，運行空間，質量控制，項目管理等功能。此外，還提供社會化協做功能，包含了社交元素，方便開發者進行技術討論和協做。
2016年3月CODING宣佈收購代碼託管平臺GitCafe。

以前好多小夥伴都是將項目託管在gitcafe上，可是如今gitcafe被coding收購了，因而就轉到coding上了，以前好多人說github的服務器在國外，因而就轉戰國內的coding了，我將代碼遷移至coding還有另一個緣由，github不讓百度的爬蟲爬取啊，讓我哭一會，否則也不會這樣折騰。coding就是中國版的github（只是打一個比喻），有提供pages服務。

在coding上建立倉庫

首先咱們先要建立一個coding帳號而且在coding上建立一個項目,必需要是公開項目，私有項目是沒有page服務的，項目名稱能夠隨意起

建立coding項目
建立coding項目

將hexo博客同步到新建立的倉庫中

第一次使用coding須要使用ssh，方法和以前github是同樣同樣的，將ssh公鑰複製到coding上

本身的ssh公鑰
本身的ssh公鑰

coding中貼入ssh
coding中貼入ssh

在coding中添加過ssh公鑰以後咱們須要修改hexo根目錄下的配置文件,官方要求配置格式以下 

deploy:
  type: git
  message: [message]
  repo:
    github: <repository url>,[branch]
    gitcafe: <repository url>,[branch]複製代碼

因此個人配置就是這樣的(我這個配置github和coding都有ssh和https兩種方式)：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo:
    #github: git@github.com:sunshine940326/sunshine940326.github.io.git
    github: https://github.com/sunshine940326/sunshine940326.github.io.git
    coding: git@git.coding.net:cherry940326/cherry940326.git
    #coding: https://git.coding.net/cherry940326/cherry940326.git複製代碼

完成以後在git bash 中輸入

ssh -T git@git.coding.net複製代碼

若是獲得如圖提示就說明配置成功了

配置成功ssh
配置成功ssh

而後從新部署hexo就將代碼上傳至coding上了

設置coding的pages服務

將代碼上傳至coding以後咱們就要開啓pages服務了，在pages頁面咱們只須要將部署來源選擇爲master分支，而後將自定義域名填寫咱們本身購買的域名就能夠了

找到pages
找到pages

配置pages
配置pages

設置域名解析

而後咱們到萬網下面設置咱們的域名解析，將默認ip解析到coding上（這裏要注意，解析到coding時記錄值是pages.coding.me，並無具體的帳號名或者倉庫名，而且只有設置完成域名解析才能夠在coding上設置自定義域名），將海外的ip解析到github上，設置以下：

域名解析
域名解析

至此就完成了將你的hexo編譯的博客同時部署在github和coding上

多終端編輯hexo博客

以前就想到了一個問題，若是我想要在公司寫博客怎麼辦，或者說若是我換電腦了怎麼辦，由於在github中的咱們github.io項目是隻有編譯後的文件的，沒有源文件的，也就是說，若是咱們的電腦壞了，打不開了，咱們的博客就不能進行更新了，因此咱們要把咱們的源文件也上傳到github上，這道題的解題思路（哈哈，忽然想到這個詞了）是，將咱們的源文件上傳至username.github.io的Hexo分支，而且設置爲默認分支（分支須要本身建立），而後對咱們的源文件進行版本管理，這樣咱們就能夠在另外一臺電腦上pull咱們的源碼，而後編譯完以後push上去。

更爲優雅的方式是使用travis-ci，而後用webhook自動部署。你只須要寫markdown，push到github就好了。根本不用關心deploy，只要維護你的markdown就行。詳情請參考：blog.bigruan.com/2015-03-09-…

建立Hexo分支

建立兩個分支：master 與 Hexo,並將Hexo設置爲默認分支（這個Hexo分支就是存放咱們源文件的分支，咱們只須要更新Hexo分支上的內容據就好，master上的分支hexo編譯的時候會更新的）

刪除文件夾內原有的.git緩存文件夾並編輯.gitignore文件

由於有些主題是從git上clone過來的，因此咱們要先刪除.git緩存文件，不然會和blog倉庫衝突（.git默認是隱藏文件夾，須要先開啓顯示隱藏文件夾。.git文件夾被刪除後整個文件對應的git倉庫狀態也會被清空)
.gitignore文件做用是聲明不被git記錄的文件，blog根目錄下的.gitignore是hexo初始化帶來的，能夠先刪除或者直接編輯，對hexo不會有影響。建議.gitignore內添加如下內容：

/.deploy_git
/public  
/_config.yml複製代碼

.deploy_git是hexo默認的.git配置文件夾，不須要同步

public內文件是根據source文件夾內容自動生成，不須要備份，否則每次改動內容太多
即便是私有倉庫，除去在線服務商員工能夠看到的風險外，還有云服務商被攻擊形成泄漏等可能，因此不建議將配置文件傳上去

初始化倉庫

而後咱們再初始化倉庫，從新對咱們的代碼進行版本控制

git init
git remote add origin <server>複製代碼

<server>是指在線倉庫的地址。origin是本地分支,remote add操做會將本地倉庫映射到雲端

將博客源文件上傳至Hexo分支

依次執行

git add .
git commit -m "..."
git push origin hexo複製代碼

提交網站相關的文件；

對B電腦進行的操做

假設B電腦如今沒有咱們的源文件

git init
git remote add origin <server> #將本地文件和雲端倉庫映射起來。
git fetch --all
git reset --hard origin/master複製代碼

平常改動

平時咱們對源文件有修改的時候記得先pull一遍代碼，再將代碼push到Hexo分支，就和平常的使用git同樣~

  1. 依次執行git add .、git commit -m "..."、git push origin Hexo指令將改動推送到GitHub（此時當前分支應爲Hexo）；
  2. 而後才執行hexo g -d發佈網站到master分支上。

使用gulp壓縮你的代碼

當你在你的博客頁面右鍵查看源代碼的時候，你會發現你的html頁面中會有大段大段的空白，這個時候咱們就要使用壓縮工具對咱們的代碼進行壓縮，在前一段時間參見的前端開發者大會（FDCon2017）中，攜程的框架式就有講到，在攜程，線上的資源是須要申請的（單位具體到k），因此說咱們的代碼不壓縮實在是太奢侈~

什麼是gulp

在2017年的前端中，gulp彷佛不是最流行的自動化工具，可是誰讓咱們公司用的是gulp呢。爲了能和公司用同樣的構建工具，因此我本身的博客也是使用的gulp。
gulp是前端開發過程當中對代碼進行構建的工具，是自動化項目的構建利器。不只能對網站的資源進行優化，而且能在開發過程當中可以對不少重複的任務使其自動完成。

能自動化地完成 javascript/coffee/sass/less/html/image/css 等文件的的測試、檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動後重復指定的這些步驟。在實現上，她借鑑了Unix操做系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，使得在操做上很是簡單。

既然gulp是基於node，因此咱們就要先有node環境，不過咱們自己就是使用hexo構建咱們的博客，就已是基於node環境了~

npm小知識

npm（node package manager）nodejs的包管理器，用於node插件管理（包括安裝、卸載、管理依賴等）

####使用npm安裝插件：npm install <name> [g] [--save -dev]

  • <name>:node 插件名稱
  • -g:全局安裝，會在node安裝的根目錄下載對應的包，在計算機的任何文件均可以使用該插件，默認的node安裝目錄是：C:\Users\Administrator\AppData\Roaming\npm;若是不帶該屬性，將會安裝在當前目錄，下載安裝包的位置是當前目錄的node_modules文件夾
  • --save：將配置信息保存在node項目配置文件package.json中
  • -dev：保存至package.json的devDependencies節點，若是沒有該屬性，該插件將會被保存至dependencies節點，devDependencies和dependencies有什麼區別呢？其實從名字就應該能夠看出來二者的區別，devDependencies中dev是development（開發）的縮寫，dependencies是依賴的意思。因此 dependencies 是程序正常運行所須要安裝的依賴，而devDependencies是開發所須要的依賴，好比一些單元測試的包~
  • 爲何要保存至package.json？由於咱們使用node的時候須要不少的包，因此咱們將咱們的配置信息，也就是咱們須要包的名稱等其餘信息保存至一個文件中，若是說其餘開發者就能夠直接使用一個命令就能夠安裝和咱們相同的配置，這個命令就是npm install，就能夠下載package.json 下全部須要的包。npm install --production則只下載dependencies下的包

使用npm卸載插件：npm unstall <name> [-g] [--save-dev]

  • 在npm中要卸載插件不是將文件夾刪除就能夠了，由於你的配置信息還在package中，因此要使用npm unstall <name> [-g] [--save-dev] 命令
  • 刪除所有插件:rimraf node_modules（首先你須要先安裝rimraf 插件）

更新npm插件：npm update <name> [g] [--save-dev]

使用cnpm

什麼是cnpm呢，你們都知道，因爲不可描述緣由，咱們訪問國外的資源有時候的速度，你們懂的，因此淘寶除了一個npm鏡像，服務器就在中國。c能夠理解爲China（應該能夠這樣理解吧）,cnpm使用方法和npm徹底相同，只需將npm所有換成cnpm就能夠。本文都是使用的npm，若是想要嘗試cnpmde的麻煩自行替換~

這是一個完整 npmjs.org 鏡像，你能夠用此代替官方版本(只讀)，同步頻率目前爲 10分鐘 一次以保證儘可能與官方服務同步。

cnpm 官網地址：npm.taobao.org；
安裝命令爲npm install cnpm -g --registry=https://registry.npm.taobao.org

注意：安裝完後最好查看其版本號cnpm -v或關閉命令提示符從新打開，安裝完直接使用有可能會出現錯誤；

全局安裝gulp

言歸正傳，簡單介紹了gulp和npm，咱們須要的是使用gulp壓縮咱們的代碼
npm install gulp -g,而後npm -v 查看版本號就能夠知道咱們是否是安裝成功了~★,°:.☆(￣▽￣)/$:.°★。撒花！

新建package.json

使用npm init就能夠建立package.json文件

建立package.json文件
建立package.json文件
，而後輸入yes以後你就會在文件夾中找到建立好的package.json文件。來貼一下我如今的package.json文件，已是安裝了很多包的了~ 

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": "3.2.2"
  },
  "dependencies": {
    "gulp": "^3.9.1",
    "gulp-htmlclean": "^2.7.14",
    "gulp-htmlmin": "^3.0.0",
    "gulp-imagemin": "^3.2.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-uglify": "^2.1.2",
    "hexo": "^3.2.0",
    "hexo-baidu-url-submit": "0.0.5",
    "hexo-deployer-git": "^0.2.0",
    "hexo-generator-archive": "^0.1.4",
    "hexo-generator-baidu-sitemap": "^0.1.2",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-index": "^0.2.0",
    "hexo-generator-sitemap": "^1.1.2",
    "hexo-generator-tag": "^0.2.0",
    "hexo-renderer-ejs": "^0.2.0",
    "hexo-renderer-marked": "^0.2.10",
    "hexo-renderer-stylus": "^0.3.1",
    "hexo-server": "^0.2.0",
    "hexo-util": "^0.6.0",
    "hexo-wordcount": "^2.0.1"
  },
  "devDependencies": {
    "gulp-babel": "^6.1.2",
    "gulp-clean": "^0.3.2",
    "hexo-generator-baidu-sitemap": "^0.1.2"
  }
}複製代碼

本地安裝gulp插件

在你的Hexo目錄下右鍵git bash here而後執行npm install <name> --save,和gulp有關的包名稱有如下幾個，只需將<name>替換一下就好~

"gulp": "^3.9.1",
    "gulp-htmlclean": "^2.7.14",
    "gulp-htmlmin": "^3.0.0",
    "gulp-imagemin": "^3.2.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-uglify": "^2.1.2",複製代碼

聰明的你是否是以爲有些眼熟，對的，就是我po出來的package.json中dependencies下面對應的包名稱和版本號~是否是和剛剛所講的npm的知識聯繫到了一塊呢~

創建gulp.js

gulp.js是gulp的配置文件，須要咱們手動建立（應該還會有更高級的方法T T ）
個人gulp.js文件以下

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');

// 獲取 gulp-imagemin 模塊
var imagemin = require('gulp-imagemin')

// 壓縮 public 目錄 css
gulp.task('minify-css', function() {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss())
        .pipe(gulp.dest('./public'));
});
// 壓縮 public 目錄 html
gulp.task('minify-html', function() {
    return gulp.src('./public/**/*.html')
        .pipe(htmlclean())
        .pipe(htmlmin({
            removeComments: true,  //清除HTML註釋
            collapseWhitespace: true,  //壓縮HTML
            collapseBooleanAttributes: true,  //省略布爾屬性的值 <input checked="true"/> ==> <input checked />
            removeEmptyAttributes: true,  //刪除全部空格做屬性值 <input id="" /> ==> <input />
            removeScriptTypeAttributes: true,  //刪除<script>的type="text/javascript"
            removeStyleLinkTypeAttributes: true,  //刪除<style>和<link>的type="text/css"
            minifyJS: true,  //壓縮頁面JS
            minifyCSS: true  //壓縮頁面CSS
        }))
        .on('error', function(err) {
            console.log('html Error!', err.message);
            this.end();
        })
        .pipe(gulp.dest('./public'))
});
// 壓縮 public/js 目錄 js
gulp.task('minify-js', function() {
    return gulp.src('./public/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});


// 壓縮圖片任務
// 在命令行輸入 gulp images 啓動此任務
gulp.task('images', function () {
    // 1. 找到圖片
    gulp.src('./photos/*.*')
    // 2. 壓縮圖片
        .pipe(imagemin({
            progressive: true
        }))
        // 3. 另存圖片
        .pipe(gulp.dest('dist/images'))
});

// 執行 gulp 命令時執行的任務
gulp.task('build', [
    'minify-html','minify-css','minify-js','images',
]);複製代碼

執行gulp：gulp build

gulpbuild執行結果
gulpbuild執行結果

在git bash中執行

在git bash中直接輸入命令gulp build就能夠，這個gulp build是你本身建立的任務，你建立的任務是什麼名的就在gulp後面跟什麼名字

在webstorm中執行

webstorm真的太強大，已經幫咱們繼承了gulp，咱們只須要動動鼠標就能夠執行gulp

在webstorm中執行gulp
在webstorm中執行gulp

增長七牛圖牀

增長七牛圖牀就是要將咱們電腦上的圖片上傳至七牛，而後得到外鏈，在咱們使用md寫博客的時候直接插入外鏈，更方便的是能夠直接獲取帶水印、壓縮、剪裁事後的圖片~

註冊七牛

萬年不變的第一步，註冊。官網：七牛雲

上傳資源

在登陸成功以後，點擊對象存儲

上傳資源至七牛
上傳資源至七牛

上傳完圖片以後，關閉上傳頁面，能夠在圖片列表的最後面有一個眼睛的icon，點擊以後就會在右下角找到該圖片的外鏈，在用md寫博客的時候就能夠直接加入外鏈就好~也能夠對上傳的源文件進行重命名，由於大部分我上傳到七牛上的圖片都是相冊中使用的，因此我將源文件的名字都改爲統一的形式，在引用的時候只須要修改最後的數字就能夠~
上傳資源至七牛
上傳資源至七牛

添加水印

使用七牛圖牀最棒的地方在於能夠對圖片進行處理，我就只拿添加水印來舉例。
七牛能夠對上傳的圖片添加圖片樣式

增長圖片樣式
增長圖片樣式

增長圖片樣式就是對圖片進行處理，這裏的處理方式有不少，好比縮放方式、裁剪、增長圖片水印、設置輸出格式。
增長圖片樣式
增長圖片樣式

在設置了圖片樣式以後咱們要怎麼使用呢，開始我也是一臉懵逼的，不知道怎麼使用，百度以後才知道，你直接訪問獲取的外鏈就是你上傳的原圖，在外鏈的後面加上鍊接符和你的樣式名稱訪問的就是通過處理後的圖片，有沒有很贊~既能夠訪問到你的原圖片，也能夠訪問到通過處理後的圖片，只不過是鏈接不一樣，還能夠給一個圖片增長多個樣式訪問，就不須要咱們一張一張對圖片進行處理了~簡直不能太贊~(～￣▽￣)～好比:個人原圖地址是： oova2i5xh.bkt.clouddn.com/IMG49.jpg ，能夠看到是一張很大的不帶水印的圖片
這裏寫圖片描述
這裏寫圖片描述

而後在該地址後加上我設置的鏈接符,"-"和個人樣式名稱： oova2i5xh.bkt.clouddn.com/IMG49.jpg-c… ，就能夠看到是一張帶水印的小圖，我進行了縮放和加水印
這裏寫圖片描述
這裏寫圖片描述
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程