问题：
当一个工程里面有好几个项目，每个项目引用同一个包，但是不同的名字，例如在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里面写我们的包引入 这样做的好处就是：开发的时候我们可能由不同的人来开发，提高代码的可阅性