本文介紹hexo使用grunt實現一些自動化操作。
開發過前端或者node.js的同學對grunt應該不陌生,如果對grunt不熟悉可略過本文。
開始使用hexo來處理靜態部落格時我就遇到了問題,我的文章已經寫了很多篇了,都是markdown格式,而且託管在github上了,然而hexo並不支援匯入文章。
好在我發現只要把markdown檔案拷貝到hexo裡的source/_posts
,hexo就會解析,我可以考慮直接把所有文章直接拷貝到這個目錄。
但是另外乙個問題又出現了,問題在於存在兩份一模一樣的原始檔,乙份我託管在github上,乙份在source/_posts
,後期文章改動的話,兩邊不同步,維護很費力。
後來想到的方法就是利用自動化工具來處理原始檔的拷貝,部落格的部署等一些操作。由於對grunt比較熟悉,所以使用了grunt。
如果對grunt不熟悉,可以前往grunt **
完成後,我的hexo部落格裡的目錄結構是這樣子的:
以下為使用到的外掛程式:
外掛程式作用
grunt-bg-shell
在後台執行shell命令
grunt-contrib-clean
刪除檔案和目錄
grunt-contrib-copy
拷貝檔案和目錄
grunt-contrib-watch
監測檔案的新增、修改與刪除並執行對應的任務
grunt-rewrite
檔案特定內容的替換
grunt-shell
執行shell命令
grunt-zip
zip壓縮
load-grunt-tasks
自動載入grunt外掛程式
新建gruntfile.js
,以下是我的gruntfile.js
的內容:
上述// see:
module.exports = function
(grunt) ,
clean: ,
},copy: );
};return matchregex(filepath, patterns);
},}],
},},
watch: ,
},},
bgshell: ,
},shell: ,
gitpullraw: ,
hexogenerate: ,
hexoclean: ,
},rewrite:
},},
zip: }};
grunt.initconfig(config);
require('load-grunt-tasks')(grunt);
// 執行grunt init 呼叫此任務
grunt.registertask('init', [
'shell:gitclone'
]);grunt.registertask('rawtoposts', [
'shell:gitpullraw',
'rewrite:abbrlink',
'copy:main',
]);// 執行 grunt 或者 grunt default 呼叫此任務
grunt.registertask('default', [
'clean:posts',
'rawtoposts',
'bgshell:hexoserver',
'watch',
]);// 執行grunt build呼叫此任務
grunt.registertask('build', [
'clean:posts',
'rawtoposts',
'shell:hexoclean',
'shell:hexogenerate',
'zip:dist'
]);};
gruntfile.js
中有三個比較重要的任務:
* grunt init
* grunt
* grunt build
grunt init
任務是呼叫shell:gitclone
把我的部落格原始檔從github上拉取下來,放到raw/my_blog
目錄,這個命令只需要執行一次,後期不再需要。
grunt
任務用於日常本地寫部落格,它的子任務分別是:
*clean:posts
: 刪除source/_posts
下的所有檔案
*rawtoposts
: 從github拉取更新到raw/my_blog
,並拷貝符合條件的檔案到source/_posts
*bgshell:hexoserver
: 執行hexo server
,啟動hexo本地服務
*watch
: 監測檔案變化,輔助hexo server
重新整理
grunt build
任務用於發布部落格,它的子任務分別是:
*clean:posts
: 刪除source/_posts
下的所有檔案
*rawtoposts
: 從github拉取更新到raw/my_blog
,並拷貝符合條件的檔案到source/_posts
*shell:hexoclean
: 執行hexo clean
*shell:hexogenerate
: 執行hexo genetate
*zip:dist
: 打包public
成為blog.zip
通過上述grunt自動化指令碼,我保持了部落格檔案與hexo部落格環境相分離的目標,我只需要執行grunt build
,grunt會自動幫我拉取最新的部落格檔案並最終生成hexo目標檔案。
這樣做的好處是以後不使用hexo時,我可以很方便轉移我的部落格。
如果是使用github pages
來託管部落格的同學,可以把grunt build
的zip:dist
換成自動部署部落格的任務,就能一鍵部署啦。
使用grunt實現瀏覽器自動重新整理
首先安裝必備的外掛程式 因為這是要引入livereload來監聽你對檔案所做的修改,所以需要乙個伺服器來實現瀏覽器與服務期間的通訊,因此,可以利用apache實現。將你的專案放在apache伺服器下。然後就是進行基本的配置了 grunt.initconfig watch files dev test...
前端自動化 grunt的簡單使用
現在前端自動化已經是家常便飯,各種工具也是層出不窮,grunt gulp webpack是應用最廣的三種工具,雖然grunt看似已垂垂老矣,但是以前寫的很多專案一直用的就是grunt,溫故方能知新,這裡把grunt的基本操作再記錄一下。開始使用grunt很簡單,在專案的根目錄中新增兩份檔案 pack...
Grunt 自動任務執行器
b 幹什麼用?b 基於node.js的一款能夠按照預先設定的順序自動執行一系列任務的工具。簡化工作流程,減輕重複性工作帶來的負擔。b 如何使用?b 1.安裝 sudo npm install grunt cli g 2.命令指令碼檔案gruntfile.js 用於配置或定義任務 載入 grunt 外...