grunt 安裝使用(一)

grunt 依賴nodejs,全部在使用前確保你安裝了nodejs,而後開始執行grunt命令。javascript

1.安裝node

nodejs安裝教程css

安裝完成後在命令行,執行命令:html

node  -v 前端

出現版本信息,說明安裝完成.NPM是隨同nodejs一塊兒安裝的包管理工具,能解決nodejs代碼部署上的不少問題:java

  • 容許用戶從NPM服務器下載別人編寫的第三方包到本地使用。
  • 容許用戶從NPM服務器下載並安裝別人編寫的命令行程序到本地使用。
  • 容許用戶將本身編寫的包或命令行程序上傳到NPM服務器供別人使用。

 

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-htmlmin ——壓縮html代碼
  • Contrib-cssmin—— 壓縮css代碼
  • Contrib-imagemin——壓縮圖片
  • Contrib-watch——實時監控文件變化、調用相應的任務從新執行;

  • Contrib-clean——清空文件、文件夾;

  • Contrib-uglify——壓縮javascript代碼

  • Contrib-copy——複製文件、文件夾

  • Contrib-concat——合併多個文件的代碼到一個文件中

  • karma——前端自動化測試工具

 

先看 JS 批量壓縮, 安裝插件Contrib-uglify

   cnpm install grunt-contrib-uglify --save-dev

 

會看到該插件依賴。 同時在該目錄下建立文件

Gruntfile.js

這個文件尤爲關鍵,他通常幹兩件事情:
① 讀取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']);
}

 

  • expand:若是設爲true,就表示下面文件名的佔位符(即*號)都要擴展成具體的文件名。
  • cwd:須要處理的文件(input)所在的目錄。
  • src:表示須要處理的文件。若是採用數組形式,數組的每一項就是一個文件名,可使用通配符。
  • dest:表示處理後的文件名或所在目錄。
  • ext:表示處理後的文件後綴名。

 

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']);
}
View Code

 

建立一個任務起個別名:

  // common task.
  grunt.registerTask('build-file', 'build file', function() { 
grunt.task.run('htmlmin:html'); }); // 默認被執行的任務列表。 grunt.registerTask('default', ['build-file']);

// 與下邊效果同樣
  // grunt.registerTask('default', ['htmlmin:html']);
};
相關文章
相關標籤/搜索