一年半沒更新是因為自己轉(zhuǎn)崗了，android framework+system轉(zhuǎn)前端，可以想象過程之苦逼，苦成了一首詩：很煩很煩/非常煩/非常非常十分煩/特別煩特?zé)?極其煩/賊煩/簡直煩死了/啊——。煩之余秉承人丑多看書的古訓(xùn)，啃書無數(shù)，成筆記百余篇，不成體系。每每回想，總是忘卻了大多數(shù)，于是要整理一下，如趁尚未排泄出去要反芻幾口，回味一下。

　　整理自是從近及遠(yuǎn)整理，所以隨筆內(nèi)容應(yīng)該是由難到易，自顧自說，完全不考慮旁觀人士。

　　開始。

　　最近在看grunt，說簡單點就是個前端管理工具，如maven、ant之于java。放在一年半前，我會說“前端工程還需要管理？”，在經(jīng)歷了對QA無數(shù)次“JS沒更新、你Ctrl+F5刷新一下嘛”，對運(yùn)營“又要壓縮？我一個一個文件壓縮很累的”，對PL“這文件夾下都100多個文件了，沒分類，還好多重構(gòu)后廢棄的”之后，我終于感覺到，前端還是需要管理的。

　　grunt是什么？是一個運(yùn)行在node上的插件，所以要運(yùn)行g(shù)runt先要把node的環(huán)境搭建好。

　　grunt能做什么？合并，壓縮，混淆，編碼重命名，修改html中的引用，甚至于語法檢測、單元測試等等。

　　這樣說是沒有概念的，首先全局安裝grunt-cli

npm install -g grunt-cli

　　現(xiàn)在你就可以使用grunt這個命令了，但這是米有意義的，因為grunt-cli的功能是調(diào)用當(dāng)前目錄下的grunt模塊，本身不具備任何功能。也就是說grunt是局部安裝的，這樣不同的項目可以使用不同版本的grunt。

　　好了，現(xiàn)在要新建一個文件夾，進(jìn)入然后執(zhí)行

npm init //按指示生成package.json，如果單純測試grunt，這個文件是可以缺失的 npm install grunt --save-dev //安裝并保存依賴到package.json

　　再次執(zhí)行g(shù)runt會提醒Gruntfile.js文件的缺失，這是grunt所有行為的入口，所以要新建Gruntfile.js文件，這個文件的結(jié)構(gòu)分為4部分。

wrapper
module.exports = function(grunt) {// 所有的代碼寫在這里，注意傳入?yún)?shù)grunt };

?

任務(wù)配置 grunt.initConfig({concat: {},cssmin: {},uglify: {} });

?

加載插件 grunt.loadNpmTasks('grunt-contrib-concat'); //前提是使用npm install grunt-contrib-concat --save-dev grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-uglify');

這個部分可被load-grunt-tasks替代，在wrapper第一行進(jìn)行配置

require('load-grunt-tasks')(grunt); //速度較慢，同樣需要install

?

自定義任務(wù)
grunt.registerTask('default', ['concat', 'cssmin', 'uglify']);

執(zhí)行g(shù)runt時默認(rèn)執(zhí)行default任務(wù)，如果這個部分缺失，則需要使用下列命令分別執(zhí)行第2部分中注冊的任務(wù)

grunt concat grunt cssmin grunt uglify

?

以上是grunt的入門部分，官網(wǎng)相對更加詳盡，下一篇簡述下Gruntfile.js中task的配置規(guī)則。

　　

轉(zhuǎn)載于:https://www.cnblogs.com/tarol/p/4186737.html

總結(jié)

以上是生活随笔為你收集整理的闲话和grunt的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。