Grunt 入門

時間 2019-11-08

標籤 grunt 入門欄目 Node.js 简体版

原文原文鏈接

Grunt簡介：

插件豐富，功能強大，

jshint對JS文件的檢測，以及js和css文件的合併，壓縮，是前端自動化壓縮構建項目的得力助手。

接下來就隨lizimeme一塊兒學習grunt的基本使用

個人電腦安裝了nodejs ,自動全局安裝了npm(npm是隨同NodeJS一塊兒安裝的包管理工具)

第一步：windows系統下：

npm install -g grunt-cli //全局安裝 grunt-cli

第二步：

建立一個web project路徑

假如在：

E:\LIZIZONE\learn2017\practice\grunt_test

新建 Gruntfile.js文件；

新建 package.json文件：

package.json的初始內容

內容：

{ "name": "grunt_test",

"version": "1.0.0",

"devDependencies": { }

}

cmd 切換到 grunt_test項目下，執行命令 npm install grunt --save-dev

此時檢查 package.json文件，發現 devDependencies中有了內容

cmd 切換到 grunt_test項目下，執行命令 grunt 若是獲得warning 信息說明安裝成功！！！

第三步：

配置Gruntflie.js文件

基本配置：

//包裝函數
module.exports = function(grunt){
//任務配置，全部插件的配置信息
grunt.initConfig({
//獲取package.json的信息
pkg:grunt.file.readJSON('package.json')
})
//告訴grunt當咱們在終端中輸入grunt時須要作些什麼（注意前後順序）
grunt.registerTask('default',[]);
}

粗體的那行：獲取了package.json文件裏面的內容

修改完Gruntfile.js文件後，繼續執行grunt命令，成功了，顯示爲Done,再也不有warning

----------- start --------------

插敘

Grunt插件介紹：

grunt收集插件，它能獲取到不少插件 http://www.gruntjs.net/plugins

有grunt所收集的插件列表：

插件分爲兩類。第一類是grunt團隊貢獻的插件，這些插件的名字前面都帶有「contrib-」前綴，並且在插件列表中有星號標註。

第二類是第三方提供的插件，不帶有這兩個特徵。

contrib-jshint——javascript語法錯誤檢查；
contrib-watch——實時監控文件變化、調用相應的任務從新執行；
contrib-clean——清空文件、文件夾；
contrib-uglify——壓縮javascript代碼
contrib-copy——複製文件、文件夾
contrib-concat——合併多個文件的代碼到一個文件中
karma——前端自動化測試工具

----------- end --------------

plugin1 :)第三步：使用uglify插件(壓縮javascript 代碼)

Uglify插件的功能就是壓縮javascript代碼。至於javascript代碼壓縮的必要和意義，這裏就不用在贅述了吧？幾乎每個js file都有一個 **.min.js 壓縮版。

安裝uglify

cmd 切換到 grunt_test項目下,npm install grunt-contrib-uglify --save-dev

安裝成功後：

在src新建一個js文件隨便寫上些js代碼，這個時候咱們就要進行js代碼壓縮了

固然，要壓縮誰？往哪裏壓縮？這些都須要配置，在Gruntfile.js中配置。分爲三步：

（1）在grunt.initConfig方法中配置 uglify 的配置參數

uglify:{
option:{
stripBanners:true,
banner:'/*!<%=pkg.name%>-<%=pkg.version%>.js <%- grunt.template.today("yyyy-mm-dd") %> */\n'
},
build:{
src:'src/test.js',
dest:'build/<%=pkg.name%>-<%=pkg.version%>.js.min.js'
}
}

<%%>模板字符串能夠引用任意的配置屬性，所以能夠經過這種方式來指定諸如文件路徑和文件列表類型的配置數據，從而減小一些重複的工做。

「options」中規定容許生成的壓縮文件帶banner，即在生成的壓縮文件第一行加一句話說明。注意，其中使用到了pkg獲取package.json的內容。

「build」中配置了源文件和目標文件。即規定了要壓縮誰？壓縮以後會生成誰？注意，咱們這裏將目標文件的文件名經過pkg的name和version來命名。

（PS：上文中說過的package.json的內容終於找到了他被應用的地方了。這樣的好處是：例如，對文件版本的管理，你只須要在package.json中修改便可，grunt會自動根據最新的版本號生成相應版本的文件。你不用手動去修改文件的文件名。）

最後，這裏只是對「options」和「build」的基本應用，還有許多中使用方式，能夠去官網查閱。

（2）在 grunt.initConfig 方法以後，要讓grunt去加載這一個插件。光配置了，不加載上，如何用啊？

在module.exports方法中添加：

grunt.loadNpmTasks('grunt-contrib-uglify');

（3）在grunt命令執行時，要不要當即執行uglify插件？若是要，就寫上，不然不寫。默認執行uglify，壓縮旗下配置好的全部文件

grunt.registerTask('default',['uglify']);

plugin2 :)

jshint插件：檢查javascript語法錯誤

//有錯誤當即發現當即處理

cmd 切換到 grunt_test項目下：

（1）安裝jshint

npm install grunt-contrib-jshint --save-dev

(2)在Gruntfile.js文件中配置 jshint

grunt.initConfig()裏面添加：

jshint:{
options:{
jshintrc:'.jshintrc'
},
build:[ 'Gruntfile.js','src/*.js']
 
}

（3）在grunt_test 項目根目錄下建立 .jshintrc文件

.jshintrc文件中代碼的格式也要遵照嚴格的json語法，不然無效。

{
"boss":false,
"curly":true,
"eqeqeq":true,
"eqnull":true,
"expr":true,
"immed":true,
"newcap":true,
"noempty":true
}

配置講解(配置選項 true表示打開，false表示關閉)

官網配置比較具體，能夠根據本身的須要進行配置

http://jshint.com/docs/options/

（4）加載插件。和uglify的加載方法同樣。注意，這裏沒有前後順序。

plugin3 csslint:) //檢查css語法的插件

安裝如jshint

npm install grunt-contrib-csslint --save-dev

plugin4 watch :)真正實現自動化

第一步：命令行安裝

npm install grunt-contrib-watch --save-dev

第二步：

在Gruntfile.js裏面配置watch

plugin5 cssmin :) 壓縮css

npm install grunt-contrib-cssmin --save-dev

在initConfig裏面配置：

cssmin: {
　　options : {
　　compatibility : 'ie8', //設置兼容模式
　　noAdvanced : true //取消高級特性
　　},
　　minify: {
　　expand: true,
　　cwd: 'web/css/',
　　src: ['*.css', '!*.min.css'],
　　dest: 'dist/resource/web/css',
　　ext: '.css'
　　}
 
}

plugin6 htmlmin :) 壓縮html

npm install grunt-contrib-htmlmin --save-dev

htmlmin: {
options: {
removeComments: true,
collapseWhitespace: true
},
dist: {
files: [
{expand: true,cwd: 'web',src: '*.html',dest: 'web/dist/partials'},
{expand: true,cwd: 'web/partials',src: '**/*.html',dest: 'web/dist/partials'}
]
}

plugin8 copy :)

npm install grunt-contrib-copy --save-dev

一個好的運行腳本老是能讓源碼和文件分開。這樣分離容許你修改源文件而不會影響腳本。

開始你會讓Grunt 從web 目錄複製文件到resource目錄

copy:{
　　build:{
　　　　cwd:'web', //cwd只想源文件的目錄都是相對的，和src制定源文件相似
　　　　src:['**'], //**是一個通配符，用來匹配Grunt任何文件
　　　　dest:'resource', //dest是Grunt用來輸出結果任務的
　　　　expand:true
　　　　　　}
}

添加一個copy任務，這個任務有一個子任務，叫build (copy至少有一個任務)

//你將建立一個resource目錄，告訴grunt把內容複製到resource目錄中，expand爲true來開啓這些選項

plugin7 clean :)

第一步：安裝 npm install grunt-contrib-clean --save-dev

第二步：在Gruntfile.js中進行配置，位置同上，

clean:{
build:{
src:['resource']
}
},

　----grunt_test1項目目錄及Gruntfile.js配置-------------------javascript

/**
 * Created by liuhuanli on 2017/4/1.
 */
module.exports = function(grunt){
   //項目配置：
    grunt.initConfig({
        pkg:grunt.file.readJSON('package.json'),
        clean: {
            all: ['resource/web/*',"!dist/resource/web/.git"],
            productAll:['resource/**'],
            js: ["resource/web/js/*","resource/web/js/*/*"]
       },
        copy:{
            //運行文件
            build1:{
                expand: true,
                src: [
                    'web/**',
                ],
                dest: 'resource'
            },
            //源碼
            product:{
                expand: true,
                src: [
                    'web/js/**',
                    'web/css/**',
                    'web/images/**',
                    'web/partials/**',
                    'web/bower_components/**',
                    'web/*.html'
                ],
                dest: 'resource'
            }
        },
        watch:{
            css:{
                files:[
                    'resource/web/css/*.css'
                ]
            },
            js:{
                files:['resource/web/js/*.js', 'resource/Gruntfile.js'],

                tasks:['jshint']
            }

        },
        jshint:{
            options:{
                jshintrc:'.jshintrc'
            },
            all:['resource/Gruntfile.js','resource/web/js/*.js']
        },
        uglify:{
            options:{
                banner:'/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %>  */\n'
            },

            js0: {
                files: {'resource/web/js/jquery.ztree.all.js':['web/js/jquery.ztree.all.js']}
            },
            js1: {
                files: {'resource/web/js/jquery.ztree.core.js':['web/js/jquery.ztree.core.js']}
            },
            js2: {
                files: {'resource/web/js/jquery.ztree.excheck.js':['web/js/jquery.ztree.excheck.js']}
            },
            js3: {
                files: {'resource/web/js/jquery.ztree.exedit.js':['web/js/jquery.ztree.exedit.js']}
            },
            js4: {
                files: {'resource/web/js/jquery.ztree.exhide.js':['web/js/jquery.ztree.exhide.js']}
            }
        },
        //壓縮css
        cssmin: {
            options : {
                compatibility : 'ie8', //設置兼容模式
                noAdvanced : true //取消高級特性
            },
            minify: {
                expand: true,
                cwd: 'web/css',
                src: ['*.css', '!*.min.css'],
                dest: 'resource/web/css',
                ext: '.css'
            },
            minifyMetro: {
                expand: true,
                cwd: 'web/css/metroStyle',
                src: ['*.css', '!*.min.css'],
                dest: 'resource/web/css/metroStyle',
                ext: '.css'
            }
        },
        // 壓縮html
        htmlmin: {
            options: {
                removeComments: true,
                collapseWhitespace: true
            },
            dist: {
                files: [
                    {expand: true,cwd: 'web',src: '*.html',dest: 'dist/resource/web'},
                    {expand: true,cwd: 'web/partials',src: '**/*.html',dest: 'resource/web/partials'}
                ]
            }
        }
    });
    //加載插件
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-htmlmin');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.registerTask('cleanAll', ['clean:all']);
    grunt.registerTask('default',[
        'clean:productAll',
        'clean:all',
        'copy:product',
        'cssmin',
        'htmlmin',
        'uglify',
        'watch'
        //'jshint',

    ]);
}

　　當你安裝以上插件成功後，觀察你的package.json文件 css

  devDependencies 下有內容以下所示：

若是是團隊開發用同樣的插件版本，只須要把package.json文件拷到項目目錄下，npm install 就能自動安裝package.json文件中devDependencies下

的插件

----------插敘-----------------

這裏推薦幾篇文章關於grunt的使用的

https://gruntjs.com/getting-started

http://blog.csdn.net/wangfupeng1988/article/details/46418203/

http://www.w3cplus.com/tools/grunt-tutorial-configuring-tasks.html

1. Grunt 入門
2. Grunt入門
3. grunt快速入門
4. Grunt入門教程
5. # Grunt 快速入門
6. grunt使用入門
7. Grunt快速入門
8. grunt入門之grunt watch的使用
9. grunt簡單的入門
10. grunt使用入門（zz）
更多相關文章...
• Memcached入門教程 - NoSQL教程
• Neo4j數據庫入門教程 - NoSQL教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。