• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

guzart/gulp-ng-constant: Gulp plugin for dynamic generation of angular constant ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

guzart/gulp-ng-constant

开源软件地址(OpenSource Url):

https://github.com/guzart/gulp-ng-constant

开源编程语言(OpenSource Language):

JavaScript 92.5%

开源软件介绍(OpenSource Introduction):

gulp-ng-constant

License NPM version NPM version
Build Status Code Climate Dependency Status

Information

Packagegulp-ng-constant
Description Plugin for dynamic generation of angular constant modules.
Based of grunt-ng-constant
Node Version >= 0.10

Index

  1. Usage
  1. Options
  1. Examples
  1. Special Thanks

Usage

Configuration in gulpfile.js

gulpfile.js

var ngConstant = require('gulp-ng-constant');

gulp.task('config', function () {
  gulp.src('app/config.json')
    .pipe(ngConstant({
      name: 'my.module.config',
      deps: ['ngAnimate'],
      constants: { myPropCnt: 'hola!' },
      wrap: 'amd',
    }))
    // Writes config.js to dist/ folder
    .pipe(gulp.dest('dist'));
});

app/config.json

{
  "myFirstCnt": true,
  "mySecondCnt": { "hello": "world" }
}

dist/config.js (output)

define(["require", "exports"], function(require, exports) {
  return angular.module("my.module.config", ["ngAnimate"])
    .constant("myFirstCnt", true)
    .constant("mySecondCnt", { "hello": "world" })
    .constant("myPropCnt", "hola!");
});

Configuration in config.json

gulpfile.js

var ngConstant = require('gulp-ng-constant');

gulp.task('config', function () {
  gulp.src('app/config.json')
    .pipe(ngConstant())
    // Writes config.js to dist/ folder
    .pipe(gulp.dest('dist'));
});

app/config.json

{
  "name": "my.module.config",
  "deps": ["ngAnimate"],
  "wrap": "commonjs",
  "constants": {
    "myFirstCnt": true,
    "mySecondCnt": { "hello": "world" }
  }
}

dist/config.js (output)

module.exports = angular.module("my.module.config", ["ngAnimate"])
    .constant("myFirstCnt", true)
    .constant("mySecondCnt", { "hello": "world" })
    .constant("myPropCnt", "hola!");

Options

options.name

Type: string
Default: filename or "ngConstants"
Overrides: json.name
optional

The module name. This property will override any name property defined in the input json file. The default name when used as a transform stream (i.e. regular plugin) is the passed file name. When options.stream is true the default name is "ngConstants".

options.stream

Type: boolean
Default: false
optional

If true it returns a new gulp stream, which can then be piped other gulp plugins (Example).

options.constants

Type: Object | string
Default: undefined
Extends/Overrides: json.constants

Constants to defined in the module. Can be a JSON string or an Object. This property extends the one defined in the input json file. If there are properties with the same name, this properties will override the ones from the input json file.

options.merge

Type: boolean
Default: false
optional

This applies to constants of the Object type. If true the constants of type Object from the input file and the constants from the configuration will be merged.

options.deps

Type: array<string>|boolean
Default: []
Overrides: json.deps
optional

An array that specifies the default dependencies a module should have. To add the constants to an existing module, you can set it to false. This property will override any deps property defined in the input json file.

options.wrap

Type: boolean|string
Default: 'es6'
Available: [false, 'amd', 'commonjs', 'es6']
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. A string with 'amd' that wraps the module as an AMD module, compatible with RequireJS

options.wrapHeader

Type: string
Default: null
optional

A string that is prepended to the wrapper.

options.wrapFooter

Type: string
Default: null
optional

A string that is appended to the wrapper.

options.space

Type: string
Default: null
optional

A string that defines how the JSON.stringify method will prettify your code, e.g. '\t', ' '

options.template

Type: string
Default: content of tpls/constant.tpl.ejs
optional

EJS template to apply when creating the output configuration file. The following variables are passed to the template during render:

  • moduleName: the module name (string)
  • deps: the module dependencies (array<string>)
  • constants: the module constants (array<contantObj>)
    • where a constantObj is an object with a name and a value, both strings.

options.templatePath

Type: string
Default: 'tpls/constant.tpl.ejs'
optional

Location of a custom template file for creating the output configuration file. Defaults to the provided constants template file if none provided.

options.indent

Type: string
Default: '' (empty string)
optional

A string that is used to indent the .constant() lines in the generated file. Useful only for formatting the output file.

Examples

Multiple Environments

config.json

{
  "development": { "greeting": "Sup!" },
  "production": { "greeting": "Hello" }
}

gulpfile.js

var gulp = require('gulp');
var ngConstant = require('gulp-ng-constant');

gulp.task('constants', function () {
  var myConfig = require('./config.json');
  var envConfig = myConfig[process.env];
  return ngConstant({
      constants: envConfig,
      stream: true
    })
    .pipe(gulp.dest('dist'));
});

Stream

var gulp = require('gulp');
var ngConstant = require('gulp-ng-constant');
var uglify = require('gulp-uglify');

gulp.task('constants', function () {
  var constants = { hello: 'world' };
  return ngConstant({
      constants: constants,
      stream: true
    })
    .pipe(uglify())  
    .pipe(gulp.dest('dist'));
});

YAML

Just write your configuration in a YAML file and pipe it to the plugin.

config.yml

greeting: Merry Christmas!
seasons:
  - Winter
  - Spring
  - Summer
  - Fall

gulpfile.js

var gulp = require('gulp');
var ngConstant = require('gulp-ng-constant');

gulp.task('constants', function () {
  gulp.src('app/config.yml')
    .pipe(ngConstant())
    .pipe(gulp.dest('dist'));
});

ECMAScript 2015 (ES6)

envs.json

{
  "development": {
    "ENV": {
        "KEY": "secret",
        "API_URL": "http://localhost/"
    }
  },
  "production": {
    "ENV": {
        "KEY": "superSecret",
        "API_URL": "http://example.com/"
    }
  }
}

gulpfile.babel.js

import gulp     from 'gulp';
import rename   from 'gulp-rename';
import ngConstant from 'gulp-ng-constant';

gulp.task('constants', function () {
  var myConfig = require('./envs.json');
  var envConfig = myConfig[process.env];
  return ngConstant({
      name: "app.env",
      constants: envConfig,
      stream: true,
      wrap: "es6"
    })
    .pipe(rename('env.js'))
    .pipe(gulp.dest('dist'));
});

app.js

'use strict';

import angular from 'angular';
import env from 'env';

let app = angular.module('app', [env.name])
    .factory('someRepository', function($http, ENV) {
        //Just to illustrate
        $http.get(ENV.API_URL);
    });


export default app;

Special Thanks

@alexeygolev, @sabudaye, @ojacquemart, @lukehorvat, @rimian, @andidev, @dotDeeka, @LoicMahieu, @vladimirgamalian




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap