Grunt教程-前端自動化

pingink 發(fā)布于2019-08-21 10:27 / 2260人閱讀

摘要：為何選擇壓縮編譯單元測試代碼檢查等我們需要自動化，不必重復(fù)勞動，減小工作量。用于保存項目元數(shù)據(jù)。圖像壓縮模塊。監(jiān)視文件變動，做出相應(yīng)動作。

為何選擇Grunt?

壓縮、編譯、單元測試、代碼檢查等我們需要自動化，不必重復(fù)勞動，減小工作量。為何選擇Grunt呢？好像是沒有更好的選擇了。

準(zhǔn)備工作 安裝node.js

Grunt基于Node.js，安裝之前要先安裝Node.js。

shellbrew install node

更新npm

shellsudo npm install npm -g

安裝 grunt-cli

安裝 grunt-cli 并不等于安裝了 Grunt 任務(wù)運行器
Grunt CLI 的任務(wù)是運行 Gruntfile 指定的 Grunt 版本。這樣就可以在一臺電腦上同時安裝多個版本的 Grunt。(沒有懂，俺直接實戰(zhàn))

shellnpm install -g grunt-cli

Grunt必備文件

創(chuàng)建文件必須創(chuàng)建文件夾，我建立了一個 test 的文件夾，一個標(biāo)準(zhǔn)的 grunt 項目中必須有兩個文件。

package.json：用于保存項目元數(shù)據(jù)。
Gruntfile.js : 用于配置或定義任務(wù)、加載 Grunt 插件。

在test1文件夾中創(chuàng)建這兩個文件吧。那么文件中寫什么內(nèi)容呢。我們首先來關(guān)注一下package.json寫什么內(nèi)容

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

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

shellnpm install

命令執(zhí)行過程

lognpm WARN package.json [email protected] No description
npm WARN package.json [email protected] No repository field.
npm WARN package.json [email protected] No README data

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

添加內(nèi)容
在 package.json 中添加下面內(nèi)容之后

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

于是乎萬事大吉了

安裝 Grunt 插件

在此項目中安裝 Grunt 插件

shellsudo npm install grunt --save-dev

package.json的文件內(nèi)容發(fā)現(xiàn)多了 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 --save-dev，不僅會安裝指定的模塊，還會自動添加到 devDependencies 區(qū)域中，且包括版本范圍。
grunt-contrib-uglify

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

安裝

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

安裝成功之后在package.json的文件內(nèi)容中的 devDependencies 的信息又增加了

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

使用方法

還記得我們上面說一個Grunt項目要兩個必須的文件一個 package.json 和Gruntfile.js，注意大小寫，Linux區(qū)分大小寫的，創(chuàng)建 Gruntfile.js 并寫入如下內(nèi)容

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

  // 任務(wù)配置,所有插件的配置信息
  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,//打開或關(guān)閉使用默認(rèn)選項源壓縮。
        },
        app_task: {
          files: {
            "build/app.min.js": ["lib/index.js", "lib/test.js"]
          }
        }
    }
  });

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

  // 告訴grunt當(dāng)我們在終端中輸入grunt時需要做些什么
  grunt.registerTask("default", ["uglify"]);

};

分析
banner：在build/app.min.js 文件生成內(nèi)容如日期什么的

files：將 lib 目錄中的 js 壓縮合并生成到 build 目錄中生成 app.min.js
運行g(shù)runt

輸入命令下面命令，好了，我的沒有錯誤正常的。如果有錯誤，會有錯誤日志，自己分析哦。

shellgrunt

grunt-contrib-watch

插件用途：監(jiān)控文件變化并自動運行g(shù)runt的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");

數(shù)組中添加了watch

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

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

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

  // 任務(wù)配置,所有插件的配置信息
  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當(dāng)我們在終端中輸入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: "/** 
 * <%= pkg.name %> - <%= pkg.description %>
 * version <%= pkg.version %> 
 * author <%= pkg.author %> 
 * date <%= grunt.template.today() %> 
**/
"
        },
        files: [{
            "css/historyDetail.css": "styl/historyDetail.styl"
        }]
    }
},

下面添加

js    grunt.loadNpmTasks("grunt-contrib-stylus");

paths 將自動使用@import來引入一些Stylus文件，比如一些Mixin集合，放在一個Stylus文件中進(jìn)行維護(hù)，寫在paths中后，就可以在每個Stylus文件中調(diào)用它們。define 可以定義一些全局變量，然后在Stylus中使用，但我不喜歡使用這個配置，而是更喜歡把全局變量放在一個多帶帶的Stylus文件中，然后將這個文件加入paths的數(shù)組中。一句話，把所有不會直接產(chǎn)出CSS的Stylus代碼分成若干個Stylus文件，然后全部添加到paths中，這樣在所有Stylus文件中都可以隨時調(diào)用了，但要注意這些Stylus文件的調(diào)用關(guān)系和使用先后順序。

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

banner 是一個字符串，會被放置在CSS文件的最前面，一般我用來寫注釋，比如

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

firebug 將控制是否使用一個Firebug的Stylus插件FireStylus for Firebug，可以在Firefox中調(diào)試Stylus。

use 可以引入一些Stylus的其他grunt插件。
常用模塊設(shè)置
grunt-contrib-clean：刪除文件。npm>>
grunt-contrib-compass：使用compass編譯sass文件。npm>>
grunt-contrib-concat：合并文件。npm>>
grunt-contrib-copy：復(fù)制文件。npm>>
grunt-contrib-cssmin：壓縮以及合并CSS文件。npm>>
grunt-contrib-imagemin：圖像壓縮模塊。npm>>
grunt-contrib-jshint：檢查JavaScript語法。npm>>
grunt-contrib-uglify：壓縮以及合并JavaScript文件。npm>>
grunt-contrib-watch：監(jiān)視文件變動，做出相應(yīng)動作。npm>>
grunt-contrib-stylus：stylus編寫styl輸出css npm>>

云服務(wù)器 GPU云服務(wù)器前端自動化 web前端自動化測試前端前端開發(fā)教程辦公自動化視頻教程

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/85549.html

上一篇：[ 學(xué)習(xí)路線 ] 學(xué)完這些去阿里！GOGOGO

下一篇：JavaScript常用的數(shù)組方法——ES3

相關(guān)文章

用grunt搭建自動化的web前端開發(fā)環(huán)境-完整教程

摘要：世界的構(gòu)建工具為何要用構(gòu)建工具一句話自動化。由于擁有數(shù)量龐大的插件可供選擇，因此，你可以利用自動完成任何事，并且花費最少的代價。要想使用，首先必須將安裝到全局環(huán)境中，使用的進(jìn)行安裝。你沒有理由不學(xué)、不用！ jQuery在使用grunt，bootstrap在使用grunt，百度UEditor在使用grunt， grunt是一套前端自動化工具，一個基于nodeJs的命令行工具，一般用于：...

wanghui 2019-08-20 17:02 評論0 收藏0

用grunt搭建自動化的web前端開發(fā)環(huán)境-完整教程

摘要：世界的構(gòu)建工具為何要用構(gòu)建工具一句話自動化。由于擁有數(shù)量龐大的插件可供選擇，因此，你可以利用自動完成任何事，并且花費最少的代價。要想使用，首先必須將安裝到全局環(huán)境中，使用的進(jìn)行安裝。你沒有理由不學(xué)、不用！ jQuery在使用grunt，bootstrap在使用grunt，百度UEditor在使用grunt， grunt是一套前端自動化工具，一個基于nodeJs的命令行工具，一般用于：...

neroneroffy 2019-08-01 16:55 評論0 收藏0

webpack 3 零基礎(chǔ)入門教程 #1 - 介紹

摘要：所以它在某些程度上，跟的功能有些相同。嚴(yán)格上講，模塊化不是他強調(diào)的東西，他旨在規(guī)范前端開發(fā)流程。更是明顯強調(diào)模塊化開發(fā)，而那些文件壓縮合并預(yù)處理等功能，不過是他附帶的功能。 1. webpack 是什么? showImg(https://segmentfault.com/img/remote/1460000012293461); 先來說一下 webpack 是什么。 webpack 的...

張紅新 2019-08-21 17:55 評論0 收藏0

Yeoman,bower,Grunt的安裝

摘要：安裝成功的驗證方式中輸入如果輸出版本號就說明沒有問題。這里再提一點，因為國內(nèi)的某些原因，通過安裝工具可能會非常慢，這里需要我們做一點修改，也就是使用淘寶鏡像。最近看視頻學(xué)習(xí)了前端自動化的一些知識，確實讓我大開眼界。感覺前端越來越神器了。同時跟著視頻自己也嘗試運用了一些工具去構(gòu)建前端項目，但是中間遇見了很多坑，磕磕絆絆的才實現(xiàn)了一點功能，所以打算記錄一下學(xué)習(xí)過程中的筆記。首先列舉一下...

AZmake 2019-08-20 16:02 評論0 收藏0

發(fā)表評論

登陸后可評論

0條評論

pingink

男|高級講師

我要關(guān)注我要私信

TA的文章
閱讀更多

知道了螞蟻森林這個“秘密”，我坐不住了?。?/a>

閱讀 2264·2021-09-26 09:55

字節(jié)跳動上線Pixsoul，主打特效變臉

閱讀 3596·2021-09-23 11:22

前端每日實戰(zhàn)：78# 視頻演示如何用純 CSS 創(chuàng)作 Windows 啟動界面

閱讀 2157·2019-08-30 15:54

CSS學(xué)習(xí)筆記(九) 界面組件之導(dǎo)航菜單

閱讀 1906·2019-08-28 18:03

Node.js 指南（Node.js事件循環(huán)、定時器和process.nextTick()）

閱讀 2600·2019-08-26 12:22

總結(jié)下var、let 和 const 的區(qū)別

閱讀 3435·2019-08-26 12:20

理解ECMAScript中所有的參數(shù)傳遞的都是值，不可能通過引用傳遞參數(shù)

閱讀 1732·2019-08-26 11:56

vue--為什么data屬性必須是一個函數(shù)

閱讀 2254·2019-08-23 15:30

最新活動

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Grunt教程-前端自動化

相關(guān)文章

**用grunt搭建自動化的web前端開發(fā)環(huán)境-完整教程**

**用grunt搭建自動化的web前端開發(fā)環(huán)境-完整教程**

webpack 3 零基礎(chǔ)入門教程 #1 - 介紹

**Yeoman,bower,Grunt的安裝**

發(fā)表評論

0條評論

pingink

男|高級講師

TA的文章

知道了螞蟻森林這個“秘密”，我坐不住了?。?/a>

字節(jié)跳動上線Pixsoul，主打特效變臉

前端每日實戰(zhàn)：78# 視頻演示如何用純 CSS 創(chuàng)作 Windows 啟動界面

CSS學(xué)習(xí)筆記(九) 界面組件之導(dǎo)航菜單

Node.js 指南（Node.js事件循環(huán)、定時器和process.nextTick()）

總結(jié)下var、let 和 const 的區(qū)別

理解ECMAScript中所有的參數(shù)傳遞的都是值，不可能通過引用傳遞參數(shù)

vue--為什么data屬性必須是一個函數(shù)

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Grunt教程-前端自動化

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！