建站
咨詢
售后
建站咨詢
新聞中心
Grunt是一個JavaScript任務(wù)運行工具，可以幫助開發(fā)人員自動化構(gòu)建、優(yōu)化和部署項目。Grunt在近年來得到廣泛的應(yīng)用，成為前端開發(fā)的不可或缺的工具之一。本文將介紹linux下安裝grunt的簡單步驟，幫助初學(xué)者輕松掌握。
我們提供的服務(wù)有：成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、梁山ssl等。為近千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的梁山網(wǎng)站制作公司
步驟一：安裝Node.js
在安裝Grunt之前，我們需要先安裝Node.js。Node.js是一個基于Chrome V8引擎的JavaScript運行環(huán)境，運行速度非常快，可以使得Grunt工作更加穩(wěn)定和高效。
對于Ubuntu系統(tǒng)，我們可以使用以下命令來安裝Node.js:
“`
sudo apt-get install nodejs
“`
對于其他Linux發(fā)行版，請參考該發(fā)行版的官方文檔來安裝Node.js。
步驟二：創(chuàng)建Package.json文件
在安裝Grunt之前，我們需要創(chuàng)建一個Package.json文件來管理項目的依賴項。在該文件中，我們需要指定項目的名稱、版本、作者、描述等信息，還需要指定項目所需要的依賴項。
創(chuàng)建Package.json文件可以使用以下命令：
“`
npm init
“`
在執(zhí)行該命令之后，會出現(xiàn)一系列提示信息，需要我們填寫一些必須的信息，包括項目名稱、版本、作者、描述等。按照提示信息填寫完畢后，我們可以在當(dāng)前目錄下看到生成的Package.json文件。
步驟三：安裝Grunt CLI
Grunt CLI是Grunt的命令行接口工具，用于解析Gruntfile.js文件，執(zhí)行任務(wù)等。我們需要安裝Grunt CLI來使得Grunt能夠在命令行中運行。
安裝Grunt CLI可以使用以下命令：
“`
npm install -g grunt-cli
“`
通過該命令，我們可以將Grunt CLI安裝到全局環(huán)境中。
步驟四：安裝Grunt
現(xiàn)在我們可以安裝Grunt了。在安裝Grunt之前，我們需要先在Package.json文件中聲明依賴。
可以使用以下命令來在Package.json文件中聲明依賴：
“`
npm install grunt –save-dev
“`
通過該命令，我們會將Grunt作為項目的開發(fā)依賴項，安裝在node_modules目錄下，并將該依賴寫入Package.json文件中。
步驟五：創(chuàng)建Gruntfile.js文件
Gruntfile.js文件是Grunt的配置文件，主要用于指定Grunt需要執(zhí)行的任務(wù)和相關(guān)的參數(shù)。在該文件中，我們需要定義一系列的任務(wù)，并根據(jù)需要配置相關(guān)的參數(shù)。
創(chuàng)建Gruntfile.js文件可以使用以下命令：
“`
touch Gruntfile.js
“`
在Gruntfile.js文件中可以使用一些內(nèi)置的任務(wù)和插件，例如concat、uglify等。可以去Grunt的官網(wǎng)，查看所有可用的插件。
對于一個簡單的樣例，我們可以使用以下的代碼：
“`javascript
module.exports = function(grunt) {
// 任務(wù)配置
grunt.initConfig({
pkg: grunt.file.readON(‘package.json’),
// 壓縮文件
uglify: {
options: {
banner: ‘/*! */\n’,
mangle: false
},
build: {
files: {
‘build/js/mn.min.js’: [‘src/js/*.js’]
}
}
}
});
// 加載插件
grunt.loadNpmTasks(‘grunt-contrib-uglify’);
// 默認(rèn)任務(wù)
grunt.registerTask(‘default’, [‘uglify’]);
};
“`
在這個樣例中，我們定義了一個uglify任務(wù)，用于壓縮src/js目錄中的所有文件，并輸出到build/js目錄下。
步驟六：執(zhí)行Grunt任務(wù)
現(xiàn)在我們可以在命令行中執(zhí)行Grunt任務(wù)了。
在命令行中，可以通過以下命令來執(zhí)行Grunt任務(wù)：
“`
grunt
“`
其中，表示需要執(zhí)行的任務(wù)名稱。執(zhí)行任務(wù)之后，Grunt會自動在控制臺輸出任務(wù)執(zhí)行的結(jié)果。
成都網(wǎng)站建設(shè)公司-創(chuàng)新互聯(lián)為您提供網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)頁設(shè)計及定制高端網(wǎng)站建設(shè)服務(wù)！
Web開發(fā)中的瀏覽器同步測試工具——Browsersync
首先這是一個效率工具，Browsersync能讓瀏覽器實時、快速響應(yīng)您的文件更改（html、js、css、sass、less等）并自動刷新頁面。更重要的是
Browsersync可以同時在PC、平板、手機(jī)等設(shè)備下進(jìn)項調(diào)試
。說的通俗一點就是讓你在改完代碼后，頁面能夠?qū)崟r刷新，無論是前端還是后端工程師，使用它將提高您30%的工作效率。有了它，不用在多個瀏覽器、多個設(shè)備間來回切換，頻繁的刷新頁面。更神奇的是在一個瀏覽器中滾動頁面、點擊等行為也會同步到其他瀏覽器和設(shè)備中，這一切還可以通過可視化界面來控制。
看下面效果圖:
不需要在每個頁面進(jìn)行手動刷新，現(xiàn)在，BrowserSync減少了重復(fù)的手工任務(wù)，這一切都交給BrowserSync去完成，我們只需專注在業(yè)務(wù)的邏輯里去。
BrowserSync是建立在網(wǎng)絡(luò)技術(shù)上的，您可以輕松安裝在OS X，Windows或Linux上，然后在不同的設(shè)備及瀏覽器里進(jìn)行調(diào)試。
通過可視化的操作方式或命令行來創(chuàng)建個性化的測試環(huán)境，多設(shè)備共同響應(yīng)漏碼兆。BrowserSync很容易與您的網(wǎng)絡(luò)平臺集成，構(gòu)建工具和其他Node項目中，例如gulp、grunt。
滾動，點擊，刷新等操作可以在不同瀏覽器之間同步更新。
改變HTML，CSS，圖像和其他項目文件瀏覽器會自動更新。
記錄測試網(wǎng)址，只需點擊一次，就可以在不同設(shè)備里訪問。
切換各個同步設(shè)置創(chuàng)建您的首選測試環(huán)境。
遠(yuǎn)程調(diào)整和正在對連接的設(shè)備運行調(diào)試網(wǎng)頁。
創(chuàng)建一個安全的公共URL分享您的本地站點，任何設(shè)備都可以訪問它，并可以響應(yīng)您的任何改動。
使用可視化頁面來進(jìn)行相關(guān)設(shè)置，也可以使用命令行模拿來完成。
支持PC，平板電腦和手機(jī)之間的即時同步。各種文件及時響應(yīng)，堪稱完美。
可輕松與grunt、gulp等工具配合使用，或包含在其它node項目里。
可以在PHP，ASP，Rails和更多網(wǎng)站運行使用。也可以創(chuàng)建靜態(tài)環(huán)境。
基于Node.js并支持Windows，MacOS和Linux操作系統(tǒng)，設(shè)置只需要5分鐘。
可根據(jù)Apache2.0許可使用或更改。
Chrome瀏覽器、火狐、IE8 +、Safari瀏覽器、Opera、Android、黑莓、Firefox移動端、iOS、Opera移動移動端、Windows Phone。
BrowserSync是基于Node.js的, 是一個Node模塊， 如果您想要快速使用它，需要先安裝下nodejs
1、
靜態(tài)網(wǎng)站
如果你只想在改變某一個css文件后同步，那么可以這樣：
如果需要監(jiān)聽多個類型的文件，只需要用逗號隔開。例如我們再加入一個.html文件
2、
動態(tài)網(wǎng)站
在動態(tài)網(wǎng)站中，browser-sync是通過代理來實現(xiàn)的
browsersync的使返租用有一個詳細(xì)的文檔，而且開源在Github上，上面已經(jīng)給出地址：
關(guān)于linux下安裝grunt的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。
創(chuàng)新互聯(lián)（cdcxhl.com）提供穩(wěn)定的云服務(wù)器,香港云服務(wù)器,BGP云服務(wù)器,雙線云服務(wù)器,高防云服務(wù)器,成都云服務(wù)器,服務(wù)器托管。精選鉅惠，歡迎咨詢：028-86922220。
網(wǎng)頁名稱：輕松學(xué)習(xí)：Linux下安裝Grunt的簡單步驟(linux下安裝grunt)
標(biāo)題來源：http://fisionsoft.com.cn/article/dpcsjii.html
