grunt 依賴nodejs,全部在使用前確保你安裝了nodejs,而後開始執行grunt命令。javascript
1.安裝node
nodejs安裝教程css
安裝完成後在命令行,執行命令:html
node -v 前端
出現版本信息,說明安裝完成.NPM是隨同nodejs一塊兒安裝的包管理工具,能解決nodejs代碼部署上的不少問題:java
2.grunt命令行(CLI)安裝在全局環境下
grunt是一套前端自動化工具,一個基於nodeJs的命令行工具,通常用於:
① 壓縮文件
② 合併文件
③ 簡單語法檢查node
對於已安裝低版本,要更新最新版本須要先卸載,進行安裝:npm
npm uninstall -g gruntjson
爲了方便在全局安裝grunt命令接口(CLI)數組
> npm install -g grunt-clibash
該命令植入到你的系統中,容許從任意目錄運行Grunt
3.建立目錄
在本地建立項目目錄:grunt_test1
建立完成,添加package.json文件 ,也能夠手動生成一個文件(npm init)
命令行執行:
cnpm install grunt --save-dev
在當前目錄下安裝grunt依賴。 tips:淘寶npm鏡像安裝:
執行後就可使用cnpm 代替npm$ npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install grunt --save-dev 執行以後,就會看到
node_modules模塊加載 及 package.json 依賴模塊會存在
4.插件安裝
這裏的插件有官方及第三方提供插件,區分方式 grunt-contrib 是官方標註
Contrib-jshint——javascript語法錯誤檢查;
Contrib-watch——實時監控文件變化、調用相應的任務從新執行;
Contrib-clean——清空文件、文件夾;
Contrib-uglify——壓縮javascript代碼
Contrib-copy——複製文件、文件夾
Contrib-concat——合併多個文件的代碼到一個文件中
karma——前端自動化測試工具
先看 JS 批量壓縮, 安裝插件Contrib-uglify
cnpm install grunt-contrib-uglify --save-dev
會看到該插件依賴。 同時在該目錄下建立文件
這個文件尤爲關鍵,他通常幹兩件事情:
① 讀取package信息
② 插件加載、註冊任務,運行任務(grunt對外的接口所有寫在這裏面)
Gruntfile通常由四個部分組成
① 包裝函數
這個包裝函數沒什麼東西,意思就是咱們全部的代碼必須放到這個函數裏面
module.exports = function (grunt) { //你的代碼 }
這個不用知道爲何,直接將代碼放入便可
② 項目/任務配置
咱們在Gruntfile通常第一個用到的就是initConfig方法配置依賴信息
pkg: grunt.file.readJSON('package.json')
這裏的 grunt.file.readJSON就會將咱們的配置文件讀出,而且轉換爲json對象
而後咱們在後面的地方就能夠採用pkg.XXX的方式訪問其中的數據了
以上描述--抄襲的,我比較懶-直接拿過用
grunt.loadNpmTasks('xxx'); 加載模塊
grunt.registerTask('default', ['xxx']);默認執行任務
看看實例:
Gruntfile.js
module.exports = function (grunt) { // 項目配置 grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify:{ js:{ files:[{ expand: true, cwd: 'src/js', src: '**/*.js', dest: 'dist/js' }] } } }); grunt.loadNpmTasks('grunt-contrib-uglify'); // 默認任務 grunt.registerTask('default', ['uglify']); }
grunt.initConfig:定義各類模塊的參數,每個成員項對應一個同名模塊。
grunt.loadNpmTasks:加載完成任務所需的模塊。
grunt.registerTask:定義具體的任務。第一個參數爲任務名,第二個參數是一個數組, 表示該任務須要依次使用的模塊。
項目目錄建立src文件夾,裏邊有js文件夾, js文件夾下有兩個js文件。
執行命令: grunt
看到由原來9.72kb ---壓縮到--->5.8kb,同時生產一個壓縮目錄:
css,html,img壓縮原理都是同樣的。針對每一個文件一 一 壓縮。
'use strict'; module.exports = function (grunt) { // 項目配置 grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify:{ js:{ files:[{ expand: true, cwd: 'src/js', src: '**/*.js', dest: 'dist/js' }] } }, cssmin:{ // 去除html註釋 options: { collapseWhitespace: true, conservativeCollapse: true, collapseBooleanAttributes: true, removeCommentsFromCDATA: true }, css:{ files:[{ expand: true, cwd: 'src/css', src: '**/*.css', dest: 'dist/css' }] } }, htmlmin:{ options: { removeComments: true, removeCommentsFromCDATA: true, collapseWhitespace: true, collapseBooleanAttributes: true }, html:{ files:[{ expand: true, cwd: 'src/html', src: ['**/*.html'], dest: 'dist/html' }] } }, imagemin: { dist:{ options: { optimizationLevel: 3 // 定義 PNG 圖片優化水平 }, files:[{ expand: true, cwd: 'src/img/', src: ['**/*.{png,jpg,jpeg}'], dest:'dist/img/' }] } } }); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-htmlmin'); grunt.loadNpmTasks('grunt-contrib-imagemin'); // 默認任務 grunt.registerTask('default', ['uglify','cssmin','htmlmin', 'imagemin']); // grunt.registerTask('default', ['imagemin']); // grunt.registerTask('minall', ['uglify:buildall']); }
建立一個任務起個別名:
// common task. grunt.registerTask('build-file', 'build file', function() {
grunt.task.run('htmlmin:html'); }); // 默認被執行的任務列表。 grunt.registerTask('default', ['build-file']);
// 與下邊效果同樣
};