用 npm scripts 來構建前端專案的嘗試

2021-07-12 06:12:13 字數 1811 閱讀 2700

2016-04-02 23:20:12

1341瀏覽

最近讀了 why i left gulp and grunt for npm scripts。讀完後,覺的這文章寫的相當不錯,就決定嘗試下。

下面先簡單介紹下 npm scripts。

什麼是 npm scripts

node.js 專案下一般都有乙個 package.json 檔案,檔案的內容類似這樣:

,

"dependencies":,

"engines":,

"repository":,

"keywords":[

"node"

,"heroku"

,"express"

],"author"

:"mark pundsack"

,"contributors":[

"zeke sikelianos ("

],"license"

:"mit"

}

其中,

"scripts"

:

即為 npm scripts。

npm scripts 是用定義來一些任務的。我們在命令列中執行npm run 任務名,即可執行這個命令。如,在上面的例子中,如果在命令列中執行

npm run start
即會執行 start 對應的node index.js.

用 npm scripts 的優勢

npm scripts 中的任務可以呼叫命令列中的 api。換種說法,所有能在命令列中用的命令都可以在 npm scripts 中用。是不是有點小激動~

例如,刪除某個資料夾下的所有檔案,可以這麼寫

"scripts"

:

其中,rm -rf 資料夾路徑為 unix/linux 下命令列中刪除資料夾的命令。當然 windows 並不支援該命令。要做到跨平台。可以用第三包rimraf。在你全域性安裝了 rimraf(npm -g i rimraf)後,配置

"scripts"

:

執行npm run remove就能做到在不同平台都能刪除資料夾。

如用用 gulp 來做同樣的事,就只能找 gulp 的外掛程式來做了(grunt 也一樣)。

進入正題

我做了乙個前端腳手架專案:front-end-scaffold(還處於 alpha 狀態)。下面具體介紹,用 npm scripts 來構建該專案。

開發階段

主要做這幾件事:

在 package.json 的配置如下

"scripts"

:

開發時只需執行

npm run start
其中 compass 需要先安裝。其他即幾個在安裝該項目的依賴時被安裝

"devdependencies"

:

發布時

主要做這幾件事:

在 package.json 的配置如下

"scripts"

:

發布時只需執行

npm run build
ps: 最近剛拿到 «程式設計師健康指南» ,就有點扁桃體發炎,是要我趕快看那書的節奏麼~ 大家也要注意身體那。

參考鏈結

用buildout來構建python專案

buildout 的中文文件非常稀少,這裡有篇blog,抄一些東西過來 demo 假設你有乙個專案newproject,從來用過buildout,安裝什麼的就不說了 cd newproject buildout init wget o bootstrap.py python bootstrap.py...

用 PHP 來刷leetCode 之 最長公共字首

編寫乙個函式來查詢字串陣列中的最長公共字首。如果不存在公共字首,返回空字串 示例 1 輸入 flower flow flight 輸出 fl 示例 2 輸入 dog racecar car 輸出 解釋 輸入不存在公共字首。說明 所有輸入只包含小寫字母a z。param string strs ret...

使用SQLAlchemy來構建表

from datetime import datetime from flask sqlalchemy import sqlalchemy from sqlalchemy.dialects.mysql import tinyint,bigint,varchar,char,datetime,integ...