Wiredep + Gulp 不会生成任何脚本标签和路径

Question

我一直在尝试让 wiredep 和 gulp 生成我的脚本标签和加载脚本的路径（和 --save-dev) 通过 Bower，如无数教程所示，但无论我做什么，它都会很好地复制 html 源文件，但不会注入脚本标签和路径。

我现在只想连接 Bower.json 文件，所以我删除了处理 css 文件的部分示例脚本，即大多数示例中包含的注入部分。

gulpfile.js：（仅摘要）

gulp.task( 'bower', function () {
    var wiredep = require( 'wiredep' ).stream;
    return gulp.src( './src/index.html' )
        .pipe( wiredep( {
                            cwd      : './src',
                            directory: './bower_components/',
                            bowerJson: require( './bower.json' ),
                        } ) )
        .pipe( gulp.dest( './build' ) );
} );

bower.json 文件

{
  "name": "SomeProject",
  "description": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "devDependencies": {
    "angular-mocks": "~1.4.9",
    "angular": "~1.4.9",
    "jquery": "components/jquery#^2.2.0",
    "angular-aria": "^1.5.0"
  }
}

.bowerrc 文件

{
  "directory" : "bower_components"
}

index.html 文件最后几行

    </div>
</div>

<!--bower:js-->
<!--endbower-->
<script src="js/app.js" type = "text/javascript"></script>
</body>
</html>

所以，我运行它将 index.html 文件复制到正确的位置，但 html 文件中的输出与输入完全相同。

结果：

    </div>
</div>

<!--bower:js-->
<!--endbower-->
<script src="js/app.js" type = "text/javascript"></script>
</body>
</html>

我错过了什么？

我试过的东西没有区别：

在 and
在 gulpfile.js 的开头和 gulp.task
使用或不使用选项调用 wiredep
尝试不同的选择和不同的路径
对源和目标使用变量而不是 inlineglobs
是否使用尾部斜杠
是否使用./
使用空的 .bowerrc 文件与上面的文件
重命名 gulp 任务
是否从 bower.json 文件中删除 "ignore" 部分

Answer 1

主要问题出在您的 bower.json 文件中。将 devDependencies 更改为 dependencies，因为这是 wiredep 所期望的。它没有找到它要找的东西。 :

bower.json

{
  "name": "SomeProject",
  "description": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "angular-mocks": "~1.4.9",
    "angular": "~1.4.9",
    "jquery": "components/jquery#^2.2.0",
    "angular-aria": "^1.5.0"
  }
}

此外，您的 gulpfile 的 wiredep 不需要任何参数

gulpfile.js

gulp.task( 'bower', function () {
  var wiredep = require( 'wiredep' ).stream;
  return gulp.src( './src/index.html' )
    pipe( wiredep( {
        // cwd      : './src',      // <--------------- TAKE THIS LINE OUT
        // directory: './bower_components/',   /// <--- AND REMOVE ALL THESE
        // bowerJson: require( './bower.json' ) /// <--- (UNLESS YOUR GULPFILE IS IN ANOTHER DIRECTORY)
        // onError : function(err) {       /// <--- I used these for debugging. Uncomment them and  you'll see things be more verbose when you call this gulp task.
        //     console.log("Wiredep error: "+err);
        // },
        // onFileUpdated : function (filePath) {
        //     console.log('File path was updated: ' + filePath);
        // },
        // onPathInjected : function (fileObject) {
        //     console.log('Path injected: ' + JSON.stringify(fileObject));
        // }
    }))
  .pipe( gulp.dest( './build' ) );
} );

Wiredep + Gulp 不会生成任何脚本标签和路径

Wiredep + Gulp will not generate any script tags and paths

node.js

bower

gulp

wiredep

bower.json

gulpfile.js