bower.json

Question

我一直试图通过Bower为 wiredep 和 gulp 生成我的脚本标记和路径（和--save-dev）如无数的教程所示，但无论我做什么，它都会复制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>

我错过了什么？

我尝试过的事情没有任何区别：

在
要求在gulpfile.js的头部和gulp.task内的wiredep
使用或不使用选项调用wiredep
尝试不同的选项和不同的路径
使用变量作为源和目标而不是inlineglobs
是否使用尾部斜杠
使用./或不
使用空的.bowerrc文件与上面的文件
重命名gulp任务
删除＆＃34;忽略＆＃34; bower.json文件中的部分是否

Answer 1

The major problem was in your bower.json file. Change devDependencies to dependencies, because that is what wiredep expects. It wasn't finding what it was looking for. :

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"
  }
}

Also, your gulpfile's wiredep didn't need any arguments

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不会生成任何脚本标记和路径

1 个答案:

bower.json

gulpfile.js