• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > main-bower-files <gulp插件>

main-bower-files <gulp插件>

作者:liuyuqin1991的专栏 字体:[增加 减小] 来源:互联网 时间:2017-11-21

本文主要包含gulp,插件等相关知识,liuyuqin1991的专栏希望在学习及工作中可以帮助到您

通过读取并分析bower.json文件里override属性里main路径下定义的插件及相关依赖,返回一个文件数组。

Github

https://github.com/ck86/main-bower-files

安装

$ npm install –save-dev main-bower-files

使用

1. 直接使用

var gulp = require('gulp');
var mainBowerFiles = require('main-bower-files');

gulp.task('TASKNAME', function() {
    return gulp.src(mainBowerFiles())
        .pipe(/* what you want to do with the files */)
});

2.也可以增加配置:

var gulp = require('gulp');
var mainBowerFiles = require('main-bower-files');

gulp.task('TASKNAME', function() {
    return gulp.src(mainBowerFiles(/* options */), { base: 'path/to/bower_components' })
        .pipe(/* what you want to do with the files */)
});

配置项

1.override option
这块配置是配置到bower.json文件里的

1.1 main Type: String or Array or Object
这个配置能够指定想要选择的文件,特别是根据环境来选择想要的bower文件,例如根据process.env.NODE_ENV,当env=development时选择file.js,当env=production时选择file.min.js

{
    "overrides": {
        "BOWER-PACKAGE": {
            "main": {
                "development": "file.js",
                "production": "file.min.js"
            }
        }
    }
}

或者使用glob匹配规则来筛选想要的文件

{
    "overrides": {
        "BOWER-PACKAGE": {
            "main": "**/*.js"
        }
    }
}

1.2 ignore Type: Boolean Default: false
这是个布尔类型,选择true或false来选择是否忽略该包

{
    "overrides": {
        "BOWER-PACKAGE": {
            "ignore": true
        }
    }
}

1.3 dependencies Type: Object
可以重载需要的依赖,也可以set null来忽略依赖

2.common option
这些配置是配置到main-bower-files的配置中,像这样:mainBowerFiles(/* options*/) ,这些配置一般用的比较少

  • debugging
  • main
  • env
  • paths
  • checkExistence
  • includeDev
  • includeSelf
  • filter
  • overrides

具体意思参见github解释:

debugging Type: boolean Default: false
Set to true to enable debugging output.

main Type: String or Array or Object Default: null
You can specify for all packages a default main property which will be used if the package does not provide a main property.

env Type: String Default: process.env.NODE_ENV
If process.env.NODE_ENV is not set you can use this option.

paths Type: Object or String
You can specify the paths where the following bower specific files are located:
bower_components, .bowerrc and bower.json,For example:

mainBowerFiles({
    paths: {
        bowerDirectory: 'path/for/bower_components',
        bowerrc: 'path/for/.bowerrc',
        bowerJson: 'path/for/bower.json'
    }
})
.pipe(gulp.dest('client/src/lib'));

If a String is supplied instead, it will become the basepath for default paths.
For example:

mainBowerFiles({ paths: 'path/for/project' });
/*
 {
 bowerDirectory: 'path/for/project/bower_components',
 bowerrc: 'path/for/project/.bowerrc',
 bowerJson: 'path/for/project/bower.json'
 }
*/

checkExistence Type: boolean Default: false
Set this to true if you want that the plugin checks every file for existence.If enabled and a file does not exists, the plugin will throw an exception.

includeDev Type: mixed Default: false
You can include your devDependencies in two ways:
Set this option to inclusive or true to add the devDependencies to your dependencies
or use exclusive to exclude your dependencies

includeSelf Type: boolean Default: false
Set this to true to add the main files to your dependencies

filter Type: RegExp or function or glob Default: null
You can filter the list of files by a regular expression, glob or callback function (the first and only argument is the file path).

overrides Type: object Default: {}
Set default overrides option which can be overridden in the overrides section of the bower.json

group Type: String or Array Default: null
You can specify a group of dependencies you want to read from bower.json
For example:

{
    "dependencies": {
        "BOWER-PACKAGE-1": "*",
        "BOWER-PACKAGE-2": "*",
        "BOWER-PACKAGE-3": "*",
        "BOWER-PACKAGE-4": "*"
    },
    "group": {
        "home": [ "BOWER-PACKAGE-1" ],
        "contact": [ "BOWER-PACKAGE-4" ],
        "admin": [ "BOWER-PACKAGE-1", "BOWER-PACKAGE-2", "BOWER-PACKAGE-3" ]
    }
}
mainBowerFiles({ paths: 'path/for/project', group: 'home' });

You can select multiple groups with an array.

mainBowerFiles({ paths: 'path/for/project', group: ['home', 'contact'] });

You can include all packages except for those listed in a group with the ! operator.

mainBowerFiles({ paths: 'path/for/project', group: '!home' });

您可能想查找下面的文章:

  • main-bower-files <gulp插件>

相关文章

  • 2018-08-23人工智能对设计有哪些影响?来看这篇超全面的总结!
  • 2018-08-23腾讯设计师:为什么资讯App 都长一个样?
  • 2018-08-23Google I/O即将到来,对于Material Design 2.0我做了这些预测
  • 2018-08-23实战经验!如何制订能有效提高自己的工作目标?
  • 2018-08-23口碑炸裂的《一出好戏》,电影海报也超棒!
  • 2018-08-23交互设计师为什么需要具备产品思维?
  • 2018-08-23这个APP的UX设计,把订购汉堡玩出花来了
  • 2018-08-23设计师没原创灵感?试试这个方法!
  • 2018-08-23涨姿势!全球顶尖的设计团队都有哪些设计原则?
  • 2018-08-23阿里设计师:我如何用服务设计的思维来做Airbnb?

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 超全面!底部动作栏设计总结
    • 如何设计更高效的筛选器?来看网易设计师的总结!
    • 从image/x-png谈ContentType(s)
    • 进阶经验!如何系统的进行改版设计(上)
    • 深度长文!为什么很多炫酷的产品没能流行起来?
    • 高手的平面课堂!7个方法帮你从摄影照片中吸取设计灵感(附实战)
    • 快速上手!10分钟学会这招超好用的「九宫格」配色技巧
    • 总监有话说!2017年大热的对话式交互会成为未来吗?
    • 一秒做出8000张海报设计的「鲁班智能设计平台」是怎么工作的?
    • 这四个设计师最容易犯的错,赶紧注意一下!

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有