我正在为usemin寻找更好的glob模式,我想查找所有.js文件但排除.spec.js文件.到目前为止,我有以下解决方案.
<script src="components/**/*(.js|!(*.spec.js|*.scss))"></script>
我目前的解决方案要求我不断添加文件扩展名以排除它们,否则它们会被拾取,例如.html文件.
我试图让它只查找.js文件并.spec.js从中排除它但它似乎不起作用.
另外!components/**/*.spec.js在下面添加另一个脚本似乎不起作用.
从usemin问题似乎usemin并useminPrepare支持最新版本的多个目标:
在useminPrepare中支持多个目标:
usemin支持:
我尝试过使用以下配置的多个目标:
useminPrepare: {
foo: {
dest: 'fooDist',
src: ['foo/index.html']
},
bar: {
dest: 'barDist',
src: ['bar/index.html']
}
},
usemin: {
foo: {
options: {
assetsDirs : ['fooDist']
},
html: ['fooDist/**/*.html'],
css: ['fooDist/styles/**/*.css']
},
bar: {
options: {
assetsDirs : ['barDist']
},
html: ['barDist/**/*.html'],
css: ['barDist/styles/**/*.css']
}
},
但是我收到以下错误:
运行"usemin:foo"(usemin)任务警告:不支持的模式:foo
使用--force继续.
使用grunt-usemin 2.0.2
foo/index.html并bar/index.html成为2个单页面应用程序的主要页面.
谢谢你的帮助!
我有一个工作的自耕农项目.我正在使用grunt-usemin.
要包含javascripts,我这样做index.html:
<!-- build:js scripts/includes.js -->
<script src="/bower_components/jquery/jquery.min.js"></script>
<script src="/bower_components/underscore/underscore-min.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-route/angular-route.min.js"></script>
<script src="/bower_components/angular-resource/angular-resource.min.js"></script>
<script src="/bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="/bower_components/angular-ui-date/src/date.js"></script>
<script src="/bower_components/angulartics/src/angulartics.js"></script>
<script src="/bower_components/angulartics/src/angulartics-ga.js"></script>
<script src="/bower_components/jquery-ui/ui/jquery-ui.js"></script>
<script src="/assets/vendor/bootstrap.2.3.1.min.js"></script>
... a few more libs like that
<script src="/scripts/config.processed.js"></script>
<script src="/scripts/app.js"></script>
<script src="/scripts/controllers/first_controller.js"></script>
<script src="/scripts/controllers/second_controller.js"></script>
<script src="/scripts/controllers/third_controller.js"></script>
<script src="/scripts/controllers/fourth_controller.js"></script>
<script src="/scripts/controllers/fith_controller.js"></script>
<script src="/scripts/controllers/sixth_controller.js"></script>
<script src="/scripts/controllers/seventh_controller.js"></script>
... 20 more like that
<script src="/scripts/directives/first_directive.js"></script>
<script src="/scripts/directives/second_directive.js"></script>
<script src="/scripts/directives/third_directive.js"></script>
... 10 more like that
<script src="/scripts/services/first_service.js"></script>
<script src="/scripts/services/second_service.js"></script>
...
<script src="/scripts/filters/first_filter.js"></script>
<script src="/scripts/filters/second_filter.js"></script> …我有一个由我自己构建的yeoman-generator支持的grunt项目generator-webapp,如果有任何帮助,你可以在GitHub上找到它
咕噜咕噜的项目使我们成为了grunt-usemin这项任务.
我的项目涉及建立一个多语言网站,为了保持清洁,我决定将所有用一种语言写成的页面放在文件夹名称之后,用两个字母的短代码表示.
| project/
|--dist/
|----en/
|------index.html
|------404.html
|------...
|----fr/
|------index.html
|------404.html
|------...
这些文件由把手模板制成并使用assemble.在布局中我有usemin像这样的构建块
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="../styles/main.css">
<!-- endbuild -->
<!-- build:js scripts/vendor/modernizr.js -->
<script src="../bower_components/modernizr/modernizr.js"></script>
<!-- endbuild -->
在一个完美的世界中,这将转化为
<link rel="stylesheet" href="../styles/main.css">
<script src="../scripts/vendor/modernizr.js"></script>
而是显示
<link rel="stylesheet" href="styles/main.css">
<script src="scripts/vendor/modernizr.js"></script>
这在我的情况下不太理想.相关部分Gruntfile.js看起来像这样
useminPrepare: {
options: {
dest: '<%= yeoman.dist %>'
},
html: [
'<%= yeoman.app %>/fr/{,*/}*.html',
'<%= yeoman.app %>/en/{,*/}*.html'
]
},
usemin: { …grunt-usemin帮我改造
<link href="/dependencies/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="/dependencies/nanoscroller/bin/css/nanoscroller.css" rel="stylesheet" />
<link href="/dependencies/dropzone/downloads/css/dropzone.css" rel="stylesheet" />
一个完美的组合和缩小的js:
<link href="scripts/8e1991c7.libraries.js" rel="stylesheet" />
在concat,cssmin和uglify之后,我有一个几乎完美的文件夹结构,除了图像和它们的位置.
这是我的问题:
所有这些供应商的css文件都包含图像位置.不好的是,他们所有人都在分享不同类型的地点.他们中的一些人在css文件夹中使用图像,而其他人在img文件夹中使用.
如何配置grunt usemin来重写所有图片网址？
我有一个AngularJS应用程序,我正在研究usemin任务.这个应用程序有2个html页面,都包括一个缩小为common.js的块,其他页面包括为这些特定页面缩小的js.
page1.html
<!-- build:js scripts/common.js -->
<!-- bower:js -->
<script src="a.js"></script>
<script src="b.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js scripts/page1.js -->
<!-- bower:js -->
<script src="c.js"></script>
<script src="d.js"></script>
<!-- endbower -->
<!-- endbuild -->
page2.html
<!-- build:js scripts/common.js -->
<!-- bower:js -->
<script src="a.js"></script>
<script src="b.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js scripts/page2.js -->
<!-- bower:js -->
<script src="e.js"></script>
<script src="f.js"></script>
<!-- endbower -->
<!-- endbuild -->
Gruntfile.js
useminPrepare: {
html: ['<%= yeoman.app %>/page1.html', '<%= yeoman.app …我有代码,可以轻松快速地编写/测试代码,代码不属于我的生产代码(大多数情况下它会模拟服务器,所以我只需要grunt服务器).
这两部分,一部分是如何删除部分脚本
angular.module('nglaborcallApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'server_mocks', // Don't want this line in the production build
'dialogs'
]
然后是一段需要消失的index.html
<!-- build:js({.tmp,app}) scripts/mocks/mocks.js -->
<script type='text/javascript'>var Mocks = {};</script>
<script src='scripts/mocks/jobs.js'></script>
<script src='scripts/mock.js'></script>
<!-- endbuild -->
所以这可能是2个问题.我在usemin文档中没有看到任何关于此的内容,所以我猜测还有其他工具,但我不知道该工具的名称是什么.
另一种可能性是我做错了而不是注入这个模拟对象,我应该用grunt服务器来做.其他人在做什么？
我开始使用由yeoman生成的空项目,并尝试编辑Gruntfile.js以满足我的需求.
grunt构建任务读取我的index.html文件,并连接我的bower依赖项并生成.vendor.js文件.
我在工作流程中破坏了某些东西,现在usemin不会替换我的index.html文件中的标记,即使生成.vendor.js文件也是如此.
这是我的Gruntfile.js
'use strict';
module.exports = function (grunt) {
// Load grunt tasks automatically
require('load-grunt-tasks')(grunt);
// Time how long tasks take. Can help when optimizing build times
require('time-grunt')(grunt);
// Define the configuration for all the tasks
grunt.initConfig({
// Project settings
yeoman: {
// configurable paths
app: require('./bower.json').appPath || 'app',
dist: 'dist',
},
express: {
options: {
port: process.env.PORT || 9000
},
dev: {
options: {
script: 'server.js',
debug: true
}
},
prod: {
options: {
script: 'dist/server.js',
node_env: …我刚刚使用angular-fullstack yeoman生成器创建了一个新的webapp.
我注意到grunt-bower-install正在我的index.html文件中生成<!-- bower:js -->标签之间的JS bower组件.
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/affix.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/alert.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/button.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/carousel.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/collapse.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/dropdown.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/tab.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/transition.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/scrollspy.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/modal.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/tooltip.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/popover.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<!-- endbower -->
如何排除某些引导程序组件？
我们在index.html中定义了2个块 - 一个用于第三方库,一个用于我们的应用程序文件.由于第三方库已经缩小,我们只想连接它们,但不是uglify.我怎么能这样做useminPrepare？
<!-- build:js js/lib.js -->
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular-cookies/angular-cookies.min.js"></script>
<script src="lib/angular-route/angular-route.min.js"></script>
<!-- endbuild -->
<!-- build:js js/app.js -->
<script src="js/app.js"></script>
<script src="js/controllers/LanguageCtrl.js"></script>
<!-- endbuild -->
gruntfile.js:
useminPrepare: {
html: '<%= yeoman.app %>/index.html',
options: {
dest: '<%= yeoman.dist %>',
flow: {
html: {
steps: {
// TODO for libs.js block I don't want uglify!
js: ['concat', 'uglifyjs'],
css: ['cssmin']
},
post: {}
}
}
}
}