Grunt教程-前端自動化

時間 2020-11-30

標籤 css node git github shell npm json 數組 sass app 欄目 Node.js 简体版

原文原文鏈接

爲什麼選擇Grunt?

壓縮、編譯、單元測試、代碼檢查等咱們須要自動化，沒必要重複勞動，減少工做量。爲什麼選擇Grunt呢？好像是沒有更好的選擇了。css

準備工做

安裝node.js

Grunt基於Node.js，安裝以前要先安裝Node.js。node

shellbrew install node

更新npm

shellsudo npm install npm -g

安裝 grunt-cli

安裝 grunt-cli 並不等於安裝了 Grunt 任務運行器
Grunt CLI 的任務是運行 Gruntfile 指定的 Grunt 版本。這樣就能夠在一臺電腦上同時安裝多個版本的 Grunt。(沒有懂，俺直接實戰)git

shellnpm install -g grunt-cli

Grunt必備文件

建立文件必須建立文件夾，我創建了一個 test 的文件夾，一個標準的 grunt 項目中必須有兩個文件。github

package.json：用於保存項目元數據。
Gruntfile.js : 用於配置或定義任務、加載 Grunt 插件。shell

在test1文件夾中建立這兩個文件吧。那麼文件中寫什麼內容呢。咱們首先來關注一下package.json寫什麼內容npm

json{
  "name": "test",
  "version": "1.0.0"
}

運行

在項目的根目錄下運行下面的命令json

shellnpm install

命令執行過程

lognpm WARN package.json test1@1.0.0 No description
npm WARN package.json test1@1.0.0 No repository field.
npm WARN package.json test1@1.0.0 No README data

提示說沒有描述信息沒有README之類的
在根目錄添加一個 README.md 文件數組

添加內容

在 package.json 中添加下面內容以後sass

{
  "name": "test",
  "version": "1.0.0",
  "description": "測試的例子",
  "repository": {
    "type": "git",
    "url": "https://github.com/JSLite/JSLite.git"
  }
}

因而乎萬事大吉了app

安裝 Grunt 插件

在此項目中安裝 Grunt 插件

shellsudo npm install grunt --save-dev

package.json的文件內容發現多了 devDependencies 的信息
目錄多了一個 node_modules 的文件夾

json{
  "name": "test",
  "version": "1.0.0",
  "description": "測試的例子",
  "repository": {
    "type": "git",
    "url": "https://github.com/JSLite/JSLite.git"
  },
  "devDependencies": {
    "grunt": "^0.4.5"
  }
}

運行 npm install <module> --save-dev，不只會安裝指定的模塊，還會自動添加到 devDependencies 區域中，且包括版本範圍。

grunt-contrib-uglify

插件用途：壓縮js,css文件
插件名稱：grunt-contrib-uglify

安裝

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

安裝成功以後在package.json的文件內容中的 devDependencies 的信息又增長了

json"devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-uglify": "^0.8.0"
  }

使用方法

還記得咱們上面說一個Grunt項目要兩個必須的文件一個 package.json 和Gruntfile.js，注意大小寫，Linux區分大小寫的，建立 Gruntfile.js 並寫入以下內容

js// 包裝函數
module.exports = function(grunt) {

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

    // uglify插件的配置信息
    uglify: {
        options: {
          banner: '/*! This is uglify test - ' +
            '<%= grunt.template.today("yyyy-mm-dd") %> */',
          beautify: true,//是否壓縮
          mangle: false, //不混淆變量名
          compress:true,//打開或關閉使用默認選項源壓縮。
        },
        app_task: {
          files: {
            'build/app.min.js': ['lib/index.js', 'lib/test.js']
          }
        }
    }
  });

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

  // 告訴grunt當咱們在終端中輸入grunt時須要作些什麼
  grunt.registerTask('default', ['uglify']);

};

分析

banner：在build/app.min.js 文件生成內容如日期什麼的
files：將 lib 目錄中的 js 壓縮合並生成到 build 目錄中生成 app.min.js

運行grunt

輸入命令下面命令，好了，個人沒有錯誤正常的。若是有錯誤，會有錯誤日誌，本身分析哦。

shellgrunt

grunt-contrib-watch

插件用途：監控文件變化並自動運行grunt的watch插件
插件名稱：grunt-contrib-watch

安裝

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

使用

修改 Gruntfile.js

initConfig 中添加了

js// watch插件的配置信息
    watch: {
        another: {
            files: ['lib/*.js'],
            tasks: ['uglify'],
            options: {
                // Start another live reload server on port 1337
                livereload: 1337
            }
        }
    }

增長了一行

jsgrunt.loadNpmTasks('grunt-contrib-watch');

數組中添加了watch

jsgrunt.registerTask('default', ['uglify','watch']);

添加了watch後，完整的 Gruntfile.js

js// 包裝函數
module.exports = function(grunt) {

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

    // uglify插件的配置信息
    uglify: {
        options: {
          banner: '/*! This is uglify test - ' +
            '<%= grunt.template.today("yyyy-mm-dd") %> */'
        },
        app_task: {
          files: {
            'build/app.min.js': ['lib/index.js', 'lib/test.js']
          }
        }
    },


    // watch插件的配置信息
    watch: {
        another: {
            files: ['lib/*.js'],
            tasks: ['uglify'],
            options: {
                // Start another live reload server on port 1337
                livereload: 1337
            }
        }
    }


  });

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

  // 告訴grunt當咱們在終端中輸入grunt時須要作些什麼
  grunt.registerTask('default', ['uglify','watch']);

};

grunt-contrib-watch

安裝 `stylus`

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

修改 `Gruntfile.js`

initConfig 中添加了

jsstylus:{
    build: {
        options: {
            linenos: false,
            compress: false,
            banner: '\/** \n * <%= pkg.name %> - <%= pkg.description %>\n * version <%= pkg.version %> \n * author <%= pkg.author %> \n * date <%= grunt.template.today() %> \n**/\n'
        },
        files: [{
            'css/historyDetail.css': 'styl/historyDetail.styl'
        }]
    }
},

下面添加

jsgrunt.loadNpmTasks('grunt-contrib-stylus');

paths 將自動使用@import來引入一些Stylus文件，好比一些Mixin集合，放在一個Stylus文件中進行維護，寫在paths中後，就能夠在每一個Stylus文件中調用它們。define 能夠定義一些全局變量，而後在Stylus中使用，但我不喜歡使用這個配置，而是更喜歡把全局變量放在一個單獨的Stylus文件中，而後將這個文件加入paths的數組中。一句話，把全部不會直接產出CSS的Stylus代碼分紅若干個Stylus文件，而後所有添加到paths中，這樣在全部Stylus文件中均可以隨時調用了，但要注意這些Stylus文件的調用關係和使用前後順序。

compress 及 linenos 是兩個Boolean值，用來控制是否壓縮處理後的CSS代碼以及是否在CSS代碼中保留註釋。

banner 是一個字符串，會被放置在CSS文件的最前面，通常我用來寫註釋，好比

banner: '\/** \n * <%= pkg.name %> - <%= pkg.description %>\n * version <%= pkg.version %> \n * author <%= pkg.author %> \n * date <%= grunt.template.today() %> \n**/\n'

firebug 將控制是否使用一個Firebug的Stylus插件FireStylus for Firebug，能夠在Firefox中調試Stylus。

use 能夠引入一些Stylus的其餘grunt插件。

經常使用模塊設置

grunt-contrib-clean：刪除文件。npm>>
grunt-contrib-compass：使用compass編譯sass文件。npm>>
grunt-contrib-concat：合併文件。npm>>
grunt-contrib-copy：複製文件。npm>>
grunt-contrib-cssmin：壓縮以及合併CSS文件。npm>>
grunt-contrib-imagemin：圖像壓縮模塊。npm>>
grunt-contrib-jshint：檢查JavaScript語法。npm>>
grunt-contrib-uglify：壓縮以及合併JavaScript文件。npm>>
grunt-contrib-watch：監視文件變更，作出相應動做。npm>>
grunt-contrib-stylus：stylus編寫styl輸出css npm>>