用grunt搭建自動化的web前端開發環境

 

一、安裝nodejs

下載地址：https://nodejs.org/en/，因系統是win7 64位的系統，故版本選擇以下圖所示：

安裝nodejs以後，在控制檯中輸入「node -v」來查看nodejs的版本，測試nodejs是否安裝成功

 

二、安裝grunt-CLI

用nodejs的「npm install…」在global環境安裝grunt-cli ，注意在任何目錄下 install -g都是同樣的

打開控制檯（注意：windows系統下請使用管理員權限打開），輸入：

npm install -g grunt-cli

回車，命令行會出現一個轉動的小橫線，表示正在聯網加載。加載成功以後會出現如下界面：

這時候要驗證一下grunt-cli是否安裝完成並生效，你只須要繼續在命令行中輸入「grunt」命令便可。若是生效，則會出現如下結果：

至此，你的grunt-cli已經安裝成功。

 

三、建立一個簡單的網站

在D盤下創建grunt文件夾，文件目錄以下界面所示：

 

打開package.json文件，設置內容以下：

{
  "name": "grunt-study",
  "version": "1.0.0",
  "description": "study",
  "devDependencies": {    

  }
}

 

四、安裝grunt

注意，這裏安裝grunt再也不是全局安裝了，須要你以管理員的帳號打開控制檯，在控制檯進入到網站或系統的具體目錄下。這裏咱們進入 D:\grunt 目錄下。而後輸入如下命令。

npm install grunt --save-dev

回車運行命令安裝成功以後以下圖所示：

 安裝成功以後網站根目錄下會生成一個node_modules的文件夾；

 這個時候網站根目錄下的package.json文件以下圖所示：

 在控制檯運行「grunt」命令。若是你獲得一個warning提示，那說明grunt已經起做用了。以下圖：

通過以上步驟，說明grunt已經在這個目錄下成功安裝。

 

5. 配置Gruntfile.js

module.exports = function(grunt) {

    //任務配置，全部插件的配置信息
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json')
    });

    //須要執行的任務（注意前後順序）
    grunt.registerTask('default', []);
};

 

6. 演示concat 和uglify插件的使用

一、在項目根目錄下利用npm安裝concat和uglify插件

npm install grunt-contrib-concat --save-dev

npm install grunt-contrib-uglify --save-dev

安裝成功以後以下圖所示：

 

二、在Gruntfile.js中添加任務（先合併後壓縮），Gruntfile.js最後的代碼以下：

module.exports = function(grunt) {

    //任務配置，全部插件的配置信息
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        //合併
        concat: {
            dist: {
                src: ['assets/js/*.js'], //須要處理的文件
                dest: 'dist/js/main.js' //處理後的文件名或所在目錄
            }
        },

        //壓縮
        uglify: {
            dist: {
                files: {
                    'dist/js/main.min.js': ['<%= concat.dist.dest %>'] //[處理後的文件名：須要處理的文件]
                }
            }
        }
    });

    //告訴grunt咱們將使用的插件
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');

    //須要執行的任務（注意前後順序）
    grunt.registerTask('default', ['concat', 'uglify']);
};

三、運行grunt後結果以下

四、這個是dist文件夾下的內容

 

7. 完結

僅做記錄，以上就是grunt的基本使用方法，把前端項目中的多個js文件，合併到一塊兒，並壓縮。

 

參考資料以下：

http://www.cnblogs.com/wangfupeng1988/p/4561993.html

http://jingyan.baidu.com/article/546ae185058da31149f28ce1.html

http://www.tuicool.com/articles/jUjABv

http://www.cnblogs.com/kaixinbocai/p/3672601.html

http://www.cnblogs.com/yexiaochai/p/3594561.html