问题：
当一个工程里面有好几个项目，每个项目引用同一个包，但是不同的名字，例如在bower中 fancybox 跟 jquery.fancybox 是一样的，我们只需要下载其中的一个版本，而打包工作不是同一个人写的，因此要写如注释，但是bower的配置文件里面不许有注释，那怎么办呢？
解决方法：
使用gulp来生成bower.json 文件
首先我们在Gulpfile.js 文件中
"use strict";
let gulp = require('gulp');
let modify = require('gulp-modify');
let rename = require('gulp-rename');
let strip = require('gulp-strip-comments');
let pump = require('pump'); gulp.task('bower', (cb) => {
pump([
gulp.src('./bower.comment.json'), //使用的文件
strip(),
rename('bower.json'), //重命名
gulp.dest('./') //输出的文件
], cb);
});
首先说一下pump的用法，当我们不使用pump的时候，如果中途出错了，那之前执行的会在，但是使用pump之后，如果中途出错了，之前执行的都不会在。
其次是 gulp-strip-comments 的用法
可以参照 npm中的文档 是用于去除文件中的注释
接下来我们在 bower.comment.json 里面配置我们的包 可以写上注释
{
"name": "main",
"version": "1.0.0",
"homepage": "",
"private": true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"public/bower_components",
"test",
"tests"
],
"dependencies": {
// "bootstrap-markdown":"~2.0.0",
"components-font-awesome": "4.6.0",
"jquery.atwho": "1.5.1",
"font-awesome": "4.6.3",
"highlight": "9.5.0",
"pickadate": "3.5.6",
"echarts": "3.2.1",
"jquery": "2.2.4",
"jquery-ui": "1.12.0",
"angular-route":"1.4.6",
"clipboard":"1.5.2",
"d3":"3.5.5",
"fullcalendar":"2.9.0",
"markdown":"0.5.0",
"datepicker":"",
// "bootstrap-datetimepicker":"~0.0.11",
/*jquery plugins ---------begin*/
"datetimepicker": "2.5.4", //jquery.datetimepicker.js
"fancybox": "2.1.5", //jquery.fancybox.js
"jquery-form": "3.46.0", //jquery.form.js
"jquery.hotkeys": "", //jquery.hotkeys.js
"jquery-mousewheel": "3.1.13", //jquery.mousewheel.js
"raty": "2.7.0", //jquery.raty.js
"tooltipster": "4.0.4", //jquery.tooltipster
"jquery-typeahead": "2.6.1", //jquery.typeahead
/*jquery plugins ---------end*/
"dropzone": "4.3.0",
"simditor": "2.3.6",
"slick-carousel": "1.6.0",
"ionicons": "2.0.1",
"vivus": "0.3.1",
"vue": "1.0.26",
"underscore":"1.7.0",
"jquery-extends":"0.1.9",
"jquery.validate":"1.13.0",
"jquery.scrollTo":"1.4.13",
// "file-upload":"1.7.5",
"d3pie":"0.1.3",
"bootstrap-datepicker":"1.6.1",
"bootstrap-datetimepicker":"0.0.11"
},
"resolutions": {
"jquery": "2.2.4",
"angular":"1.4.6",
"bootstrap": "3.3.6"
}
}
接下来输入
gulp bower
就可以看到目录下生成一个bower.json 了、里面就是没有注释的bower配置文件
打开
{
"name": "main",
"version": "1.0.0",
"homepage": "",
"private": true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"public/bower_components",
"test",
"tests"
],
"dependencies": {
"components-font-awesome": "4.6.0",
"jquery.atwho": "1.5.1",
"font-awesome": "4.6.3",
"highlight": "9.5.0",
"pickadate": "3.5.6",
"echarts": "3.2.1",
"jquery": "2.2.4",
"jquery-ui": "1.12.0",
"angular-route":"1.4.6",
"clipboard":"1.5.2",
"d3":"3.5.5",
"fullcalendar":"2.9.0",
"markdown":"0.5.0",
"datepicker":"",
"datetimepicker": "2.5.4",
"fancybox": "2.1.5",
"jquery-form": "3.46.0",
"jquery.hotkeys": "",
"jquery-mousewheel": "3.1.13",
"raty": "2.7.0",
"tooltipster": "4.0.4",
"jquery-typeahead": "2.6.1",
"dropzone": "4.3.0",
"simditor": "2.3.6",
"slick-carousel": "1.6.0",
"ionicons": "2.0.1",
"vivus": "0.3.1",
"vue": "1.0.26",
"underscore":"1.7.0",
"jquery-extends":"0.1.9",
"jquery.validate":"1.13.0",
"jquery.scrollTo":"1.4.13",
"d3pie":"0.1.3",
"bootstrap-datepicker":"1.6.1",
"bootstrap-datetimepicker":"0.0.11"
},
"resolutions": {
"jquery": "2.2.4",
"angular":"1.4.6",
"bootstrap": "3.3.6"
}
}
我们开发的时候就在bower.comment.json里面写我们的包引入 这样做的好处就是：开发的时候我们可能由不同的人来开发，提高代码的可阅性