前端资源多个产品整站一键打包&包版本管理（二）如何在bower的配置文件加上注释-安度博客

问题：

当一个工程内里有好几个项目，每个项目引用同一个包，可是差异的名字，例如在bower中 fancybox 跟 jquery.fancybox 是一样的，我们只需要下载其中的一个版本，而打包事情不是同一小我私家写的，因此要写如注释，可是bower的配置文件内里不许有注释，那怎么办呢？

解决要领：

使用gulp来生成bower.json 文件

首先我们在Gulpfile.js 文件中

&＃39;use strict&＃39;;let gulp = require(&＃39;gulp&＃39;);let modify = require(&＃39;gulp-modify&＃39;);let rename = require(&＃39;gulp-rename&＃39;);let strip = require(&＃39;gulp-strip-comments&＃39;);let pump = require(&＃39;pump&＃39;);gulp.task(&＃39;bower&＃39; (cb) => { pump([ gulp.src(&＃39;./bower.comment.json&＃39;) //使用的文件 strip() rename(&＃39;bower.json&＃39;) //重命名 gulp.dest(&＃39;./&＃39;) //输出的文件 ] cb);});

首先说一下pump的用法，当我们不使用pump的时候，如果中途堕落了，那之前执行的会在，可是使用pump之后，如果中途堕落了，之前执行的都不会在。

其次是 gulp-strip-comments 的用法

可以参照 npm中的文档 是用于去除文件中的注释

接下来我们在 bower.comment.json 内里配置我们的包 可以写上注释

{ &＃39;name&＃39;: &＃39;main&＃39; &＃39;version&＃39;: &＃39;1.0.0&＃39; &＃39;homepage&＃39;: &＃39;&＃39; &＃39;private&＃39;: true &＃39;ignore&＃39;: [ &＃39;**/.*&＃39; &＃39;node_modules&＃39; &＃39;bower_components&＃39; &＃39;public/bower_components&＃39; &＃39;test&＃39; &＃39;tests&＃39; ] &＃39;dependencies&＃39;: { // &＃39;bootstrap-markdown&＃39;:&＃39;~2.0.0&＃39; &＃39;components-font-awesome&＃39;: &＃39;4.6.0&＃39; &＃39;jquery.atwho&＃39;: &＃39;1.5.1&＃39; &＃39;font-awesome&＃39;: &＃39;4.6.3&＃39; &＃39;highlight&＃39;: &＃39;9.5.0&＃39; &＃39;pickadate&＃39;: &＃39;3.5.6&＃39; &＃39;echarts&＃39;: &＃39;3.2.1&＃39; &＃39;jquery&＃39;: &＃39;2.2.4&＃39; &＃39;jquery-ui&＃39;: &＃39;1.12.0&＃39; &＃39;angular-route&＃39;:&＃39;1.4.6&＃39; &＃39;clipboard&＃39;:&＃39;1.5.2&＃39; &＃39;d3&＃39;:&＃39;3.5.5&＃39; &＃39;fullcalendar&＃39;:&＃39;2.9.0&＃39; &＃39;markdown&＃39;:&＃39;0.5.0&＃39; &＃39;datepicker&＃39;:&＃39;&＃39; // &＃39;bootstrap-datetimepicker&＃39;:&＃39;~0.0.11&＃39; /*jquery plugins ---------begin*/ &＃39;datetimepicker&＃39;: &＃39;2.5.4&＃39; //jquery.datetimepicker.js &＃39;fancybox&＃39;: &＃39;2.1.5&＃39; //jquery.fancybox.js &＃39;jquery-form&＃39;: &＃39;3.46.0&＃39; //jquery.form.js &＃39;jquery.hotkeys&＃39;: &＃39;&＃39; //jquery.hotkeys.js &＃39;jquery-mousewheel&＃39;: &＃39;3.1.13&＃39; //jquery.mousewheel.js &＃39;raty&＃39;: &＃39;2.7.0&＃39; //jquery.raty.js &＃39;tooltipster&＃39;: &＃39;4.0.4&＃39; //jquery.tooltipster &＃39;jquery-typeahead&＃39;: &＃39;2.6.1&＃39; //jquery.typeahead /*jquery plugins ---------end*/ &＃39;dropzone&＃39;: &＃39;4.3.0&＃39; &＃39;simditor&＃39;: &＃39;2.3.6&＃39; &＃39;slick-carousel&＃39;: &＃39;1.6.0&＃39; &＃39;ionicons&＃39;: &＃39;2.0.1&＃39; &＃39;vivus&＃39;: &＃39;0.3.1&＃39; &＃39;vue&＃39;: &＃39;1.0.26&＃39; &＃39;underscore&＃39;:&＃39;1.7.0&＃39; &＃39;jquery-extends&＃39;:&＃39;0.1.9&＃39; &＃39;jquery.validate&＃39;:&＃39;1.13.0&＃39; &＃39;jquery.scrollTo&＃39;:&＃39;1.4.13&＃39;// &＃39;file-upload&＃39;:&＃39;1.7.5&＃39; &＃39;d3pie&＃39;:&＃39;0.1.3&＃39; &＃39;bootstrap-datepicker&＃39;:&＃39;1.6.1&＃39; &＃39;bootstrap-datetimepicker&＃39;:&＃39;0.0.11&＃39; } &＃39;resolutions&＃39;: { &＃39;jquery&＃39;: &＃39;2.2.4&＃39; &＃39;angular&＃39;:&＃39;1.4.6&＃39; &＃39;bootstrap&＃39;: &＃39;3.3.6&＃39; }}

接下来输入

gulp bower

就可以看到目录下生成一个bower.json 了、内里就是没有注释的bower配置文件

打开

{ &＃39;name&＃39;: &＃39;main&＃39; &＃39;version&＃39;: &＃39;1.0.0&＃39; &＃39;homepage&＃39;: &＃39;&＃39; &＃39;private&＃39;: true &＃39;ignore&＃39;: [ &＃39;**/.*&＃39; &＃39;node_modules&＃39; &＃39;bower_components&＃39; &＃39;public/bower_components&＃39; &＃39;test&＃39; &＃39;tests&＃39; ] &＃39;dependencies&＃39;: { &＃39;components-font-awesome&＃39;: &＃39;4.6.0&＃39; &＃39;jquery.atwho&＃39;: &＃39;1.5.1&＃39; &＃39;font-awesome&＃39;: &＃39;4.6.3&＃39; &＃39;highlight&＃39;: &＃39;9.5.0&＃39; &＃39;pickadate&＃39;: &＃39;3.5.6&＃39; &＃39;echarts&＃39;: &＃39;3.2.1&＃39; &＃39;jquery&＃39;: &＃39;2.2.4&＃39; &＃39;jquery-ui&＃39;: &＃39;1.12.0&＃39; &＃39;angular-route&＃39;:&＃39;1.4.6&＃39; &＃39;clipboard&＃39;:&＃39;1.5.2&＃39; &＃39;d3&＃39;:&＃39;3.5.5&＃39; &＃39;fullcalendar&＃39;:&＃39;2.9.0&＃39; &＃39;markdown&＃39;:&＃39;0.5.0&＃39; &＃39;datepicker&＃39;:&＃39;&＃39; &＃39;datetimepicker&＃39;: &＃39;2.5.4&＃39; &＃39;fancybox&＃39;: &＃39;2.1.5&＃39; &＃39;jquery-form&＃39;: &＃39;3.46.0&＃39; &＃39;jquery.hotkeys&＃39;: &＃39;&＃39; &＃39;jquery-mousewheel&＃39;: &＃39;3.1.13&＃39; &＃39;raty&＃39;: &＃39;2.7.0&＃39; &＃39;tooltipster&＃39;: &＃39;4.0.4&＃39; &＃39;jquery-typeahead&＃39;: &＃39;2.6.1&＃39; &＃39;dropzone&＃39;: &＃39;4.3.0&＃39; &＃39;simditor&＃39;: &＃39;2.3.6&＃39; &＃39;slick-carousel&＃39;: &＃39;1.6.0&＃39; &＃39;ionicons&＃39;: &＃39;2.0.1&＃39; &＃39;vivus&＃39;: &＃39;0.3.1&＃39; &＃39;vue&＃39;: &＃39;1.0.26&＃39; &＃39;underscore&＃39;:&＃39;1.7.0&＃39; &＃39;jquery-extends&＃39;:&＃39;0.1.9&＃39; &＃39;jquery.validate&＃39;:&＃39;1.13.0&＃39; &＃39;jquery.scrollTo&＃39;:&＃39;1.4.13&＃39; &＃39;d3pie&＃39;:&＃39;0.1.3&＃39; &＃39;bootstrap-datepicker&＃39;:&＃39;1.6.1&＃39; &＃39;bootstrap-datetimepicker&＃39;:&＃39;0.0.11&＃39; } &＃39;resolutions&＃39;: { &＃39;jquery&＃39;: &＃39;2.2.4&＃39; &＃39;angular&＃39;:&＃39;1.4.6&＃39; &＃39;bootstrap&＃39;: &＃39;3.3.6&＃39; }}

我们开发的时候就在bower.comment.json内里写我们的包引入 这样做的利益就是：开发的时候我们可能由差异的人来开发，提高代码的可阅性