yazi 前端腳手架

前端自動化工程

Installation

sudo npm install -g yazi

Getting To Know yazi

初始化前端腳手架 init

1. yazi mb init

2. yazi pc init

生成前端項目腳手架，腳手架目錄：

[test-613]
  | -- package.json
  | -- [src]
  |     | -- [images]
  |     |     | -- [slice]
  |     | -- index.html
  |     | -- [js]
  |     |     | -- index.js
  |     | -- [less]
  |     |     | -- style.less
  |     | -- [lib]

當前yazi版本生成的腳手架只常規的符合commonjs規範。並無支持vue，react等。

根據mb/pc不一樣生成的腳手架具體內容不一樣，好比html頭信息不一樣。

browser-sync實時調試 dev

1. yazi dev

調試模式下打開默認打開localhost:8000頁面。
在調試過程當中支持

• es6編譯

• less編譯

• 書寫js的commonJS規範（require）

能夠在項目中進行npm install xxx --save

項目構建 build

1. yazi build -s 1

2. yazi build -s 2

3. yazi build

yazi build

將src文件夾內的項目文件構建並生成build文件夾。

其中包含：

• es6編譯混淆壓縮

• less編譯

• 圖片壓縮

注意事項：

須要進行雪碧圖轉換的圖片須要放在images/slice文件下內，而且在css中須要使用background-image屬性引用圖片。

.test1 {
    width: 30px;
    height: 30px;
    background-image: url('../images/slice/img1.png');
}

yazi build -s 1

將src文件夾內的項目文件構建並生成build文件夾，並將圖片轉換爲雪碧圖，修改對應css。

此處的 -s 1表示sprite雪碧圖設置，而且在普通屏幕上使用（pc和非retina屏）

yazi build -s 2

將src文件夾內的項目文件構建並生成build文件夾，並將圖片轉換爲雪碧圖，修改對應css。

此處的 -s 2表示sprite雪碧圖設置，而且在retina屏使用。

TODO

• [ ] 添加一些處理css的gulp插件

• [ ] build時圖片進行七牛空間自動上傳。

License

MIT © 南洋
github