《一統江湖的大前端》系列是自己的前端學習筆記，旨在介紹javascript在非網頁開發領域的應用案例和發現各類好玩的js庫，不定期更新。如果你對前端的理解還是寫寫頁面綁綁事件，那你真的是有點OUT了，前端能做的事情已經太多了, 手機app開發 , 桌面應用開發 , 用於神經網絡人工智能的庫 , 頁面遊戲 , 數據可視化 , 甚至 嵌入式開發 ，什麽火就搞什麽,活脫脫一個蹭熱點小能手。如果你也覺得前端的日常開發有些枯燥，不妨一起來看看前端的另一番模樣。

前端開發人員的工作內容幾乎很少會涉及腳本的編寫，建議將shell.js和git的命令行指令綜合在一起作為專題學習，集中學習一下常用指令。更詳細的參數請參考專門的shell腳本語言資料進行學習。

一.Shell && Shelljs

碼農界存在著無數條鄙視鏈，linux使用者對windows的鄙視便是其中之一，cli使用者對GUI用戶的嘲諷也是如此，在這樣一個講究逼格的時代，如果你的桌面上沒有一個小黑窗時不時地從下往上翻滾並拋出一些亮綠色的字符串，你真不好意思跟人打招呼。而前端這種天生幾乎不用和命令行打交道的物種，自然再一次莫名其妙地處在了鄙視鏈的末端，沒錯，是再一次。

Shell是linux下的腳本語言解析器，擁有豐富且強大的底層操作權限。Shelljs就是基於node的一層命令封裝插件，讓前端開發者可以不依賴linux也不依賴類似於cmder的轉換工具，而是直接在我們最熟悉不過的javascript

二.前端開發人員學Shelljs幹嘛

shell跟自動化是強相關的，個人理解其用途主要是兩方面：

• 1.從業務邏輯的需求來看，shelljs並不是什麽具有非凡意義的插件，它只是對node的底層API進行了一些封裝，方便我們以類似shell的語法去編寫代碼梳理邏輯，實現一些業務邏輯需求，如果你所在的項目組恰好需要這樣的能力，用它會很方便;
• 2.cli相對於GUI或許是更快，但它依然是一種重復勞作，有了shelljs和全棧能力，開發者可以將團隊中耗時的重復性常規動作編寫為自動化腳本，並利用前端的天然優勢為其配備GUI，用頁面上的一鍵點擊來替代重復勞作，在緊張的開發節奏中，平均每天為你節約個30-40
  分鐘起來走走喝杯水難道不好嗎？

想要一統江湖，大前端的深度和廣度是缺一不可的，你可以說你不精通shell，但不要說自己不懂shell，更不要一臉天真地反問面試官“前端還能搞shell？這麽神奇？”他不會覺得你對知識有好奇心，只會覺得你很low，哦不對，是大寫的LOW.

三.官方示例（包含註釋）

廢話說完了，開始學習，拿好小本子，我要開車了。

//引入shelljs
var shell = require(‘shelljs‘)

//檢查控制臺是否以運行`git `開頭的命令
if (!shell.which(‘git‘)) {
  //在控制臺輸出內容
  shell.echo(‘Sorry, this script requires git‘);
  shell.exit(1);
}

shell.rm(‘-rf‘,‘out/Release‘);//強制遞歸刪除`out/Release目錄`
shell.cp(‘-R‘,‘stuff/‘,‘out/Release‘);//將`stuff/`中所有內容拷貝至`out/Release`目錄

shell.cd(‘lib‘);//進入`lib`目錄
//找出所有的擴展名為js的文件，並遍歷進行操作
shell.ls(‘*.js‘).forEach(function (file) {
  /* 這是第一個難點：sed流編輯器,建議專題學習，-i表示直接作用源文件 */
  //將build_version字段替換為‘v0.1.2‘
  shell.sed(‘-i‘, ‘BUILD_VERSION‘, ‘v0.1.2‘, file);
  //將包含`REMOVE_THIS_LINE`字符串的行刪除
  shell.sed(‘-i‘, /^.*REMOVE_THIS_LINE.*$/, ‘‘, file);
  //將包含`REPLACE_LINE_WITH_MACRO`字符串的行替換為`macro.js`中的內容
  shell.sed(‘-i‘, /.*REPLACE_LINE_WITH_MACRO.*\n/, shell.cat(‘macro.js‘), file);
});

//返回上一級目錄
shell.cd(‘..‘);

//run external tool synchronously
//即同步運行外部工具
if (shell.exec(‘git commit -am "Auto-commit"‘).code !== 0){
    shell.echo(‘Error: Git commit failed‘);
    shell.exit(1);
}

三.官方示例中涉及的命令解釋：

• shell.which(command)

  在環境變量PATH中尋找指定命令的地址，判斷該命令是否可執行，返回該命令的絕對地址。

• echo

  在控制臺輸出指定內容

• exit(code)

  以退出碼為code退出當前進程

• rm

  刪除一個目錄中一個或多個文件或目錄，一旦刪除，無法恢復。 常用參數：

  • -f:強制刪除文件;
  • -i:刪除之前先詢問用戶;
  • -r:遞歸處理目錄;
  • -v:顯示處理過程;

• cp([options,] source_array, dest)

  用來將一個或多個源文件或目錄復制到指定的文件或目錄。 常用參數:

  • -f:強制刪除文件;
  • -i:刪除之前先詢問用戶;
  • -r:遞歸處理目錄;

• cd

  切換工作目錄至指定的相對路徑或絕對路徑。cd..為返回上一級，cd-回到前一目錄。

• ls

  用來顯示目標列表。 常用參數:

  • -a:顯示所有文件;
  • -C:多列顯示查詢結果;
  • -l:單列長格式顯示查詢結果(與-C相反);
  • -R:遞歸處理目錄;

• sed([options,] search_regex, replacement, file_array

  將file_array中符合search_regex的內容替換為replacement，支持正則的捕獲組自引用。一次處理一行內容，處理完成後把緩沖區內容送往屏幕，然後處理下一行，循環直至結束。功能豐富且用法較復雜，建議自行百度進行專題學習。

  • -i:直接作用源文件

• cat

  將一個或多個文件內容讀入，指定一個文件時讀入該文件，指定多個文件時將內容連接在一起讀入。

• exec(command,[, options][, callback])

  執行所傳入的命令

  • async:是否異步執行,默認false，傳入callback時自動開啟
  • slient:不輸出信息到console,默認false
  • encoding:默認utf8

四.文檔中其他API概覽

• chmod

  設置文件調用權限

  • 基本語法 ：chmod [-cfvR] [--help] [--version] mode file...
  • -c：若文件權限確實被更改，才顯示更改動作
  • -f: 權限無法被更改時不顯示錯誤信息
  • -v: 顯示權限變更的詳細資料
  • -R: 遞歸，對其目錄下所有文件和子文件執行相同操作
  • mode字段格式 : [ugoa...][[+-=][rwxX]...][,...]
  • u表示該文件擁有者，g表示同一群體者，o表示其他，a表示所有
  • +表示增加權限，-表示取消權限，=表示唯一設定權限
  • r表示可讀，w表示可寫，x表示可執行，X表示當該文件是個子目錄？

• find(path[,path...])

  尋找路徑

• grep([options,] regex_filter,file)

  從指定文件中抓取符合正則的行

  • -v:翻轉正則匹配
  • -l:僅打印符合條件的文件名

• head([{‘-n‘:<num>,}] file)

  顯示指定文件中的前N行

  • -n<num>:顯示前<num>行

• mv

  移動文件

• pwd

  返回當前目錄

• rm

  見上文

• set

  設置全局變量的值

• sort

  將文件的內容逐行排序

  • -r:反轉結果
  • -n:依據數值對比

• tail

  讀取指定文件的末尾n行，對比head命令進行理解

• test（）

  評估一個表達式是否為真(以下僅為最常見的參數用例)

  • -d,path:如果path是一個路徑則返回true
  • -e,path:如果path存在則返回true

• ShellString()

  構造器，將一個字符串轉化為Shell字符串,轉化後的字符串支持鏈式調用特殊的shell命令

• ShellString.Prototype.to()

  將shellString輸出至指定文件,相當於腳本語言中的>

• ShellString.Prototype.toEnd()

  將shellString追加至指定文件,相當於腳本語言中的>>

• touch([options,]file)

  生成文件

  • -m：僅修改編輯時間
  • -c：不創建任何文件
  • -d DATE:指定時間
  • -r FILE:用FILE的時間替代新文件時間

• env[‘VAR_NAME‘]

  指向process.env

• Pipes鏈式調用支持

  sed,grep,cat,exec,to,toEnd均支持鏈式調用。

一統江湖的大前端（4）shell.js——穿上馬甲我照樣認識你