初學grunt

check the official docs first

grunt到底可以做些什麼？

• 最小化檔案 uglify
• 檔案整合 concat

install

node.js && npm

install

git(optional)

,

install

vscode editor

, in terminal select default shell ( from

cmd

to

git bash

)

for example, use following command to copy the repository to your pc:

git clone https://github.com/cowboy/jquery-tiny-pubsub

cd

to the folder “jquery-tiny-pub”

use command

npm install

to install all dependencies

Gruntfile組成，一般用Gruntfile.js。

組成為：

1. wrapper function 包裝器函數:

module.exports = function(grunt) {}

這個算是入口，當在terminal中輸入grunt時，node知道加載這個檔案。

1. Project and task configuration 項目和任務配置

   如：

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

   ,

   uglify: {}

   文檔中寫到：

   In this example, grunt.file.readJSON('package.json') imports the JSON metadata stored in package.json into the grunt config.

   我的了解：

   pkg的全稱是package。 grunt這個對象，後面跟一個file屬性，然後一個readJSON方法，應該都是grunt自定義的, 可能隻有檢視源檔案才能明白作者是怎麼設計的。看名字readJSON就知道是讀json檔案去了。

   那麼讀檔案的目的是什麼？讀什麼内容呢？

   文檔中寫到：

   Because <% %> template strings may reference any config properties, configuration data like filepaths and file lists may be specified this way to reduce repetition.
              

   這個模闆文法可能引用任何配置屬性，為了減少重複，配置資料如檔案路徑和檔案清單可能用這種方式來指定

   You may store any arbitrary data inside of the configuration object, and as long as it doesn't conflict with properties your tasks require, it will be otherwise ignored. 
              

   Also, because this is JavaScript, you're not limited to JSON;
              

   you may use any valid JS here. 
              

   You can even programmatically generate the configuration if necessary.
              

   内容等會再看，先看後面的

   示例如下：

   // Project configuration.
   grunt.initConfig({
     pkg: grunt.file.readJSON('package.json'),
     uglify: {
       options: {
         banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
       },
       build: {
         src: 'src/<%= pkg.name %>.js',
         dest: 'build/<%= pkg.name %>.min.js'
       }
     }
   });
              

   這裡提到了模版字元串

   <% %>

   ，一開始聽着名字還以為是js中的模闆字元串呢，這看不起不像，為什麼呢，可能因為*``*是es6的文法吧，Template literals。至于這個模版字元串怎麼定義的，估計隻能檢視源碼了。然後檢視api吧，grunt.template。

   <%= pkg.name %>

   應該指的是，去package.json裡面去找name這個key。即{“name”: ??}，如我自定義的這個name是gruntproject， 然後我在根目錄建立一個檔案夾src，在裡面在建一個檔案gruntproject.js。這個

   src: 'src/<%= pkg.name %>.js'

   就是原檔案的位置。然後

   dest: 'build/<%= pkg.name %>.min.js'

   就是目标檔案的位置和檔案名。當我在terminal中輸入

   grunt uglify

   ，就會輸出下面的Logs

   Running "uglify:build" (uglify) task
    
    > > 1 file created 30 B → 63 B
    
    Done.
              

   再看根目錄，就會發現有個檔案夾

   build

   自動生成了，裡面有一個檔案

   gruntproject.min.js

   。打開這個檔案，代碼如下：

   /*! gruntproject 2019-08-02 */
   
       +gruntproject.js裡面的代碼
              

   是以這個{options: {banner: ??}}的意思，banner是橫幅的意思，然後會在新檔案的第一行開始寫入，然後基本格式是一個字元串，如

   “某個字元串\n”

   ，

   \n

   是換行的意思。可以看出模版字元串裡面的代碼是會先解析的，解析完後再合并到字元串裡面。

2. Loading Grunt plugin and tasks 加載grunt插件和任務

   是不是說需要grunt插件來處理特定的任務，及uglify任務就必須要grunt-contrib-uglify插件來處理。這時候pkg應該排上用處了

3. Custom tasks 自定義任務

   首要要設定一個預設的任務，即告訴grunt，如果我沒有指定要做哪個任務，那麼就做這個default任務

   執行個體代碼塊：

   // Default task(s).
   grunt.registerTask('default', ['uglify']);
              

   文檔中寫到：

   You can configure Grunt to run one or more tasks by default by defining a default task. In the following example, running grunt at the command line without specifying a task will run the uglify task. This is functionally the same as explicitly running grunt uglify or even grunt default. Any number of tasks (with or without arguments) may be specified in the array.

   即在這個執行個體中，我可以用

   grunt default

   或

   grunt uglify

   來執行default任務uglify。

   如果我想添加更多的任務，那麼就直接在這個數組裡面加就可以了

   文檔中寫到：

   If your project requires tasks not provided by a Grunt plugin, you may define custom tasks right inside the Gruntfile. For example, this Gruntfile defines a completely custom default task that doesn't even utilize task configuration:
              

   如果某些情況，沒有相應的插件可以處理，那麼就可以直接在這個檔案裡定義。

   如下面這個列子就完全沒有使用第二步中的任務配置

   module.exports = function(grunt) {
   
     // A very basic default task.
     grunt.registerTask('default', 'Log some stuff.', function() {
       grunt.log.write('Logging some stuff...').ok();
     });
   
   };
              

   通過查文檔api中的grunt.task，

   grunt.registerTask

   是

   grunt.task.registerTask

   的縮寫， 然後這裡用到了3個參數，用的是這個

   grunt.task.registerTask(taskName, description, taskList)

   。然後grunt.log的api中的一個用法

   grunt.log.write(msg)

   ， 看是要看api怎麼寫的，比如grunt.log.write和grunt.log.writeln的差別。

minify files:

最小化檔案，比如jquery檔案的開發版和最小化版

uglify task, grunt-contrib-uglify plugin

任務名叫做

uglify

，要用

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

安裝插件到devDependencies