Gulp和Bower文件：获取用于开发和生产的js文件

我试图阅读教程和浏览其他问题，但找不到一个很好的答案来说明如何设置gulp，以便从（已安装的）bower组件中获取javascript文件以用于开发和生产

首先，我尝试了一种简单的方法。促进发展：

gulp.task('vendorScriptsDevelopment', function() {
  return gulp.src(['bower_components/jquery/dist/jquery.js',
                   'bower_components/**/*.js',
                  '!bower_components/**/*.min.js'])
    .pipe(filter('*.js'))
    .pipe(concat('vendor-scripts.js'))
    .pipe(gulp.dest('dev'))
});

与生产类似：

gulp.task('vendorScriptsProduction', function() {
  return gulp.src(['bower_components/jquery/dist/jquery.min.js',
                   'bower_components/**/*.min.js'])
    .pipe(filter('*.js'))
    .pipe(concat('vendor-scripts.js'))
    .pipe(gulp.dest('prod'))
});

我首先特别包括jquery，因为其他插件通常依赖它

但后来我意识到一些bower软件包包含了很多文件，还有我不想要的各种javascript文件（我只想要“那个”通常也有CDN选项（有两个版本，普通js和最小化版本）

我读过的一篇文章将插件用于开发部分，但后来它走错了方向，想自己制作一个小型版本（据我所知，最好使用包含小型版本的软件包，因为这是由插件开发人员优化的）

---

我如何设置我的两个“吞咽”任务，使它们按预期工作？还是我被迫手动包含所有文件（就像我在示例中手动包含jquery）？

好的，既然没有人回答，下面是我尝试回答自己的问题

我创建了一个函数，该函数生成我想要的文件名数组。这将使用并过滤掉.js文件。如果这是发展，那就是发展。如果是生产版，那么我只需将文件扩展名从.js更改为.min.js（如果是安全检查的话）

我应该改变我的函数来处理其他资产，比如css

---

如果有人有更好的方法，我会非常高兴的建议

以下是我解决您问题的方法：

在sources文件夹中创建一个vendors.json文件。编辑文件并创建要包含在生产文件夹中的相关文件的路径。例如：

{
    "js" : [
        "lib/jquery/dist/jquery.js",
        "lib/lodash/lodash.js",
        "lib/angular/angular.js",
        "lib/angular-sanitize/angular-sanitize.js",
        "lib/angular-ui-router/release/angular-ui-router.js",
        "lib/angular-ui-utils/ui-utils.js",
        "lib/angular-bootstrap/ui-bootstrap-tpls.js",
        "lib/chartjs/Chart.js",
        "lib/pnotify/pnotify.core.js",
        "lib/pnotify/pnotify.buttons.js",
        "lib/angular-pnotify/src/angular-pnotify.js",
        "lib/angular-prompt/dist/angular-prompt.js",
        "lib/angular-mocks/angular-mocks.js"
    ],

    "css" : [
        "lib/bootstrap/dist/css/bootstrap.css",
        "lib/bootstrap-rtl/dist/css/bootstrap-rtl.css",
        "lib/bootstrap/dist/css/bootstrap-theme.css",
        "lib/font-awesome/css/font-awesome.css",
        "lib/pnotify/pnotify.core.css",
        "lib/pnotify/pnotify.buttons.css"
    ],
    "statics" : [
        "lib/font-awesome/fonts/*"
    ]
}

然后在gulpFile.js中添加以下内容：

var sources = {
    get 'vendor.js'(){
        return getVendorSources().js;
    },
    get 'vendor.css'(){
        return getVendorSources().css;
    },
    get 'vendor.statics'(){
        return getVendorSources().statics;
    }
};

function getVendorSources(){
    return JSON.parse(fs.readFileSync('yourSourcesFolder/vendor.json', 'utf-8'));
}

gulp.task('vendor.css', function() {
    return gulp.src(sources['vendor.css'])
        .pipe(changed(paths.dist))
        .pipe(gulp.dest(paths.dist));
});

等等，用于js和静态文件任务

var sources = {
    get 'vendor.js'(){
        return getVendorSources().js;
    },
    get 'vendor.css'(){
        return getVendorSources().css;
    },
    get 'vendor.statics'(){
        return getVendorSources().statics;
    }
};

function getVendorSources(){
    return JSON.parse(fs.readFileSync('yourSourcesFolder/vendor.json', 'utf-8'));
}

gulp.task('vendor.css', function() {
    return gulp.src(sources['vendor.css'])
        .pipe(changed(paths.dist))
        .pipe(gulp.dest(paths.dist));
});