Question

我试图阅读教程并浏览其他问题，但找不到如何设置gulp的好答案，以便从（已安装）bower-components获取用于开发和生产的javascript文件。 / p>

首先我尝试了一种简单的方法。对于发展：

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，因为其他插件通常依赖它。

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

我读过的一个tutorial使用main-bower-files插件作为开发部分，但随后它继续朝着错误的方向发展，并希望自己制作一个缩小版本（据我所知，它始终是最好使用包含缩小版本的软件包，因为它是从插件的开发人员优化的。）

如何设置我的两个Gulp任务以使它们按预期工作？或者我被迫手动包含所有文件（就像我在我的例子中手动包含jquery一样）？

Answer 1

好的，既然没有人回复，这是我试图回答我自己的问题。

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

var concat = require('gulp-concat');
var mainBowerFiles = require('main-bower-files');
var fs = require('fs');

var vendorScripts = function (minified) {
    var scripts = mainBowerFiles().filter(function (filename) {
      return filename.match(/.+\.js$/)
    });
    if (minified) {
      scripts = scripts.map(function (orgFilename) {
        var minFilename = orgFilename.replace(/^(.+)\.js$/, '$1.min.js');
        if (fs.existsSync(minFilename)) {
          return minFilename
        }
        return orgFilename;
      });
    }
    return scripts;
};

gulp.task('vendorScriptsDevelopment', function() {
  return gulp.src(vendorScripts())
    .pipe(concat('vendor-scripts.js'))
    .pipe(gulp.dest('dev'))
});

gulp.task('vendorScriptsProduction', function() {
  return gulp.src(vendorScripts(true))
    .pipe(concat('vendor-scripts.js'))
    .pipe(gulp.dest('dist'))
});

我应该改变我的功能来处理其他资产，比如css。

如果某人有更好的方法，我会很高兴提出建议！

Answer 2

以下是我的问题解决方案：

在您的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和静态文件任务。

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

2 个答案: