logo标签列表

将wiredep返回的所有文件连接成一个单一文件

javascriptnode.jsgulp
4
每次我使用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));
    });
2个回答
10

这是一个相当久远的问题，但我有一个对我有效并且应该适用于其他人的解决方案。

首先，我们必须了解 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变量。从此时起，你仅使用stream函数，实际上它并不返回一个由bower组件构成的流，正如你所想的那样。现在wiredep操作通过管道传递的文件，在上面的例子中是footer.html，管道的输出仍然是footer.html但是被wiredep修改了。这就是为什么最终得到的all.js包含index.cshtml的管道链:

                    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和gulp-rev。

如果您有任何问题，请随时提出。

0

看起来你需要 gulp concat

这将是你的 gulpfile.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/'));
});
如果我采用这种方法，那么我将不得不手动从“<!-- bower:css --> <!-- endbower -->”中删除所有标签。 - Leo Javier
我建议你试一下，然后告诉我结果如何。（不要手动删除任何内容，并先备份）:) 我正在使用grunt和concat，而且我不需要删除bower的注释。希望能够起到同样的作用。 - toddmo
我尝试了一下...但现在没有命中文件来写入它。 - Leo Javier
我曾经更改过我的代码，请确保我们的代码是相同的。无论如何，它并没有在任何地方创建all.js文件？ - toddmo
它创建了一个新的all.js文件...但基本上是一个带有.js扩展名的index.cshml的副本。 - Leo Javier
显示剩余3条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接