grunt前端自動化

一.簡介

二.grunt安裝使用

1.安裝nodejs

grunt是一個基於nodejs命令的工具，所以須要安裝nodejs環境，nodejs下載地址：

https://nodejs.org/en/   根據本身的主機的位數或者是根據須要下載相應的平臺的安裝包，

本文檔主要是針對windows環境，nodejs安裝和安裝其餘軟件沒有什麼區別不作詳細介紹

關鍵步驟檢查nodejs是否安裝成功：在windows命令行窗口中輸入npm -version

若是輸出nodejs的相應的版本號說明安裝成功

 2.安裝grunt命令行工具grunt-cli

打開windows命令行工具輸入：

npm install grunt -g grunt-cli

3.安裝grunt

打開windows命令行工具輸入：

npm install grunt --save-dev

安裝完後檢查grunt是否安裝成功，在命令行窗口輸入：

grunt -version

4.grunt構建web前端

在磁盤上新建一個項目，例如：jsproject

4.1在jsproject下新建一個目錄src用於存放js源碼文件

4.2建立一個文件package.json

文件package.json和src平行存放

package.json輸入如下內容

{

  "name": "yizhi",//構建簽署名

  "version": "0.1.0",//構建的版本號

  "devDependencies": {

    "grunt": "~0.4.5",//依賴grunt 版本

    "grunt-contrib-concat": "~0.1.1",//依賴的文件合併插件版本

    "grunt-contrib-jshint": "^0.11.3",//依賴的js語法檢測插件版本

    "grunt-contrib-uglify": "~0.8.0"//依賴的js文件壓縮插件版本

  }

}

完成package.json配置後輸入後：

npm install

（執行該命令時去要cd到項目的根目錄） 而後觀察項目的根目錄下多了個一個node_modules目錄文件

4.3建立Gruntfile.js

Gruntfile.js文件與src平行放在項目文件的根目錄

Gruntfile.js中配置如下內容

module.exports = function (grunt) {
    //config
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        //merger javascipt source files into a specific file
        concat: {
            domop: {
                src: ['src/jquery-calendar-v3.js'],
                dest: 'dest/common.js'
            }
        },
        //grunt uglify plugin is used to compress javascript file
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build: {
                src: 'dest/common.js',//壓縮依賴的原文件
                dest: 'dest/common.min.js'//壓縮後的文件
            }
        },
        //grunt jshint plugin is used to check javascript Syntax
        jshint: {
            build: ['Gruntfile.js', 'src/jquery-calendar-v3.js'],//檢查js文件中代碼的語法錯誤
            options: {
                jshintrc: '.jshintrc'//從.jshintrc中讀取配置
            }
        },
        //grunt watch plugin
        watch: {
            build: ['src/*js', 'src/*.css'],
            task: ['jshint', 'uglify'],
            options: {spawn: false}
        }
    });

    //load plugins
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    //grunt.loadNpmTasks('grunt-contrib-watch');
    //register tasks
    grunt.registerTask('default', ['concat', 'uglify']);//合併和壓縮js，須要考慮執行順序
   //在合併壓縮以前先使用jshint檢測js代碼的語法錯誤，語法錯誤是根據.jshintrc文件中的配置來提示
};

.jshintrc文件內容以下：

{

  "boss":false,

  "curly":true,

  "eqeqeq":true,

  "eqnull":true,

  "expr":true,

  "immed":true,

  "newcap":true,

  "noempty":true,

  "undef":true,

  "browser":true,

  "devel":true,

  "node":true

}

最後在windows中輸入：grunt命令(執行該命令時去要cd到項目的根目錄)，若是沒語法錯誤，grunt就會自動合併源代碼並壓縮