【grunt整合版】grunt使用

時間 2019-11-08

標籤 grunt整合版 grunt 使用欄目 Node.js 简体版

原文原文鏈接

（轉自葉小釵的博客http://www.cnblogs.com/yexiaochai/p/3603389.html，花了很長時間測試，若是誰在使用過程當中遇到問題，歡迎加企鵝：1648739376，共同探討~~）css

grunt

grunt是一套前端自動化工具，一個基於nodeJs的命令行工具，通常用於：html

　　① 壓縮文件前端

　　② 合併文件node

　　③ 簡單語法檢查git

　　④編譯等github

準備階段

一、nodeJs環境

由於grunt是基於nodeJs的，因此首先各位須要安裝nodeJS環境:
(轉自葉小釵的博客)http://www.cnblogs.com/yexiaochai/p/3527418.html或者https://nodejs.org/express

二、安裝grunt

有了nodeJs環境後，咱們即可以開始搞grunt了，由於咱們可能在任何目錄下運行打包程序，因此咱們須要安裝CLI
官方推薦在全局安裝CLI（grunt的命令行接口）npm

npm install -g grunt-cli

這條命令將會把grunt命令植入系統路徑，這樣就能在任意目錄運行他，緣由是json

每次運行grunt時，它都會使用node的require查找本地是否安裝grunt，若是找到CLI便加載這個本地grunt庫
而後應用咱們項目中的GruntFile配置，並執行任務
PS：這段先不要管，安裝完了往下看ide

實例學習：打包zepto

一些東西說多了都是淚，直接先上實例吧，比較容易理解，實例結束後再說其它的
首先在D盤新建一個項目（文件夾就好）
在裏面新增兩個文件

① package.json

{
  "name": "demo",
  "file": "zepto",
  "version": "0.1.0",
  "description": "demo",
  "license": "MIT",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-jshint": "~0.6.3",
    "grunt-contrib-uglify": "~0.2.1",
    "grunt-contrib-requirejs": "~0.4.1",
    "grunt-contrib-copy": "~0.4.1",
    "grunt-contrib-clean": "~0.5.0",
    "grunt-strip": "~0.2.1"
  },
  "dependencies": {
    "express": "3.x"
  }
}

②Gruntfile.js

完了咱們須要在grunt目錄下執行 npm install將相關的文件下載下來：

$ cd d:
$ cd grunt

測試執行grunt可能會報錯，應該是執行 npm install grunt

而後咱們的目錄就會多一點東西：

這個時候在目錄下新建src文件夾，放一個zepto.js進去

而後在Gruntfile中新增如下代碼（先別管做用，增長再說）

module.exports = function (grunt) {

  // 項目配置
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%=pkg.file %>.js',
        dest: 'dest/<%= pkg.file %>.min.js'
      }
    }
  });
  // 加載提供"uglify"任務的插件
  grunt.loadNpmTasks('grunt-contrib-uglify');
  // 默認任務
  grunt.registerTask('default', ['uglify']);
}

而後運行 grunt命令後

grunt

測試時發現報錯：，緣由是未下載grunt-contrib-uglify插件，

此時需執行：npm insatll grunt-contrib-uglify，而後再執行grunt

grunt插件：https://www.npmjs.com/search?q=grunt-contrib-uglify

查看目錄，多了一個文件zepto.min.js，而且是壓縮的！第一步結束~~~

認識Gruntdile與package.json

不出意外，每個gurnt都會須要這兩個文件，而且極可能就只有這兩個文件（複雜的狀況有所不一樣）

package.json

這個文件用來存儲npm模塊的依賴項（好比咱們的打包如果依賴requireJS的插件，這裏就須要配置）
而後，咱們會在裏面配置一些不同的信息，好比咱們上面的file，這些數據都會放到package中
對於package的靈活配置，咱們會在後面提到

Gruntfile

這個文件尤爲關鍵，他通常幹兩件事情：
① 讀取package信息
② 插件加載、註冊任務，運行任務（grunt對外的接口所有寫在這裏面）

Gruntfile通常由四個部分組成
① 包裝函數
這個包裝函數沒什麼東西，意思就是咱們全部的代碼必須放到這個函數裏面

module.exports = function (grunt) {
//你的代碼
}

這個不用知道爲何，直接將代碼放入便可

② 項目/任務配置
咱們在Gruntfile通常第一個用到的就是initConfig方法配置依賴信息

pkg: grunt.file.readJSON('package.json')

這裏的 grunt.file.readJSON就會將咱們的配置文件讀出，而且轉換爲json對象

而後咱們在後面的地方就能夠採用pkg.XXX的方式訪問其中的數據了
值得注意的是這裏使用的是underscore模板引擎，因此你在這裏能夠寫不少東西

uglify是一個插件的，咱們在package依賴項進行了配置，這個時候咱們爲系統配置了一個任務
uglify（壓縮），他會幹這幾個事情：

① 在src中找到zepto進行壓縮（具體名字在package中找到）
② 找到dest目錄，沒有就新建，而後將壓縮文件搞進去
③ 在上面加幾個描述語言

這個任務配置其實就是一個方法接口調用，按照規範來就好，暫時不予關注，
這裏只是定義了相關參數，可是並未加載實際函數，因此後面立刻就有一句：

grunt.loadNpmTasks('grunt-contrib-uglify');

用於加載相關插件，測試時貌似並未加載此插件，因此若是報錯，就手動下載一下插件，考照前面安裝插件方法

最後註冊一個自定義任務（其實也是默認任務），因此咱們下面的命令行是等效的：

grunt == grunt uglify

至此，咱們就簡單解析了一番grunt的整個操做，下面來合併文件的例子

合併文件

合併文件依賴於grunt-contrib-concat插件，因此咱們的package依賴項要新增一項

"devDependencies": {

  "grunt": "~0.4.1",
  "grunt-contrib-jshint": "~0.6.3",
  "grunt-contrib-concat": "~0.3.0",
  "grunt-contrib-uglify": "~0.2.1",
  "grunt-contrib-requirejs": "~0.4.1",
  "grunt-contrib-copy": "~0.4.1",
  "grunt-contrib-clean": "~0.5.0",
  "grunt-strip": "~0.2.1"
},

而後再將代碼寫成這個樣子

module.exports = function (grunt) {
  // 項目配置
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
      options: {
        separator: ';'
      },
      dist: {
        src: ['src/zepto.js', 'src/underscore.js', 'src/backbone.js'],
        dest: 'dest/libs.js'
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-concat');
  // 默認任務
  grunt.registerTask('default', ['concat']);
}

三個文件被壓縮成了一個，可是沒有壓縮，因此，咱們這裏再加一步操做，將之壓縮後再合併

module.exports = function (grunt) {

  // 項目配置
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
      options: {
        separator: ';'
      },
      dist: {
        src: ['src/zepto.js', 'src/underscore.js', 'src/backbone.js'],
        dest: 'dest/libs.js'
      }
    },
    uglify: {
      build: {
        src: 'dest/libs.js',
        dest: 'dest/libs.min.js'
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');
  // 默認任務
  grunt.registerTask('default', ['concat', 'uglify']);
}

我這裏的作法是先合併造成一個libs，而後再將libs壓縮成libs.min.js

因此咱們這裏換個作法，先壓縮再合併，其實unglify已經幹了這些事情了

module.exports = function (grunt) {

  // 項目配置
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      "my_target": {
        "files": {
          'dest/libs.min.js': ['src/zepto.js', 'src/underscore.js', 'src/backbone.js']
        }
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-uglify');
  // 默認任務
  grunt.registerTask('default', ['uglify']);
}

grunt-contrib-stylus

Stylus彷佛並非頗有名，以致於不少人不知道它是作什麼的，但提到SASS相信有很多人據說過甚至使用過很長時間。其實不管是LESS、SASS仍是Stylus這些預處理工具，都是對CSS的一種延伸和強化。出現這些工具的緣由很簡單，CSS自己只是一種描述性質的東西，甚至它不能算是語言而是樣式表，因此咱們須要一個有條件語句和變量甚至是函數的東西去動態生成CSS代碼來達到提升效率和加強可維護性的目的。關於stylus的詳細介紹和使用能夠參考如下網站：

　　http://learnboost.github.io/stylus/

　　http://www.tychio.net//tech/2013/11/16/stylus-guide.html

如前面介紹，咱們已經安裝了node.js，複製Gruntfile.js和package.json至build目錄下：

而後在package.json中將代碼改成以下：

{

"name": "my-project",
"version": "0.1.0",
"devDependencies": {
　　"grunt": "*",
　　"grunt-contrib-jshint": "*",
　　"grunt-contrib-csslint": "*",
　　"grunt-contrib-watch": "*"
}
}

而後再build目錄下執行：

npm install grunt

npm install grunt-contrib-stylus

npm install grunt-contrib-csslint
npm install grunt-contrib-watch

插件安裝完成後以下圖，若是沒有安裝成功或者下載失敗，請從新安裝，不然會報錯~

將Gruntfile.js中的代碼改成以下：(縮進未調整好，測試時自行調整好代碼縮進)

module.exports = function (grunt) {
'use strict';
grunt.initConfig({
watch: {
styl: {
files: ['style/*.styl'],
tasks: ['css']
}
},
stylus: {
aff_new: {
options: {
urlfunc: 'embedurl',
import: [
'tool.styl'
],
banner: '\/\* elaine \*\/\n\/\* ' + (new Date()).toLocaleString() + ' \*\/\n'
},
files: {
'css/style1.css': [
'style/login.styl',
'style/frame.styl',
'style/offer.styl'
],
'css/style2.css':
['style/base.styl'],
'national_flag-master/country.css':
['style/country.styl']
},
}
},
csslint: {
strict: {
options: {
csslintrc: '.csslintrc',
import: 2
},
src: [
'../affiliate/static/css/*.styl.css'
]
}
}
});

/* grunt.loadNpmTasks('grunt-karma');
grunt.loadNpmTasks('grunt-fragment'); */
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-stylus');
grunt.loadNpmTasks('grunt-contrib-csslint');

/* grunt.registerTask('test', ['karma']);
grunt.registerTask('sync', ['fragment']);*/
grunt.registerTask('css', ['stylus']);
grunt.registerTask('default', ['css', 'watch']);
};

在目錄下增長style文件夾，並放置sty文件：

執行grunt,生成css，以下圖所示：

備註：更改任意sty文件，css會自動從新生成，完成~~

後續用到的會繼續補充~