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

　　整理自是從近及遠整理，所以隨筆內容應該是由難到易，自顧自說，完全不考慮旁觀人士。

　　開始。

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

　　grunt是什么？是一個運行在node上的插件，所以要運行grunt先要把node的環境搭建好。

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

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

npm install -g grunt-cli

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

　　好了，現在要新建一個文件夾，進入然后執行

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

　　再次執行grunt會提醒Gruntfile.js文件的缺失，這是grunt所有行為的入口，所以要新建Gruntfile.js文件，這個文件的結構分為4部分。

wrapper
module.exports = function(grunt) {// 所有的代碼寫在這里，注意傳入參數grunt };

?

任務配置 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第一行進行配置

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

?

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

執行grunt時默認執行default任務，如果這個部分缺失，則需要使用下列命令分別執行第2部分中注冊的任務

grunt concat grunt cssmin grunt uglify

?

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

　　

轉載于:https://www.cnblogs.com/tarol/p/4186737.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。