linux安裝grunt

㈠ grunt 怎麼安裝已經配置好的packet.json

第一步：搭建環境，主要是nodejs, npm, grunt(grunt-cli)
$ mkdir installGrunt
$ cd installGrunt

$ npm install grunt --save-dev #如果看到如下信息表示grunt安裝成功
$ grunt --version
grunt-cli v0.1.13
grunt v0.4.5

第二步：創建 package.json

# 在項目的根目錄下創建package.json文件
（1）根據grunt-init模板自動創建一個特定的package.json文件；（需要先安裝 npm install -g grunt-init）
（2）在命令終端通過npm init命令自動創建一個基本的package.json文件；（親自測試過）
（3）從官網上復制或者下載一個package.json文件；（對新手最方便）
（4）手工創建一個package.json文件；（對高手最方便）

添加依賴
（1）逐個添加，逐個執行命令 $ npm install XXX --save-dev
XXX是常用插件名，如grunt-contrib-jshint
最好是全稱，不要簡寫。我曾試過 npm install cssmin --save-dev 生成了無用的東西。

（2）也可以一次在package.json中添加多個插件，然後一次執行命令 $ npm install
安裝聲明的依賴關系grunt插件同時， 在項目根目錄下添加一個node_moles目錄，目錄中放置對應grunt插件所需的插件目錄名。
註：當你給npm install添加 --save-dev標志是，一個波浪線范圍將被用於你的package.json中。（建議）

第三步：創建Gruntfile.js
# 添加自己合適的gruntfile配置，運行，得出預期輸出
mowww.hbbz08.com le.exports=function(grunt){
//任務配置
grunt.initConfig({
});
//載入任務
grunt.loadNpmTasks();
//注冊任務
grunt.registerTask();
}
內容參見demo1

$ grunt #

運行成功，在目標目錄下創建了一個壓縮後的js，引用壓縮後的js，效果一樣。

實踐2：加上css壓縮的過程

1，在package.json使用命令加一個插件
npm install grunt-contrib-cssmin --save-dev #一開始使用npm install cssmin不對，下了兩個

2，在Gruntfile.js中三個部分都加入cssmin相關的命令

3，運行grunt

註：如果已經在initConfig里配置了uglify和cssmin，則不能再注冊任務名為uglify和cssmin，報錯如下
(node) warning: Recursive process.nextTick detected. This will break in the next version of node.
Please use setImmediate for recursive deferral（遞歸延遲）.

解決辦法：注釋掉
//grunt.registerTask("uglify",['uglify']);
//grunt.registerTask("cssmin",['cssmin']);
grunt.registerTask("default",['uglify','cssmin']);//默認執行的任務

㈡ grunt壓縮的css問價怎麼解壓縮

安裝

1
要想使用grunt，首先必須將grunt-cli安裝到全局環境中，打開控制台（注意：windows系統下請使用管理員許可權打開），輸入：
npm install -g grunt-cli
注意，mac os 系統、部分linux系統中，在這句話的前面加上「sudo 」指令。

2
回車，命令行會出現一個轉動的小橫線，表示正在聯網載入。載入的時間看你網速的快慢，不過這個軟體比較小，一般載入時間不會很長，稍一會兒，就載入完了。你會看到以下界面。

3
要驗證一下grunt-cli是否安裝完成並生效，你只需要繼續在命令行中輸入
「grunt」命令即可。如果生效，則會出現以下結果：
-- 可能不一樣 --

END
創建一個簡單的網站

1
首先，我在電腦的D盤下面建了一個「grunt_test」文件夾，裡面建了三個空文件夾、兩個空文檔，名稱如下圖。（注意 Gruntfile.js 文件的首字母大寫！）
devDependencies是什麼意思？字面意思解釋是「開發依賴項」，即我們現在這個系統，將會依賴於哪些工具來開發

2
先把package.json這個文件寫一些東西
{ "name": "my", "version": "1.0.0", "devDependencies": {
}

3
接下來我們會有一系列插件的安裝，他們的安裝過程和grunt一樣。但是他們的執行都是基於grunt的，因此才能把grunt叫做一個「構建工具」。

4
注意，這里安裝grunt不再是全局安裝了，需要你在控制台進入到網站或系統的具體目錄下。這里我們進入 D:\grunt_test 目錄下。然後輸入以下命令。

5
應該第一時間打開package.json去看看，那裡的「devDependencies」有什麼變化。我這里的變化如下圖，看看你的是不是和我的一樣
然後你再看看文檔目錄中的文件或者文件夾有什麼變化？我這里多了一個「node_moles」文件夾，其中有一個「grunt」文件夾，再其中有若干文檔。這里就是存儲grunt源文件的地方。

6
在控制台運行「grunt」命令。如果你得到一個warning提示，那說明grunt已經起作用了。

END
配置Gruntfile.js

1
Gruntfile.js 這個文件，肯定是為了grunt做某種配置的。按照grunt的規定，我們首先把Gruntfile.js配置成如下格式

END
Grunt插件

Contrib-jshint——javascript語法錯誤檢查；
Contrib-uglify——壓縮javascript代碼
Contrib-cssmin——壓縮css代碼
Contrib-watch——實時監控文件變化、調用相應的任務重新執行；
Contrib-clean——清空文件、文件夾；
Contrib-——復制文件、文件夾
Contrib-concat——合並多個文件的代碼到一個文件中
使用uglify插件（壓縮javascript代碼）。
安裝uglify插件的方式，和安裝grunt是一樣的。還記得grunt是怎麼安裝的嗎？

我們在現有的「src」文件夾中新建一個「test.js」，並隨便寫一些代碼。顯然，我們無法通過雙手和鍵盤寫出壓縮後的代碼。

第一步，在grunt.initConfig方法中配置 uglify 的配置參數
uglify:
{ target: { files: [{ expand: true,
cwd: 'src', src: ['*.js', '!*.min.js'], ext:
'.min.js' }] }}
)};
grunt.loadNpmTasks('grunt-contrib-uglify');grunt.loadNpmTasks('grunt-contrib-cssmin');grunt.registerTask('default',
['uglify', 'cssmin']);//使用grunt命令執行

以上說的這三步已經OK了，接下來我們去試試。在控制台中運行grunt命令，
控制台將輸入如下信息：
現在好像沒有 -- without errors --

㈢ 為什麼用npm安裝grunt一直不成功

你這個是安裝好了, 然後在 grunt 運行的時候, 你的當前目錄的配置文件不正確, 所以報錯的.

不是因為你沒有安裝好...

grunt 的版本號,在你執行 install的時候,就有告訴你的.

㈣ 怎麼在windows下安裝grunt

在windows下安裝grunt方法如下：

1、按Win+R，出現以下彈框。在彈框內輸入cmd，調出DOS窗口。調出DOS窗口的方法很多，這里就不詳細說明了。

注意事項：因為Grunt.js依賴於node.js的npm來管理和安裝，所以，如果你還沒有安裝node.js，請查看怎麼在windows下安裝node.js

㈤ 為什麼用npm安裝grunt一直不成功

第一步：使用安裝命令npm install -g grunt-cli出現以下情形，明顯不正確。

第二部：驗證一下，直接輸入grunt -v果然出不來，求解決方案

你這個是安裝好了, 然後在 grunt 運行的時候, 你的當前目錄的配置文件不正確, 所以報錯的.
不是因為你沒有安裝好...

㈥ 安裝好grunt，cmd 提示"grunt不是內部或外部命令" 怎麼辦

（一）

去官網下載安裝包 node-v6.9.2.msi，直接點擊安裝。

windows的安裝msi文件在過程中會直接添加path的系統變數，變數值是你的安裝路徑，默認路徑是「C:\Program Files\nodejs」

安裝後，npm也跟著安裝完成。非常智能，以前還需要安裝git 這個工具。

（二）

使用window+r,輸入cmd。如果是w10系統，則需要以管理員身份運行cmd。

如果能正確顯示版本號，則表示安裝成功。

（三）

配置npm的全局模塊的存放路徑以及cache的路徑。

（1）便在NodeJs下建立"node_global"及"node_cache"兩個文件夾。

（2）啟動cmd，輸入

npm config set prefix "C:\Program Files\nodejs\node_global"

npm config set cache "C:\Program Files\nodejs\node_cache"

（3）系統變數下新建"NODE_PATH"，輸入」C:\Program Files\nodejs\node_global\node_moles」

用戶變數"PATH"修改為「C:\Program Files\nodejs\node_global\」

（三）

(1)安裝grunt。

以管理員身份運行 如下命令

npm install -g grunt-cli

(2)

測試是否安裝成功。

cmd,輸入命令行 grunt -version，顯示版本號即成功。

很多時候，會提示 「grunt不是內部或外部命令」，該怎麼辦呢？

這是因為我們雖然在 已經安裝了grunt，但是沒有指定正確的環境變數Path（用戶變數或系統變數）。

例如，在我的系統中，gurnt.cmd 在 "C:\Program Files\nodejs\node_global"

那麼，你可以在 "用戶變數"或"系統變數"的Path 指定路徑。

關閉後，重新啟動cmd運行即可。

㈦ 在linux下怎麼打包直接運行的node-webkit桌面應用

node-webkit 是一個很神奇的桌面客戶端項目,正如這個項目的名字,這個項目是由node 和 webkit 構成,簡單來說,就是你可以用HTML 5和 node 進行桌面客戶端開發,而且客戶端還是同時支持在 WIN,MAC,LINUX運行. 下面,就用一個簡單的例子來展示一下node-webkit的魅力.

創建項目

本例子基於Grunt構建

如果,你用過grunt,要創建一個node-webkit 非常簡單,我已經寫好了一個node-webkit的grunt-init的項目模板. 至於怎麼安裝這個模板,跟官方的教程一樣. 如果你是windows 用戶

md %USERPROFILE%.grunt-init\node-webkit

git clone git@github:youxiachai/grunt-init-node-webkit.git %USERPROFILE%.grunt-init\node-webkit

linux or mac

git clone [email protected]:youxiachai/grunt-init-node-webkit.git ~/.grunt-init/node-webkit

你只需要用

grunt-init node-webkit

就可以創建完畢.

app.nw 這個目錄就是我們准備要開始寫的pc 客戶端的項目文件夾,運行node-webkit項目很簡單,只需要把node-webkit 的運行環境配置到環境變數,然後運行

nw app.nw 就可以運行起來了. nodewebkit1

PS: 如果你不想接觸grunt,不過我建議還是學一下grunt,你可以到github/rogerwang/node-webkit#quick-start 學習如何啟動一個node-webkit應用.

效果圖

oscdesk1

oscdesk2

這個就是所謂的 win 8 風格的客戶端了吧....界面用的框架是這貨:aozora.github.io/bootmetro/ 90% 的時間都是調整界面...蛋疼死了......連個 win8 風格的progress 都沒..讓我非常傷心..也可能是alpha 的原因吧. 不過最後的效果,還是很難看,就湊合著過去吧....

開發

基於node-webkit 開發pc 客戶端語言支持 c/c++,html5,css3, js,node api.好了,現在我們開始用html 5 + css3 寫一個pc 客戶端吧. node-webkit本質就是一個可以跑node 的瀏覽器,所以,我們用web 開發的技巧來開發pc 客戶端毫無問題.

首先,打開toolbar,在package.json文件裡面有個toolbar的參數,設置為true即可,就會見到如下圖所示:

toolbar

點擊那個三橫線的按鈕,一個chrome 風的調試窗口就出來了.

console

開發的時候,我們修改完文件,並不需要重新運行程序來看結果,我們,可以直接點擊左邊的刷新按鈕即可看到我們修改的運行結果.用node-webkit開發客戶端是不是很方便了!

那麼接下來,要開發一個oschina pc 客戶端,我們只需要知道,相關api 就行了,從android 客戶端源碼裡面可以得到相關api...具體代碼在app/model/oschinaApi.js 文件裡面.

node-webkit,已經吧相關的安全限制已經去掉,所以說,用node-webkit開發pc客戶端,用webkit 發的請求不受同源限制. 用node-webkit 開發一些restful 應用是非常舒服的事情,只要有個不錯的界面.關於node-webkit的東西也就這么些了,剩下的就是web 開發,不在本文node-webkit范圍內,所以就不再啰嗦..

㈧ 如何在CentOS / RHEL 7/6/5安裝Grunt

Grunt （JavaScript的任務運行）是一個自動化工具來執行像編譯、單元測試等Grunt有插件一長串執行任務，重復任務。在本教程中，您將學習如何安裝Grunt與Grunt-cli 在CentOS / RHEL 7/6/5系統。
1. 安裝Node.js和NPM
如果你已經擁有Node.js和NPM系統上安裝跳過此步驟。 否則你需要先在系統上安裝Node.js。使用以下命令集你在CentOS，RHEL系統上安裝Node.js和NPM。 # yum install -y gcc-c++ make # curl -sL https://rpm.nodesource.com/setup_6.x | sudo -E bash - # yum install nodejs

2. 安裝使用Grunt NPM
現在，使用下面的命令來安裝Grunt和GruntCLI使用NPM命令行工具。 # npm install -g grunt
安裝成功後，請確保Grunt已安裝成功，並檢查版本。 $ grunt --version grunt-cli v1.2.0

㈨ liunx下安裝sudo npm install -g grunt-cli報錯

我就按照如下 來的
說實話，最好的教程還是官方的。目前我使用的版本是v0.4.1。安裝grunt需要先安裝node.js。現在node的安裝也很方便，下載下來直接安裝完成之後，在cmd下測試node --version和npm --version是否正確顯示即可。