将wiredep返回的所有文件连接到一个文件中

concatenate all files returned by wiredep into one single file

本文关键字：文件 一个 连接 返回 wiredep      更新时间：2023-09-26

每次我使用bower安装任何依赖项时，都会将所有依赖项包含到我的index.html中，这是完美的！

问题：

它单独返回我的所有文件，导致了许多不必要的HTTP调用。我需要将我所有的bower依赖项连接到一个文件中，这样我最终可以缩小它并应用HTTP压缩。

有什么想法吗？

var options = {
            bowerJson: config.bower.bowerJson,
            directory: config.bower.directory,
            ignorePath: config.bower.ingnorePath
        };
    gulp.task('wiredep', function () {
        'use strict';
        log('Injectin Bower components into the Layout page');
        var options = config.getWiredConfiguration();
        var wiredep = require('wiredep').stream;
        return gulp
        .src(config.layout + 'index.cshtml')
        .pipe(wiredep(options))
        .pipe($.inject(gulp.src('js/layout/layout.js')))
        .pipe(gulp.dest(config.layout));
    });

这是一个很老的问题，但我有一个适用于我的解决方案，应该也适用于其他人。

首先，我们必须了解wiredep是如何工作的。这并不像我以前想的那么明显，因为wiredep默认情况下对您正在注入的文件进行操作。一个典型的实现如下：

var wiredep = require('wiredep').stream;
gulp.task('bower', function () {
    gulp.src('./src/footer.html')
        .pipe(wiredep({
            ignorePath: '../'
        }))
    .pipe(gulp.dest('./dest'));
});

查看require部分，其中stream函数被分配给wiredep变量。从这一刻起，您只使用流函数，该函数实际上不会像您想象的那样返回bower组件流wiredep现在对传递到管道的文件进行操作，在上面的示例中，该文件是footer.html，管道的输出仍然是footer.html，但由wiredep修改。这就是为什么您最终会得到包含索引.cshtml的all.js。它是一个管道链，如下所示：

                    bower_components
                           |
                           V
"src/footer.html" ===> wiredep.stream() ===> gulp.dest() ===> "dest/footer.html"

在这一点上，我们应该问两个问题：如何获得wiredep使用的文件列表以及如何使用它们。值得庆幸的是，这些问题都有答案。

如何获取文件列表

这是一项相当简单的任务。首先，修改require函数调用以包含整个库：var wiredep = require('wiredep');。从那时起，您可以使用wiredep提供的两个额外字段：wiredep().js-从bower_components获取JS文件，wiredep().css从bower-components获取CSS文件。

如何使用它们

为了完成这项任务，我使用了非常适合这类工作的gulp-inject，当然还有gulp-concat。如果没有，只需通过NPM（npm install --save-dev gulp-inject gulp-concat）安装它们，并向gulpfile添加依赖项。

如果您的示例index.html如下所示：

<html>
<head>
    <title>Hello World!</title>
    <!-- inject:css -->
    <!-- endinject -->
</head>
<body>
    Hello World!
    <!-- inject:js -->
    <!-- endinject -->
</body>
</html>

您的gulpfile将看起来像这样：

var gulp = require('gulp');
var inject = require('gulp-inject');
var concat = require('gulp-concat');
var wiredep = require('wiredep');
gulp.task('bower', injectBower);
function injectBower() {
    var target = gulp.src('./html/index.html');
    var js = gulp.src(wiredep().js);
    var css = gulp.src(wiredep().css);
    return target
        .pipe(inject(js.pipe(concat('bower.js')).pipe(gulp.dest('./scripts'))))
        .pipe(inject(css.pipe(concat('bower.css')).pipe(gulp.dest('./styles'))))
        .pipe(gulp.dest('./html'));
}

现在，在运行gulp bower之后，index.html应该如下所示：

<html>
<head>
    <title>Hello World!</title>
    <!-- inject:css -->
    <link rel="stylesheet" href="styles/bower.css"/>
    <!-- endinject -->
</head>
<body>
    Hello World!
    <!-- inject:js -->
    <script src="scripts/bower.js"></script>
    <!-- endinject -->
</body>
</html>

Gulp将在scripts目录中创建连接的JS文件，并在styles目录中创建链接的CSS文件。您可以自由定制此过程；有关更多信息，请访问gulp-inject页面gulp-inject是一个非常灵活的工具，因此您应该能够达到预期的效果。在我的情况下，在构建生产环境时，我还附加了gulp-uglify和chulp-rev。

如果你有任何问题，直接问。

听起来你需要吞下concat

这将是你的gullowfile.js 的下一步

var options = {
            bowerJson: config.bower.bowerJson,
            directory: config.bower.directory,
            ignorePath: config.bower.ingnorePath
        };
gulp.task('wiredep', function () {
    'use strict';
    log('Injectin Bower components into the Layout page');
    var options = config.getWiredConfiguration();
    var wiredep = require('wiredep').stream;
    return gulp
    .src(config.layout + 'index.cshtml')
    .pipe(wiredep(options))
    .pipe($.inject(gulp.src('js/layout/layout.js')))
    .pipe(concat('all.js'))
    .pipe(gulp.dest(config.layout));
});

或者可能是一个单独的脚本任务：

var concat = require('gulp-concat');
gulp.task('scripts', function() {
  return gulp.src('./lib/*.js')
    .pipe(concat('all.js'))
    .pipe(gulp.dest('./dist/'));
});
相关文章：