前端自動化開發之grunt

上篇文章介紹了前端模組化開發工具seajs，利用seajs我們可以輕鬆實現前端的模組化程式設計，參見

一、準備工作

再使用grunt之前，我們先要安裝node.js，利用node的包管理工具npm來安裝grunt

關於如何安裝及配置node不屬於本文涉及範疇，所以在這裡不做介紹，需要檢視的童鞋可以參照：

二、安裝grunt

安裝配置完node後，我們利用npm來安裝全域性grunt，命令列如下：

完成後我們輸入命令：grunt -ver 來檢視grunt的版本，如果現實版本資訊，則說明安裝成功了：

ok，下一步是在你自己的專案檔案中區域性安裝grunt

安裝之前先在專案目錄下新建兩個檔案gruntfile.js及package.json用來配置grunt

在package.json中將如下**貼上進去並儲存：

,

"dependencies": 
}

之後我們會看到資料夾下又多了乙個名為node_modules的資料夾

沒錯，裡面放置的就是剛剛我們package.json裡所配置的功能檔案了。

ok，到了這裡我們的grunt的安裝就到此結束。

三、配置grunt

安裝完成之後，我們需要對我們需要利用grunt實現的功能進行配置，比如我們需要呼叫哪些功能、檔案原始路徑、檔名及存放路徑等。

這裡我們就要用到剛剛提到的gruntfile.js檔案了，下面以配置壓縮js功能為例：

module.exports = function

(grunt) ,
my_target:  }]
}}});grunt.loadnpmtasks('grunt-contrib-uglify');
//預設任務
grunt.registertask('default', ['uglify']);
}

src: ['demo.js', 'untils.js'] 改成你需要壓縮的js檔名，多個以陣列形式存放

配置完成後找到自己所要壓縮檔案的目錄，執行命令：grunt uglify就ok了

顯示done, without errors 就表示壓縮成功

同理，我們還可以合併js，配置如下：

module.exports = function

(grunt) ,
dist: ,
uglify: ,
my_target:  }]
}}});grunt.loadnpmtasks('grunt-contrib-uglify');
grunt.loadnpmtasks('grunt-contrib-concat');
//預設任務
grunt.registertask('default', ['uglify', 'concat']);
}

最後執行grunt concat就ok了，如果需要同時進行壓縮和合併，那麼執行命令grunt就ok了~

當然，grunt除了能實現js壓縮合併外，還能實現css壓縮、壓縮等等一系列功能，在這裡就不一一介紹了，

所有功能的實現都需要事先安裝及配置後才能使用，

關於其他功能外掛程式的安裝及配置方法可以參見grunt官網的外掛程式列表 

可以說利用grunt減輕了我們對於需要反覆重複的任務，例如壓縮（minification）、編譯、單元測試、linting等方面的工作量，像grunt這樣的前端自動化工具還有很多，比如gulp，

同時結合yeomen、bower等前端工具可以實現更為強大的自動化流程，讓前端得以工程化。

之後我會介紹yeomen、bower、grunt相結合的自動化構建方法，歡迎關注。

VC之Office自動化開發 一

去年底老闆臨時交給乙個任務，為乙個試驗資料管理系統編寫乙個電子報告生成程式。因為老闆也不怎麼重視這個專案 錢少啊，呵呵 所以這個任務只好落在我這種小碩身上了。我也是兩眼瞎，萬事從頭幹。三個月的苦鬥，還算圓滿交差。用vc進行office自動化開發，網上有很多文章，我本不想在此畫蛇添足。只是感於自己查資...

前端自動化 grunt的簡單使用

現在前端自動化已經是家常便飯，各種工具也是層出不窮，grunt gulp webpack是應用最廣的三種工具，雖然grunt看似已垂垂老矣，但是以前寫的很多專案一直用的就是grunt，溫故方能知新，這裡把grunt的基本操作再記錄一下。開始使用grunt很簡單，在專案的根目錄中新增兩份檔案 pack...

Python自動化開發03

1 去重 list 1 set 1,2,3,4,0,7,4,8 list2 set 99,34,6,8,3 list3 set 0,4,8 list4 set 84,45,49 print list 1 2 交集 list 1 list2 print list 1.intersection list...