Grunt快速使用筆記

本篇文章由：http://xinpure.com/grunt-quick-note/

http://www.gruntjs.net/getting-started Grunt中文網

安裝 Grunt 指令行

npm install -g grunt-cli
           

注意，安裝grunt-cli并不等于安裝了 Grunt！Grunt CLI的任務很簡單：調用與Gruntfile在同一目錄中 Grunt。這樣帶來的好處是，允許你在同一個系統上同時安裝多個版本的 Grunt。

Grunt 會在具體的工作目錄中進行安裝

添加 Gruntfile.js/Gruntfile.coffee

Grunt 官方案例:

module.exports = function(grunt) {

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: {
            options: {
                separator: ';'
            },
            dist: {
                src: ['src/**/*.js'],
                dest: 'dist/<%= pkg.name %>.js'
            }
        },
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
            },
            dist: {
                files: {
                    'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
                }
            }
        },
        qunit: {
            files: ['test/**/*.html']
        },
        jshint: {
            files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
                options: {
                //這裡是覆寫JSHint預設配置的選項
                globals: {
                    jQuery: true,
                    console: true,
                    module: true,
                    document: true
                }
            }
        },
        watch: {
            files: ['<%= jshint.files %>'],
            tasks: ['jshint', 'qunit']
        }
    });

    grunt.loadNpmTasks('grunt-contrib-concat'); //檔案合并子產品
    grunt.loadNpmTasks('grunt-contrib-uglify'); //檔案壓縮子產品
    grunt.loadNpmTasks('grunt-contrib-qunit');  //檔案測試子產品
    grunt.loadNpmTasks('grunt-contrib-jshint'); //檔案檢測子產品
    grunt.loadNpmTasks('grunt-contrib-watch');  //檔案監聽子產品

    grunt.registerTask('test', ['jshint', 'qunit']); //grunt test指令 執行此任務

    grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);  //grunt指令，執行的預設任務

};
           

根據具體的工作目錄，對以上配置進行調整(主要就是修改檔案路徑)，按需求調整 grunt 任務。

添加 package.json

方式一：手動建立

package.json

檔案

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-concat": "^0.5.1",
    "grunt-contrib-jshint": "^0.11.2",
    "grunt-contrib-qunit": "^0.7.0",
    "grunt-contrib-uglify": "^0.9.1",
    "grunt-contrib-watch": "^0.6.1"
  }
}
           

可通過

npm install

指令，直接安裝

devDependencies

中的所有子產品

方式二：使用

npm init

建立(步驟略繁瑣，但自我感覺思路更清晰)

此指令會建立一個基本的

package.json

檔案(一種指令行的配置方式)

input:

npm init
           

output:

name: (grunt_test) 
version: (1.0.0) 
description: This is grunt test
entry point: (Gruntfile.js) 
test command: grunt
git repository: 
keywords: test
author: xinpureZhu
license: (ISC) 
About to write to /Project/grunt_test/package.json:

{
  "name": "grunt_test",
  "version": "1.0.0",
  "description": "This is grunt test",
  "main": "Gruntfile.js",
  "scripts": {
    "test": "grunt"
  },
  "keywords": [
    "test"
  ],
  "author": "xinpureZhu",
  "license": "ISC"
}
           

這樣

package.json

檔案就建立好了，接下來就是一個一個子產品的安裝(相對方式一的一次性安裝，略麻煩的地方)

input:

npm install grunt --save-dev

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

npm install grunt-contrib-jshint --save-dev

npm install grunt-contrib-qunit --save-dev

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

npm install grunt-contrib-concat --save-dev
           

npm install <module> --save-dev

在安裝子產品的同時，還會自動将其添加到

package.json

檔案的

devDependencies

配置段中

開始使用 Grunt

package.json

和

Gruntfile

都必須存放在項目的根目錄下

執行

grunt

指令，就會執行

Gruntfile

檔案裡配置的

default

任務

使用過程中可能會存在

warnings

, 可以使用

grunt --force

忽略這些警告。

在寫項目的過程中，可以執行

grunt watch

監聽檔案，當檔案被修改時，自動執行 檔案合并、檔案壓縮等操作(按需求配置 watch tasks)

轉載于:https://www.cnblogs.com/xinpureZhu/p/4651093.html