[grunt] grunt-ng-constant 介绍
发布于 4 年前 作者 qjzd 1978 次浏览 来自 码农

git地址

https://github.com/werk85/grunt-ng-constant

介绍

Clean files and folders

Getting Started 入门指南 (翻译ReadMe)

This plugin requires Grunt ~0.4.1

这个插件依赖版本0.4.1的Grunt

If you haven’t used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you’re familiar with that process, you may install this plugin with this command:

如果你还没有使用过Grunt, 一定要阅读入门指南, 因为它解释了如何创建一个Gruntfile以及安装和使用Grunt插件。
一旦你熟悉这一过程,你可以安装这个插件使用这个命令:
npm install grunt-ng-constant --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

一旦这个插件已经安装,这可能使在把以下这一行放在Gruntfile中
grunt.loadNpmTasks('grunt-ng-constant');

This plugin was designed to work with Grunt 0.4.x. If you’re still using grunt v0.3.x it’s strongly recommended that you upgrade, but in case you can’t please use v0.3.2.

这个插件需要与Grunt0.4.x一起工作。如果你仍然使用版本为0.3.x的Grunt。强烈建议你升级, 但是如果你无法升级到0.4.x还是请使用v0.3.2。

The “ngconstant” task (ngconstant任务)

Overview (概览)

The following shows a simple configuration for generating a config module with one constant and one value that contain your package information and debug config.

下面显示了一个简单的配置生成一个配置模块包含一个常数和一个包含您的软件包信息和调试配置的值
grunt.initConfig({
  ngconstant: {
    options: {
      name: 'config',
      dest: 'config.js',
      constants: {
        package: grunt.file.readJSON('package.json')
      },
      values: {
        debug: true
      }
    },
    build: {
    }
  },
})

For the target build the resulting file config.js looks like this:

执行build的得到的结果文件像这样:
angular.module('config', [])

.constant('package', {
  "version": "0.0.1",
  ...
})

.value("debug", true)

;

Options

options.name

Type: String Required The name of the constant module used in your angular project.

这个在常量名称将在angular项目中使用

options.dest

Type: String Required The path where the generated constant module should be saved.

常量模块保存的路径

options.space

Type: String Default value: '\t' Optional A string that defines how the JSON.stringify method will prettify your code. You can get more information in the MDN Documentation.

一个字符串用来定义`JSON.stringify` 方法如何来排版您的代码。
A string that defines how the `JSON.stringify` method will prettify your code

options.deps

Type: Array or Boolean Default value: [] Optional

An array that specifies the default dependencies a module should have. When your module should not have any modules, so you can append the constants to an already existing one, you can set deps to false.

一个模块默认依赖文件列表, 当您的模块没有依赖其他模块, 你可以设置deps:false

options.wrap

Type: String or Boolean Default value: false Optional

A boolean to active or deactive the automatic wrapping. A string who will wrap the result of file, use the <%= __ngModule %> variable to indicate where to put the generated module content. See the “Custom Wrap Option” section for further informations.

值类型为Boolean时,激活或者关闭自动包装。值类型为String时, 将包装的结果文件,使用< % = __ngModule % >的变量来表示生成的模块内容。请参见“自定义包装选择”部分得到更多信息。

options.constants

Type: Object, String, Function Default value: {} Optional

If it is an object it gets automatically merged in all target constants definitions. This option should be used when you need a global constants definition for all your targets.

如果它是一个对象自动合并所有目标“常量”定义。当你需要一个全球“常量”定义为所有你的目标, 你才需要使用该参数。

options.values

Type: Object, String, Function Default value: {} Optional

If it is an object it gets automatically merged in all target values definitions. This option should be used when you need a global values definition for all your targets.

如果它是一个对象自动合并所有目标“值”定义。当你需要一个全球“值”定义为所有你的目标, 你才需要使用该参数。

options.template

Type: String Default value: grunt.file.read('constant.tpl.ejs') Optional

Custom template for creating the output constants file. Defaults to the default constants template file if none provided.

自定义模板用于创建输出常量文件。如果没有提供默认常量使用默认模板文件。

options.delimiters

Type: String Default value: ngconstant which sets the delimiters to {% and %}. Make sure that you do not use the same delimiters as your grunt configuration or get unwanted behaviour. Optional

默认值:“ngconstant”将分隔符设置为“{ %和% }”。确保你不要使用分隔符一样grunt配置或不必要的行为。

Usage Examples (范例)

Default Options

In this example I convert the package.json information in an angular module. So I am able to display e.g. the current version of the application in the app.

在这个例子中,我把 package.json信息放在一个angular模块里。所以我能够在应用中显示如应用程序的版本号。
grunt.initConfig({
  ngconstant: {
    dist: {
      options: {
        dest: 'dist/constants.js',
        name: 'constants',
      },
      constants: {
        package: grunt.file.readJSON('package.json')
      },
      values: {
        debug: true
      }
    }
  },
})

Note: In generell for all following examples the applied functionality on constants can also be used in for the values parameter.

提示: 通常以下所有示例应用功能的“constants”也可以用于"value"。

Custom Options (自定义参数)

In this example we set custom configurations for the space and deps parameter. So we create a module that has dep1 and dep2 as dependency and defines two different constants constants1 and constants2 with custom values. The space parameter is set to a .

在这个例子中,我们设置自定义配置“space”和“deps”参数。所以我们创建一个依赖和定义了两种不同的常数“constants1”和“constants2”自定义值的模块“dep1”和“dep2”。“space”的参数设置为 空。
grunt.initConfig({
  ngconstant: {
    options: {
      space: ' ',
      deps: ['dep1', 'dep2'],
      dest: 'dist/module.js',
      name: 'someModule'
    },
    dist: {
      constants: {
        'constant1': 'constant1.json', // Load json from path
        'constant2': {
          'key1': 'value1',
          'key2': 42
        },
        'constant3': function () { // Exec function first on task run
          return 'some lazy return value'
        }
      }
    }
  },
})

The resulting module looks like the following:

结果的输出模块像以下这样
angular.module("someModule", ["dep1", "dep2"])

.constant("constant1", "some value you want to set as constant value.
  This can be of any type that can be transformed via JSON.stringify")

.constant("constant2", {
  "key1": "value1",
  "key2": 42
})

;

Wrap Option

The wrap option allows you to encapsulate the module in a closure. Simply set wrap to true.

“wrap”选项允许你在一个闭包来封装模块。简单的“wrap”设置为“true”。
grunt.initConfig({
  ngconstant: {
    options: {
      dest: 'tmp/wrap_options.js',
      name: 'module2',
      wrap: true
    },
    dist: {
      constants: {
        'constant1': {
          key1: 123,
          key2: 'value2',
          foobar: false
        }
      }
      
    },
    nowrap: { 
      options: {
        wrap: false // Disable wrapping for the 'nowrap' target
      },
      constants: {
        ...
      }
    }
  },
})

The resulting module looks like:

(function(angular, undefined) {
   angular.module("module2", ["test"])

.constant("constant1", {
  "key1": 123,
  "key2": "value2",
  "foobar": false
})

; 
})(angular);

Custom Wrap Option

If you want to use another wrapping you can use a string as wrap option, which is interpolated by the plugin. Use the __ngModule variable as placeholder for the generated module.

如果你想被包裹, 可以使用字符串作为“wrap”选项,  使用“__ngModule”变量的占位符生成模块。

Here a RequireJS example:

grunt.initConfig({
  ngconstant: {
    options: {
      dest: 'tmp/wrap_options.js',
      name: 'module2',
      wrap: 'define(["angular", "ngResource", "ngCookies"], function() { \n return {%= __ngModule %} \n\n});',
    },
    dist: {
      constants: {
        'constant1': {
          key1: 123,
          key2: 'value2',
          foobar: false
        }
      }
    }
  },
})

The resulting module looks like the following:

define(["angular", "ngResource", "ngCookies"], function() { 
 return angular.module("module2", ["test"])

.constant("constant1", {
  "key1": 123,
  "key2": "value2",
  "foobar": false
})

; 

});

Note: For longer wrapping templates it is recommended to use grunt.file.read('customer-wrap.tpl.ejs').

更多的包裹方式,尅使用`grunt.file.read('customer-wrap.tpl.ejs')`

Global Constants option

If you need the same configuration for all your targets you can use the constants option to automatically merge your per target configuration with the global one. If you want don’t want to merge, you can use the per target constants option to override everything.

如果你需要相同的配置为所有你的目标你可以使用“constants”选项自动合并您的`每个`目标配置与全球。如果你想不想合并,您可以使用每个目标“constants”选项覆盖一切。
grunt.initConfig({
  ngconstant: {
    options: {
      name: 'config',
      dest: 'config.js',
      constants: {
        title: 'grunt-ng-constant',
        debug: true
      }
    },
    dev: {
      constants: {
        title: 'grunt-ng-constant-beta'
      }
    },
    prod: {
      constants: {
        debug: false
      }
    },
    override_global: {
      options: {
        constants: { // This does not merge it overrides
          ...
        }
      }
    }
  }
});

Which results in the following constants objects.

For the target dev:

angular.module('config', [])

.constant('title', 'grunt-ng-constant-beta')

.constant('debug', true)

;

For the target prod:

angular.module('config', [])

.constant('title', 'grunt-ng-constant')

.constant('debug', false)

;

FAQ

How can I change the quote style? 我怎样能改变单引号或双引号样式

You can create your own template that escapes all ", but this is not a generell solution. Currently there is no easy way to change this. If you know a converter that can print out pure javascript instead of JSON, please tell me.

您可以创建自己的模板,转义所有的`”`,但这不是一个通用的解决方案。目前没有简单的方法来改变这种状况。如果你知道一个转换器,可以打印出纯javascript JSON,请告诉我。

How can I create multiple modules? 我怎样能创建多某快

Create for each module an own target and set the dest, name and constants parameter for each one.

为每个模块创建一个自己的目标,设置“dest”、“name”和“constants”为每一个参数。

How can I create a CoffeeScript version of the module 我怎样能创建 CoffeeScript版本的模块

Till v0.5.0 this was supported natively by the plugin. Now you have to use the grunt-js2coffee plugin.

Hey I like this project how can I help?

Report bugs, propose new features or simply star the project that shows me that are people are interessted in this project.

回到顶部