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

Question

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

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

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>

我错过了什么？

我尝试过但没有什么区别的事情:

• 在 和 中添加或删除空格
• 要求在 gulpfile.js 的开头和 gulp.task 中使用wiredep
• 带或不带选项调用wiredep
• 尝试不同的选项和不同的路径
• 使用源和目标变量而不是内联全局变量
• 是否使用尾部斜杠
• 是否使用 ./
• 使用空 .bowerrc 文件与上述文件
• 重命名 gulp 任务
• 是否从 Bower.json 文件中删除“ignore”部分

Answer 1

主要问题出在您的 bower.json 文件中。将 devDependencies 更改为 dependency，因为这是 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' ) );
} );