前端自動化工具 -- grunt 使用簡介

grunt做爲一個前端構建工具，有資源壓縮，代碼檢查，文件合併等功能。

 

下面就簡單瞭解grunt的使用。

 

1、環境配置

grunt是基於nodejs的，因此須要一個 nodejs 環境，未了解的能夠 來這看看

仍是在windows下，

首先要保證grunt命令可使用，因此要先使用npm安裝對應CLI

  
  
  
  
  

   
   
   
   
   

     npm install -g grunt-cli 
   
  
  
  
  
  

安裝完成能夠命令行中輸入「grunt」測試是否安裝成功

安裝成功後

 

2、用法說明

grunt須要package.json文件描述，不少操做都直接經過這個json文件訪問，

        須要Gruntfile.js文件，這是一個入口文件，grunt將從這裏開始，實現你的意圖。

因此，首先新建一個工程目錄grunt,再裏頭新建這兩個文件。

package.json須要嚴格的json格式，隨便寫入幾個key-value如：

  
  
  
  
  

   
   
   
   
   

     {   
   
   
   
   
   
   
 "name": "grunt_test", 
   
   
   
   
   
  "version": "1.0.0" 
   
   
   
   
   
}
  
  
  
  
  

Gruntfile.js 能夠初始成這個形式：

module.exports =  function(grunt){ 
    grunt.initConfig({ 
        pkg: grunt.file.readJSON('package.json')
        
    });
     // grunt.registerTask('default',[]);
};

這時咱們命令行到工程目錄裏頭，npm安裝好grunt支持，後面的參數--dev-save表示將此grunt支持添加到依賴中去

什麼叫添加到依賴中去？安裝好後，看看 package.json裏頭，是否是多了這個東西~

{
  "name": "grunt_test",
  "version": "1.0.0",
  "devDependencies": {
    "grunt": "^0.4.5"
  }
}

好這時，咱們用grunt命令執行一下，果真出現了沒有default這貨，看了它是須要這貨的，那就把上頭那個註釋去掉，再試試

其實到這裏爲止已是最基本的流程了。

 

3、各插件使用

而通常經常使用方法是使用提供的 插件，進一步做處理

1）好比代碼壓縮：

html壓縮：htmlmin

css壓縮： cssmin

js壓縮：uglify

官方提供了充足的介紹，固然了，初次接觸，也很容易被各類繁雜的配置項搞混。

既然要壓縮代碼，這裏就在./static/script/目錄下新建一個test.js文件，隨便寫入幾句

function firstLetterToUp(str){ 
     return String(str).replace('^\s*|\s*$')
                .replace(/\b\w+\b/g, function(word){ 
                    word = word.toLowerCase();
                     return word[0].toUpperCase() + word.substring(1);
                });
}

var s = firstLetterToUp('  aBCDE Bda erew');
console.log(s);

js代碼壓縮須要一個很經常使用的插件  grunt-contrib-uglify ,同理先npm安裝支持

能夠看到package.json也更新了

{
  "name": "grunt_test",
  "version": "1.0.0",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-uglify": "^0.9.1"
  }
}

相似的方法，html的安裝 grunt-contrib-htmlmin ,css的安裝 grunt-contrib-cssmin

安裝完後，接下來就是對Gruntfile.js更新配置項

grunt.initConfig：定義各類模塊的參數，每個成員項對應一個同名模塊。
grunt.loadNpmTasks：加載完成任務所需的模塊。
grunt.registerTask：定義具體的任務。第一個參數爲任務名，第二個參數是一個數組， 表示該任務須要依次使用的模塊。

各設置項都有通常用法，特殊的須要自行到官網查看說明，例如

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

目前的Gruntfile.js配置：

module.exports =  function(grunt){ 
    grunt.initConfig({ 
         // 獲取到package.json各項
        pkg: grunt.file.readJSON('package.json'),
         // js壓縮
        uglify: { 
             // 使用options這個名聲
            options: { 
                 // 爲true表示容許添加頭部信息
                stripBanners:  true,
                 // 在頭部添加 js文件名和時間的註釋
                banner: '/*! <%=pkg.name%>-<%=pkg.version%>.js <%=grunt.template.today("yyyy-mm-dd") %> */\n'
            },
             // files名稱任意，好比下方的build 關鍵是src-dest要指示好
            files: { 
                src: './static/script/test.js',
                dest: 'build/static/script/<%=pkg.name%>-<%=pkg.version%>.min.js'
            }
        },
         // css 壓縮
        cssmin: { 
            options:{ 
                report:'gzip'
            },
            build: { 
                expand:  true,
                cwd: './static/style',
                src: ['test.css'],
                dest: './build/static/style'
            }
        },
         // html 壓縮
        htmlmin: { 
            options: { 
            removeComments:  true,
            removeCommentsFromCDATA:  true,
            collapseWhitespace:  true,
            collapseBooleanAttributes:  true,
            removeAttributeQuotes:  true,
            removeRedundantAttributes:  true,
            useShortDoctype:  true,
            removeEmptyAttributes:  true,
            removeOptionalTags:  true
            },
            build:{ 
                expand:  true,
                cwd: './',
                src: ['*.html'],
                dest: './'
            }
        }
    });
    

    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-htmlmin');
    
    grunt.registerTask('default',[
        'uglify',
        'cssmin',
        'htmlmin'
        ]);
};

命令行執行看效果

固然了，還有圖片的壓縮 imagemin  也能夠去試試

 

2）jshint 代碼檢查

js代碼的檢查可使用 jshint插件

同理，先 裝好 grunt-contrib-jshint

檢查的規則見 DOCS

如

curly: 大括號包裹

eqeqeq: 對於簡單類型，使用===和!==，而不是==和!=

newcap: 對於首字母大寫的函數（聲明的類），強制使用new

noarg: 禁用arguments.caller和arguments.callee

sub: 對於屬性使用aaa.bbb而不是aaa['bbb']

undef: 查找全部未定義變量

boss: 查找相似與if(a = 0)這樣的代碼

node: 指定運行環境爲node.js

在Gruntfile.js中配置相關項：

module.exports =  function(grunt){ 
    grunt.initConfig({ 
         // 獲取到package.json各項
        pkg: grunt.file.readJSON('package.json'),
         // js壓縮
         // ... 省略
        },
        jshint: { 
            options: {
                curly:  true,
                eqeqeq:  true,
                newcap:  true,
                noarg:  true,
                sub:  true,
                undef:  true,
                boss:  true,
                node:  true,
                globals: {
                    exports:  true,
                    jQuery:  true
                }
            },
            files:['./static/script/test.js']
        }
    });
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-htmlmin');
    grunt.loadNpmTasks('grunt-contrib-jshint');

    grunt.registerTask('default',[
        'jshint',
        'uglify',
        'cssmin',
        'htmlmin'
        ]);
};                

修改個，再執行grunt,能夠看到出錯信息，且grunt再也不繼續執行

同理，csslint 也可做css的語法檢查，能夠去試試

 

3）使用 grunt-contrib-watch 插件

watch的使用會自動監聽修改，並grunt自動構建

同理，config中增添watch配置項

files表示要監聽的文件，能夠是單個值或數組；tasks表示監聽有改動後要執行什麼任務

watch: { 
            build: { 
                files: ['./static/style/*.css'],
                tasks: ['cssmin'],
                options:{ 
                    spawn:  false
                }
            }
        }

4)使用 grunt-contrib-sass 插件

這個插件能夠自動將sass編譯成css文件，再配合其餘插件的使用。美哉~

裝好支持依賴後，在config配置中增長：

sass:{ 
            dist:{ 
                options:{ 
                     // 還記得這個不？這就是sass編譯時候四種style中的
                    style: 'expanded'
                },
                files:{ 
                    './static/style/test.css':'./static/style/test.scss'
                }
            }
        }

files中就定義爲  dest : src 的形式

經過watch的輔助，執行命令後，scss文件的每次改動，都能自動構建出新css

 

 

5）concat插件 文件合併 

可使用相似這種方式實現

grunt.initConfig({
  concat: {
    options: {
      separator: ';',
    },
    dist: {
      src: ['src/intro.js', 'src/project.js', 'src/outro.js'],
      dest: 'dist/built.js',
    },
  },
});

固然還有不少插件常常被使用，好比clean copy 等等。這些均可以在grunt的 插件中心 找到，帶contrib字樣的表示是官方提供的。

插件具體的用法，多種多樣，仍是自個去相應站點，好好讀一讀

其實grunt這構建工具使用起來很簡單，主要就是配置+一大堆配置。初期可能會對各配置項頭痛，但常常實踐，終會了然於胸的。