最近主要在寫前端的模板類專案,由於其中的webpack配置和引進資料注入ejs模板的方法大同小異,所以萌發出把該模板框架提取出來作為乙個常用的腳手架,也方便以後同事可以進行復用。
之前在看《前端工程化:體系設計與實踐》裡面有提到過yeoman構建腳手架,先入為主,所以就用了yeoman來搭建自己的腳手架
1,node環境
在終端上執行node -v
,如果顯示node版本號,說明已有node環境
2,安裝yeoman工具集
1 npm install --global yo驗證是否已經安裝
1 yo --version1,新建乙個資料夾,以generator-name命名,其中name是建立的generator的名字。
npm init 初始化專案,在package.json中增加:
1和依賴項//2 "files": [4],
5 "keywords": [
6 "yeoman-generator"
7 ],
1 "dependencies":
13,新建templates檔案,並把index.js提到的複製內容塊的目錄下放著你自己的腳手架內容//引進yeoman-generator
2 let generator = require('yeoman-generator');
3 module.exports =class extends generator ,13,
25]26return
this
.prompt(questions).then(
27function
(answers)
31 }.bind(this
));32}33
writing()
40 }
目錄如下:(其中module為你的整個腳手架內容)
1 npm link新建新的專案workpalce,執行yo,如果看到cms module說明搭建腳手架成功~
1,npm註冊
在npm上進行註冊
2,登入
在控制台上執行npm login,可以看到:
3,發布
在generator-name專案於根目錄下執行npm public
發布到npm上
注意:每次進行修改後上傳都需要在package.json上修改版本
一般來說,版本分成三部門:a.b.c
1,確保你本地安裝了yo
1 yo --version執行
npm install -g generator-cms-module
就可以把腳手架放在你自己的yo上
3,引用
在專案上執行yo
,會出現可以看到cms module的個人generator,選擇並按提示輸入資訊就可以把該腳手架的**create到專案裡
github
使用Yeoman定製前端腳手架
首先附上yeoman官網 yeoman.io 我製作的前端腳手架 generator jake front 以及我在前端同學的分享會上的分享ppt yeoman.key 如果想快速製作乙個腳手架,並且不需要實現特別複雜的定製化,看完這篇文章足夠,如果想要實現複雜的功能,需要去檢視官方文件。需要安裝n...
使用Yeoman定製前端腳手架
首先附上yeoman官網 我製作的前端腳手架 generator jake front 以及我在前端同學的分享會上的分享ppt yeoman.key 如果想快速製作乙個腳手架,並且不需要實現特別複雜的定製化,看完這篇文章足夠,如果想要實現複雜的功能,需要去檢視官方文件。需要安裝nodejs 全域性安...
yeoman編寫自己的腳手架
在 gulp 時代,就開始有使用 yeoman,感覺是乙個特別方便的腳手架.在使用angularjs的時候,經常用這個腳手架生成一些小東西去學習 yeoman 上有乙個比較完善的學習教程 getstart 但是突然想到有沒有 generator 的 generator 果然有.操作命令如下 npm ...