【grunt第二彈】30分鐘學會使用grunt打包前端代碼（02）

時間 2019-11-13

標籤 grunt第二彈 30分學會使用 grunt 打包前端代碼欄目 Node.js 简体版

原文原文鏈接

前言

上一篇博客，咱們簡單的介紹了grunt的使用，一些基礎點沒能覆蓋，咱們今天有必要看看一些基礎知識css

【grunt第一彈】30分鐘學會使用grunt打包前端代碼html

配置任務/grunt.initConfig

前面咱們簡單的介紹了grunt相關的知識，這裏咱們這裏還須要再熟悉下Gruntfile相關的知識點，好比說配置任務前端

grunt的任務配置都是在Gruntfile中的grunt.initConfig方法中指定的，這個配置主要都是一些命名性屬性
好比咱們上次用到的合併以及壓縮的任務配置：node

grunt.initConfig({
    concat: {
        //這裏是concat任務的配置信息
    },
    uglify: {
        //這裏是uglify任務的配置信息
    },
    //任意非任務特定屬性
    my_property: 'whatever',
    my_src_file: ['foo/*.js', 'bar/*.js']
});

其中的my_property徹底可能讀取外部json配置文件，而後在上面任務配置中即可以，好比咱們要壓縮的文件爲準或者最後要放到哪裏，即可以在此配置jquery

咱們使用grunt的時候，主要工做就是配置任務或者建立任務，實際上就是作一個事件註冊，而後由咱們觸發之，因此grunt的核心仍是事件註冊
每次運行grunt時，咱們能夠指定運行一個或者多個任務，經過任務決定要作什麼，好比咱們同時要壓縮和合並還要作代碼檢查web

grunt.registerTask('default', ['jshint','qunit','concat','uglify']);

當運行一個基本任務時，grunt並不會查找配置和檢查運行環境，他僅僅運行指定的任務函數，能夠傳遞冒號分割參數，好比：express

grunt.registerTask('foo', 'A sample task that logs stuff.', function (arg1, arg2) {
  if (arguments.length === 0) {
    grunt.log.writeln(this.name + ", no args");
  } else {
    grunt.log.writeln(this.name + ", " + arg1 + " " + arg2);
  }
});

運行結果以下：編程

$ grunt foo:testing:123
Running "foo:testing:123" (foo) task
foo, testing 123

$ grunt foo:testing
Running "foo:testing" (foo) task
foo, testing undefined

$ grunt foo
Running "foo" task
foo, no args

這裏有個多任務的狀況，就是一個任務裏面實際上第一了多個東東，這個時候就有所不一樣json

grunt.initConfig({
    log: {
        demo01: [1,2,3],
        demo02: 'hello world',
        demo03: false
    }
});
grunt.registerTask('log','log stuff.', function(){
    grunt.log.writeln(this.target + ': ' + this.data);
});

若是咱們運行，運行狀況以下：app

???????

更多時候，咱們實際場景中都會須要自定義任務，而在咱們任務內部使用 grunt.task.run({}) 運行任務
這塊的知識點，咱們後面以實際例子說明

grunt插件

學習grunt主要就是學習grunt的插件使用，因此咱們今天先來學習經常使用的幾個插件

grunt-contrib-unglify

咱們仍然以簡單例子學習

module.exports = function (grunt) {
  grunt.initConfig({
    uglify: {
      my_target: {
        files: {
          'dest/libs.min.js': ['src/zepto.js', 'src/underscoce.js']
        }
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-uglify');
}

這樣會將src裏面的zepto等文件打包值dest的lib.min.js中

壓縮一個文件夾的全部文件

而後這段代碼很是有意思，他會將一個文件目錄裏面的全部js文件打包到另外一個文件夾

module.exports = function (grunt) {
  grunt.initConfig({
    uglify: {
      my_target: {
        files: [{
          expand: true,
          cwd: 'src',
          src: '**/*.js',
          dest: 'dest'
        }]
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-uglify');
}

如果你但願給你文件的頭部加一段註釋性語言配置banner信息便可

grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),
  uglify: {
    options: {
      banner: '/*! 註釋信息 */'
    },
    my_target: {
      files: {
        'dest/output.min.js': ['src/input.js']
      }
    }
  }
});

grunt-contrib-concat

該插件主要用於代碼合併，將多個文件合併爲一個，咱們前面的uglify也提供了必定合併的功能
在可選屬性中咱們能夠設置如下屬性：
① separator 用於分割各個文件的文字，
② banner 前面說到的文件頭註釋信息，只會出現一次
③ footer 文件尾信息，只會出現一次
④ stripBanners去掉源代碼註釋信息（只會清楚/**/這種註釋）

一個簡單的例子：

module.exports = function (grunt) {
  grunt.initConfig({
  concat: {
    options: {
      separator: '/*分割*/',
      banner: '/*測試*/',
      footer: '/*footer*/'
     
    },
    dist: {
      src: ['src/zepto.js', 'src/underscore.js', 'src/backbone.js'],
      dest: 'dist/built.js',
    }
  }
});
  grunt.loadNpmTasks('grunt-contrib-concat');
}

合併三個文件爲一個，這種在咱們源碼調試時候頗有意義

構建兩個文件夾

有時候咱們可能須要將合併的代碼放到不一樣的文件，這個時候能夠這樣幹

module.exports = function (grunt) {
  grunt.initConfig({
    concat: {
      basic: {
        src: ['src/zepto.js'],
        dest: 'dest/basic.js'
      },
      extras: {
        src: ['src/underscore.js', 'src/backbone.js'],
        dest: 'dest/with_extras.js'
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-concat');
}

這種功能還有這樣的寫法：

module.exports = function (grunt) {
  grunt.initConfig({
    concat: {
      basic_and_extras: {
        files: {
          'dist/basic.js': ['src/test.js', 'src/zepto.js'],
          'dist/with_extras.js': ['src/underscore.js', 'src/backbone.js']
        }
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-concat');
}

第二種寫法便於使用配置文件，具體各位選取吧，至於讀取配置文件的東西咱們這裏就先不關注了

grunt-contrib-jshint

該插件用於檢測文件中的js語法問題，好比我test.js是這樣寫的：

alert('我是葉小釵')

module.exports = function (grunt) {
  grunt.initConfig({
    jshint: { 
      all: ['src/test.js']
    }
  });
  grunt.loadNpmTasks('grunt-contrib-jshint');
}

運行結果是：

$ grunt jshint
Running "jshint:all" (jshint) task
Linting src/test.js ...ERROR
[L1:C15] W033: Missing semicolon.
alert('我是葉小釵')

說我缺乏一個分號，好像確實缺乏.....若是在裏面寫明顯的BUG的話會報錯
多數時候，咱們認爲沒有分號無傷大雅，因此，咱們文件會忽略這個錯誤：

jshint: {
  options: {
    '-W033': true
  },
  all: ['src/test.js']
}

這裏有一個稍微複雜的應用，就是咱們合併以前作一次檢查，合併以後再作一次檢查，咱們能夠這樣寫

module.exports = function (grunt) {
  grunt.initConfig({
    concat: {
      dist: {
        src: ['src/test01.js', 'src/test02.js'],
        dest: 'dist/output.js'
      }
    },
    jshint: {
      options: {
        '-W033': true 
      },
      pre: ['src/test01.js', 'src/test02.js'],
      after: ['dist/output.js']
    }
  });
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-jshint');
}

$ grunt jshint:pre concat jshint:after
Running "jshint:pre" (jshint) task
>> 2 files lint free.
Running "concat:dist" (concat) task
File "dist/output.js" created.
Running "jshint:after" (jshint) task
>> 1 file lint free.

這裏連續運行了三個任務，先作檢查再合併，而後作檢測，我這裏寫了兩個簡單的文件，若是將jquery搞進去的話，好像還出了很多BUG......
因此真的要用它還要自定一些規範，咱們這裏暫時到這裏，先進入下一個插件學習

grunt-contrib-requirejs

咱們的grunt打包程序極有可能與requirejs一塊兒使用，可是幾個插件學習下來又屬requireJs的使用最爲麻煩，由於網上資源不多，搞到這一段耗掉了我不少精力

這個時候你就會感嘆，英語好不必定編程好，英語差想成爲高手仍是不簡單啊！！！

requirejs: {
  compile: {
    options: {
      baseUrl: "path/to/base",
      mainConfigFile: "path/to/config.js",
      name: "path/to/almond", // assumes a production build using almond
      out: "path/to/optimized.js"
    }
  }
}

官方的例子首先就是這幾個屬性：

baseUrl 表明全部的js文件都會相對於這個目錄

mainConfigFile 配置文件目錄

name ？？？

out 輸出文件

一些參數咱們不太瞭解，這個時候就只能以例子破之了

module.exports = function (grunt) {
  grunt.initConfig({
    requirejs: {
      compile: {
        "options": {
          "baseUrl": "./",
          "paths": {
            "$": "src/zepto",
            "_": "src/underscore",
            "B": "src/backbone",
            "Test": "src/Test01"
          },
          "include": [
            "$",
            "_",
            "B",
            "Test"
          ],
          "out": "dest/libs.js"
        }
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-requirejs');
}

這樣配置後，會將include裏面的文件打包爲out對應的文件，paths的自己意義不大，就是用於配置include裏面的指向

這個時候咱們來加個name看看有神馬做用：

module.exports = function (grunt) {
  grunt.initConfig({
    requirejs: {
      compile: {
        "options": {
          "baseUrl": "./",
          "name": 'src/test02.js',
          "paths": {
            "$": "src/zepto",
            "_": "src/underscore",
            "B": "src/backbone",
            "Test": "src/Test01"
          },
          "include": [
            "$",
            "_",
            "B",
            "Test"
          ],
          "out": "dest/libs.js"
        }
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-requirejs');
}

這樣的話，會將name對應文件壓縮到壓縮文件的最前面，可是具體是幹什麼的，仍是不太清楚，其英文註釋說是單個文件或者其依賴項優化，不知道優化什麼啊。。。囧！！！

requireJS基本的用法就是這樣了，其詳細信息，咱們過段時間再來看看，下面說一下requireJS的其它用法

咱們這裏將requireJS的配置信息放在外面，而Gruntfile採用自定義任務的方式完成上面的功能

配置文件/cfg.json

{requirejs: {
  "options": {
    "baseUrl": "./",
    "paths": {
      "$": "src/zepto",
      "_": "src/underscore",
      "B": "src/backbone",
      "Test": "src/Test01"
    },
    "include": [
      "$",
      "_",
      "B",
      "Test"
    ],
    "out": "dest/libs.js"
  }
}}

而後，這裏咱們便不是有initConfig的作法了，直接使用自定義任務

module.exports = function (grunt) {

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

  grunt.registerTask('build', 'require demo', function () {

    //第一步，讀取配置信息
    var cfg = grunt.file.readJSON('cfg.json');
    cfg = cfg.requirejs;
    grunt.config.set('requirejs', { test: cfg });

    //第二步，設置參數
    grunt.log.debug('參數：' + JSON.stringify(grunt.config()));

    //第三步跑任務
    grunt.task.run(['requirejs']);
    
  });

}

$ grunt build --debug
Running "build" task
[D] Task source: d:\grunt\Gruntfile.js
[D] 參數：{"requirejs":{"test":{"options":{"baseUrl":"./","paths":{"$":"src/zept
o","_":"src/underscore","B":"src/backbone","Test":"src/Test01"},"include":["$","
_","B","Test"],"out":"dest/libs.js"}}}}

Running "requirejs:test" (requirejs) task
[D] Task source: d:\grunt\node_modules\grunt-contrib-requirejs\tasks\requirejs.j
s
>> Tracing dependencies for: d:/grunt/dest/libs.js
>> Uglifying file: d:/grunt/dest/libs.js
>> d:/grunt/dest/libs.js
>> ----------------
>> d:/grunt/src/zepto.js
>> d:/grunt/src/underscore.js
>> d:/grunt/src/backbone.js
>> d:/grunt/src/Test01.js

效果仍是有的，最後咱們介紹下requireJS打包模板文件

require與模板文件

咱們知道，模板文件通常都是html，好比咱們這裏的demo01.html，對於這個文件咱們應該怎麼打包呢？其實很簡單......

須要幹兩件事情：

① 引入require.text

② 加入模板文件

{
  "requirejs": {
    "options": {
      "baseUrl": "./",
      "paths": {
        "$": "src/zepto",
        "_": "src/underscore",
        "B": "src/backbone",
        "test": "src/test01",
        "text": "src/require.text"

      },
      "include": [
        "$",
        "_",
        "B",
        "test",
        "text!src/demo01.html"
      ],
      "out": "dest/libs.js"
    }
  }
}

因而，咱們便成功將模板打入了

$ grunt build --debug
Running "build" task
[D] Task source: d:\grunt\Gruntfile.js
[D] 參數：{"requirejs":{"test":{"options":{"baseUrl":"./","paths":{"$":"src/zept
o","_":"src/underscore","B":"src/backbone","test":"src/test01","text":"src/requi
re.text"},"include":["$","_","B","test","text!src/demo01.html"],"out":"dest/libs
.js"}}}}

Running "requirejs:test" (requirejs) task
[D] Task source: d:\grunt\node_modules\grunt-contrib-requirejs\tasks\requirejs.j
s
>> Tracing dependencies for: d:/grunt/dest/libs.js
>> Uglifying file: d:/grunt/dest/libs.js
>> d:/grunt/dest/libs.js
>> ----------------
>> d:/grunt/src/zepto.js
>> d:/grunt/src/underscore.js
>> d:/grunt/src/backbone.js
>> d:/grunt/src/test01.js
>> d:/grunt/src/require.text.js
>> text!src/demo01.html

在文件中咱們引用方式是：

"text!src/demo01.html" => '具體文件'

打包樣式文件

樣式文件的打包方式與js不太同樣，這裏咱們下載css-min插件，而且在package.json中新增依賴項

{
  "name": "demo",
  "version":         "0.1.0",
  "description":     "demo",
  "license":         "MIT",
  "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",
    "grunt-contrib-watch": "~0.6.0",
    "grunt-contrib-cssmin": "~0.5.0"
  },
  "dependencies":    {
    "express": "3.x"
  }
}

module.exports = function (grunt) {
  grunt.initConfig({
    cssmin: {
      compress: {
        files: {
          'dest/car.min.css': [
          "src/car.css",
          "src/car01.css"
        ]
        }
      }
    }
  });

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

}

如此一來咱們即可以壓縮合並CSS文件了：

$ grunt cssmin --debug
Running "cssmin:compress" (cssmin) task
[D] Task source: d:\grunt\node_modules\grunt-contrib-cssmin\tasks\cssmin.js
File dest/car.min.css created.