NPM、nodeJS安裝，grunt自動化構建工具學習總結

一：安裝

npm是隨nodeJs安裝包一塊兒安裝的包管理工具，能解決NodeJS代碼部署上的不少問題；

常見的使用場景有如下幾種：

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

nodejs的官網地址： https://nodejs.org/en/

nodejs中文網地址： http://nodejs.cn/

1.從node.js官網下載最新安裝包進行安裝

2.windows系統下，windows+R調出命令，輸入cmd，打開命令工具，檢測npm是否安裝：輸入命令：npm -v

 

3.完成npm安裝後，進行安裝grunt

輸入命令：npm install -g grunt-cli，按下回車鍵，npm將會從線上自動爲咱們尋找安裝所須要的包

npm install -g grunt-cli命令安裝後,全局環境下均可使用

npm install grunt-cli命令，可新建目錄，爲此目錄下安裝npm

npm install會報找不到package.json文件，若是後面沒有跟任何的提示安裝信息，將會找該目錄下的package.json，按照裏面的dependencies項進行安裝，依賴於npm的哪些包和組建

至此，grunt環境安裝完成，就能夠開始建立項目實踐grunt了

 

2、實踐

1.建立一個項目grunt

2.使用命令：npm init，初始化grunt項目爲grunt項目生成package.json

執行完命令後，會在項目根目錄下生成package.json文件，文件內容以下圖2

3.輸入命令：npm install grunt --save-dev，將grunt的最新版本安裝到項目的根目錄中，並將其添加到package.json的devDependencies內

4.使用命令：npm install <module> --save-dev 安裝相應的插件，<module>則是插件的名字，命令執行完後，會在package.json的devDependencies內加入相應插件的版本號

目前我只測試了合併和壓縮兩個插件：

合併任意文件：grunt-contrib-concat，輸入命令：npm install grunt-contrib-concat --save-dev

合併壓縮js代碼：grunt-contrib-uglify，輸入命令：npm install grunt-contrib-uglify --save-dev

能夠看到在命令運行結束後，package.json文件的devDependencies內多了這兩項

5.在項目的根目錄下與package.json同級新建Gruntfile.js文件

此文件由「wrapper」函數、項目與任務配置、加載grunt任務和插件、自定義任務

module.exports = function (grunt) {/*************「wrapper」函數*************/
    grunt.initConfig({/**************項目和任務配置**********/
        pkg: grunt.file.readJSON('package.json'),//引入package.json文件，並可經過pkg.調用package.json中定義的配置
        //合併文件
        concat: {
            options: {
                //定義一個用於插入合併輸出文件之間的字符
                separator: ';'
            },
            dist: {
                // 將要被合併的文件
                src: ['src/js/*.js'],
                // 合併後的JS文件的存放位置
                dest:'min/js/<%= pkg.name %>.js'
            }
        },
        //壓縮文件
        uglify: {
            options: {
                //壓縮後的文件生成的註釋
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            dist: {
                files: {
                    //將concat合併後的文件進行壓縮
                    'min/js/<%= pkg.name %>.min.js' : ['<%= concat.dist.dest %>']
                }
            }
        }
    })
    /*****************加載grunt插件和任務******************/
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    /******************自定義任務*******************************/
    grunt.registerTask('default',['concat','uglify'])
}

6.在命令行中執行grunt命令，將會進行執行，grunt命令只會執行任務default的任務，其餘任務執行須要加上任務名，好比grunt test

先看看執行命令前各文件的狀態

在min下面並無任何文件夾和文件，a.js和b.js中的內容以下圖：

執行命令後：

輸入命令：grunt

再看看項目的變化：

在min文件夾下生成了一個js文件夾，並在裏面生成了grunt_project.js和grunt_project.min.js，grunt_project.js爲a.js和b.js合併後的內容結果，grunt_project.min.js爲合併後的結果壓縮後的內容結果

 

 

到這裏，簡單的grunt構建工具已經完成了，是一個很是大的收穫，它還有不少不少的屬性，將要學習，加油！！！