問題：
當一個工程里面有好幾個項目，每個項目引用同一個包，但是不同的名字，例如在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里面寫我們的包引入 這樣做的好處就是：開發的時候我們可能由不同的人來開發，提高代碼的可閱性