现在大多数包都可以在NPM和Bower中使用.我必须有NPM,但我想在我的项目中切断Bower.
我目前正依赖于grunt-wiredep创建<script>包含在我的index.html.这个工具查看所有Bower配置,将所有必要的js和css文件提取到我index.html的手中.
是否有一个工具可以为NPM依赖项做同样的事情？
我有一个index.html文件.在我的bower.json文件中,我有一个依赖:
"bootstrap": "~3.3.2"
在gulp文件中,我有:
gulp.src('./main.html')
.pipe(wiredep({
bowerJson: require('./bower.json')
}))
.pipe(gulp.dest('./'));
当我这样做时,我看到所有的css和js都被生成了,但是没有看到bootstrap.css包含在inject中的任何地方,其他依赖项是.到底是怎么回事？
我认为必须有一个简单的解决方案吗？或者与grunt相比,gulp有问题吗？
更新:我正在向一个铁杆狂热狂热者发出警告,关于凉亭和节点如何与maven相比,以及如何在bower安装后你必须在下载后手动修改包的bower.json文件.如果有一些方法可以合法地不必修改bower.json或将其合并到构建过程中,而不必要求开发人员这样做...请更新!
该grunt-wiedep任务输出资产的相对路径.我需要绝对路径.所以,我replace按照这里的建议重新配置了这个块:https://github.com/stephenplusplus/grunt-wiredep/issues/46
但是,在replace按照建议指定块之后,我将以下内容添加为我的脚本引用.如你所见,这是错误的.
<script src="/../../../public/vendors/jquery/dist/jquery.js"></script>
<script src="/../../../public/vendors/angular/angular.js"></script>
<script src="/../../../public/vendors/angular-resource/angular-resource.js"></script>
<script src="/../../../public/vendors/angular-route/angular-route.js"></script>
我想要的是这样:
<script src="/vendors/jquery/dist/jquery.js"></script>
<script src="/vendors/angular/angular.js"></script>
<script src="/vendors/angular-resource/angular-resource.js"></script>
<script src="/vendors/angular-route/angular-route.js"></script>
所以,我尝试了这个替换块.注意RegEx:
replace: {
js: '<script src="/{{filePath}}"></script>'.replace(/\.\.\/public/gi, ''),
css: '<link rel="stylesheet" href="/{{filePath}}" />'.replace(/\.\.\/public/gi, '')
}
但它似乎{{filePath}}在以后被替换,因此RegEx不会产生预期的结果.
处理这种情况的理想方法是什么？
目前的项目结构有点像这样:
-index.html
|
-bower.json
|
+-bower_components
建议的项目结构将在项目根目录中添加一些静态html文件.到目前为止,我一直在管理bower.json中的所有前端依赖项,并使用grunt-wiredep任务将其自动包含在index.html中.但是添加新文件后,每个文件都会有不同的依赖关系.
-index.html
|
-file-with-some-other-bower-dependency.html
|
-bower.json
|
+bower_components
使用不同的bower依赖关系管理这些文件的有效方法是什么？
我正在尝试使用wiredep注入bower依赖项.我对它是如何工作有点困惑,为什么它只适用于我的JS文件.
gulp.task('wiredep', function(cb){
gulp.src('./index.html')
.pipe(wiredep())
.pipe(gulp.dest('.'));
});
最后一行gulp.dest('.')做什么？目的地不是我的index.html文件.此外,此任务似乎只注入javascript文件.我有我的bower.json依赖项
"bootstrap": "~3.3.6",
"bourbon": "~4.2.6",
"jquery": "~2.1.4",
"neat": "~1.7.2"
Bootstrap,Bourbon和整洁,都有大量的CSS,但是
<!-- bower:css -->
<!-- endbower -->
跑完后仍然空着gulp wiredep.为什么会这样？
bower.json deps看起来像这样:
"dependencies": {
"angular": "~1.4.8",
"bitters": "~1.1.0",
"bourbon": "~4.2.6",
"font-awesome": "fontawesome#~4.5.0",
"jquery": "~2.1.4",
"neat": "~1.7.2"
}
我一直在使用bower与wiredep相结合,但我想切换到使用System.js加载器.为此,JSPM是理想的.然而,bower和wiredep的组合为我做的一件事还包括(S)CSS.
JSPM是否处理这些文件？或者我是否应采取不同的方法来处理这些文件？
我正在使用bower来安装bootstrap和font-awesome打包,并Grunt用作构建解决方案.我已wiredep配置为正确更新我的index.html文件.一切都很好.我唯一的问题是将字体文件复制到dist/目录.
我意识到我可以配置我的grunt copy:dist目标,但鉴于每个包可能使用不同的目录结构来存储它们的字体,因此使用单个规则来复制字体是一项挑战.此外,如果这些软件包的bower.json文件中列出了字体,是否有办法检测这些字体并自动复制它们？
是否有另一个Grunt插件,我可以使用它以相同的方式wiredep识别字体文件识别css/js文件？
我已经在SO上看到了与同一问题相关的其他帖子,但没有正式解决问题的方法.
运行"wiredep:target"(wiredep)任务
完成,没有错误
但不注入bower.json的依赖项.无法调试此问题.任何帮助表示赞赏.
Gruntfile.js:
wiredep: {
target: {
// Point to the files that should be updated when
// you run `grunt wiredep`
src: [
'<%= yeoman.app %>/index.html'
],
// Optional:
// ---------
options: {
cwd: '',
dependencies: true,
devDependencies: false,
exclude: [],
fileTypes: {},
ignorePath: '',
overrides: {}
}
}
},
我想改编一个gulpfile.js并将我的bower_components/文件夹更改为app/bower_components/.
我更新了目录.bowerrc,所以现在每次我做的bower install时候都会使用正确的目录:
{
"directory": "app/bower_components"
}
现在,如何gulp-wiredep在我的主Sass文件中编写正确的Sass路径位置？
例如,gulp-wiredep在我的main.scss文件中添加以下行,紧接着// bower:scss:
@import "bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
应该是现在 @import "app/bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
我该如何改变这条道路？我相信这是一些配置wiredep任务:
gulp.task('wiredep', function () {
var wiredep = require('wiredep').stream;
gulp.src('app/styles/*.scss')
.pipe(wiredep({
ignorePath: /^(\.\.\/)+/
}))
.pipe(gulp.dest('app/styles'));
gulp.src('app/*.html')
.pipe(wiredep({
exclude: ['bootstrap-sass-official'],
ignorePath: /^(\.\.\/)*\.\./
}))
.pipe(gulp.dest('app'));
});
但我不知道如何配置它来做我需要的东西,我找不到任何关于它的文档.
我知道如果我在我的sass文件中手动更改该路径"app/bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss",那么gulp serve它将起作用,但是一旦我安装了一个bower组件,它就会将该路径更改为没有app/在开头的那个路径,它将破坏任务.
如何解决？
完成:
// inject bower components
gulp.task('wiredep', function () {
var wiredep = require('wiredep').stream; …有没有办法将所有凉亭安装的库自动组合并缩小为1个文件？
首先,我尝试了最基本的方法:组合.js所有子目录中的所有文件:
uglify: {
options: {compress: true},
my_target: { files: {
'vendor.js': ['bower_components/**/*.js'],
} } }
但这显然是一种糟糕的做法.由于错误太多,它也不起作用.
我手动删除了所有文件,并且只保留了每个库所拥有的1个(主)文件,并且它有效.
有没有办法自动完成这个？
另外,建议这样做吗？(即将所有供应商库合并为1个文件)