前端资源多个产品整站一键打包&包版本管理（二）——如何在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里面写我们的包引入 这样做的好处就是：开发的时候我们可能由不同的人来开发，提高代码的可阅性