前端資源多個產品整站一鍵打包&包版本管理（二）——如何在bower的配置文件加上註釋

問題：

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