天天看點
傳回

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

grunt是什麼，grunt就是個東西..

grunt作為一個前端建構工具，有資源壓縮，代碼檢查，檔案合并等功能。

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

一、環境配置

grunt是基于nodejs的，是以需要一個 nodejs 環境，未了解的可以 來這看看

還是在windows下，

首先要保證grunt指令可以使用，是以要先使用npm安裝對應CLI

npm install -g grunt-cli

複制

安裝完成可以指令行中輸入“grunt”測試是否安裝成功

安裝成功後

二、用法說明

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支援添加到依賴中去

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

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

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

複制

好這時，我們用grunt指令執行一下，果然出現了沒有default這貨，看了它是需要這貨的，那就把上頭那個注釋去掉，再試試

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

其實到這裡為止已經是最基本的流程了。

三、各插件使用

而一般常用方法是使用提供的 插件，進一步作處理

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安裝支援

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

可以看到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'
        ]);
};

複制

指令行執行看效果

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

當然了，還有圖檔的壓縮 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不再繼續執行

前端自動化工具 -- 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

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

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這建構工具使用起來很簡單，主要就是配置+一大堆配置。初期可能會對各配置項頭痛，但經常實踐，終會了然于胸的。

上一篇: 【轉】不同核心浏覽器的差異以及浏覽器渲染簡介
下一篇: 修圖作圖一鍵搞定！這個小衆圖檔編輯工具了解一下