前端自動化工具 -- 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支持添加到依賴中去

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

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

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

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

 

三、各插件使用

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

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