当我使用 grunt 构建时，我有两个任务：
第一个任务preprocess:dist将app/scripts/config.js复制到dist/scripts/config.js并将// @echo FOO替换为BAR。
然后，usemin，将所有app/scripts/**/*.js连接到dist/scripts/application.js。
在 Gruntfile 中构建任务：
grunt.registerTask('build', [
'clean:dist',
'preprocess:dist',
'useminPrepare',
...
'htmlmin'
'concat',
'usemin'
]
我在index.html中包含脚本：
<!-- build:js({.tmp,dist,app}) scripts/application.js -->
<script src="/scripts/config.js"></script>
<script src="/scripts/other_file.js"></script>
<script src="/scripts/yet_another_file.js"></script>
<!-- endbuild -->
一切正常，除了在连接的文件 dist/scripts/application.js 中，我有来自app/scripts的config.js，而不是来自dist/scripts的。
我坚持认为build:js之后的({.tmp,dist,app})用于指定连接时将文件带到何处，但仍然配置.js取自错误的目录(应用程序而不是 dist)。
所以我最终得到了配置.js其中//@echo VAR 没有被替换。
如何告诉 concat/usemin 在连接时从 dist 而不是应用程序获取配置.js？
注意：一种解决方案是进行预处理以将config.processed.js放入app/scripts，然后包含此文件而不是config.js，这样我就不必更改usemin的工作方式。
但是我必须将 config.processing.js 放在 .gitignore 中，并且我的源文件中有一个生成的文件......
我更喜欢在 .tmp 或 dist 中生成此文件。
编辑：我的整个咕噜声文件：
// Generated on 2013-10-31 using generator-angular 0.5.1
'use strict';
// # Globbing
// for performance reasons we're only matching one level down:
// 'test/spec/{,*/}*.js'
// use this if you want to recursively match all subfolders:
// 'test/spec/**/*.js'
module.exports = function (grunt) {
require('time-grunt')(grunt);
require('load-grunt-tasks')(grunt);
require('time-grunt')(grunt);
grunt.loadNpmTasks('grunt-preprocess');
grunt.loadNpmTasks('grunt-include-source');
grunt.initConfig({
yeoman: {
// configurable paths
app: require('./bower.json').appPath || 'app',
dist: 'dist'
},
watch: {
coffee: {
files: ['<%= yeoman.app %>/scripts/{,*/}*.coffee'],
tasks: ['coffee:dist']
},
coffeeTest: {
files: ['test/spec/{,*/}*.coffee'],
tasks: ['coffee:test']
},
compass: {
files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
tasks: ['compass:server', 'autoprefixer']
},
styles: {
files: ['<%= yeoman.app %>/styles/{,*/}*.css'],
tasks: ['copy:styles', 'autoprefixer']
},
livereload: {
options: {
livereload: '<%= connect.options.livereload %>'
},
files: [
'<%= yeoman.app %>/{,*/}*.html',
'.tmp/styles/{,*/}*.css',
'{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js',
'<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
]
},
includeSource: {
files: ['<%= yeoman.app %>/index.html'],
tasks: ['includeSource:server']
}
},
autoprefixer: {
options: ['last 1 version'],
dist: {
files: [
{
expand: true,
cwd: '.tmp/styles/',
src: '{,*/}*.css',
dest: '.tmp/styles/'
}
]
}
},
connect: {
options: {
port: 8080,
// Change this to '0.0.0.0' to access the server from outside.
hostname: '0.0.0.0',
livereload: 35729,
// Modrewrite rule, connect.static(path) for each path in target's base
middleware: function (connect, options) {
var optBase = (typeof options.base === 'string') ? [options.base] : options.base;
return [require('connect-modrewrite')(['!(\..+)$ / [L]'])].concat(
optBase.map(function (path) {
return connect.static(path);
}));
}
},
livereload: {
options: {
open: true,
base: [
'.tmp',
'<%= yeoman.app %>'
]
}
},
test: {
options: {
port: 9001,
base: [
'.tmp',
'test',
'<%= yeoman.app %>'
]
}
},
dist: {
options: {
base: '<%= yeoman.dist %>'
}
}
},
clean: {
dist: {
files: [
{
dot: true,
src: [
'.tmp',
'<%= yeoman.dist %>/*',
'!<%= yeoman.dist %>/.git*'
]
}
]
},
server: '.tmp'
},
jshint: {
options: {
jshintrc: '.jshintrc'
},
all: [
'Gruntfile.js',
'<%= yeoman.app %>/scripts/{,*/}*.js'
]
},
coffee: {
options: {
sourceMap: true,
sourceRoot: ''
},
dist: {
files: [
{
expand: true,
cwd: '<%= yeoman.app %>/scripts',
src: '{,*/}*.coffee',
dest: '.tmp/scripts',
ext: '.js'
}
]
},
test: {
files: [
{
expand: true,
cwd: 'test/spec',
src: '{,*/}*.coffee',
dest: '.tmp/spec',
ext: '.js'
}
]
}
},
compass: {
options: {
sassDir: '<%= yeoman.app %>/styles',
cssDir: '.tmp/styles',
generatedImagesDir: '.tmp/images/generated',
imagesDir: '<%= yeoman.app %>/images',
javascriptsDir: '<%= yeoman.app %>/scripts',
fontsDir: '<%= yeoman.app %>/styles/fonts',
importPath: '<%= yeoman.app %>/bower_components',
httpImagesPath: '/images',
httpGeneratedImagesPath: '/images/generated',
httpFontsPath: '/styles/fonts',
relativeAssets: false
},
dist: {},
server: {
options: {
debugInfo: true
}
}
},
// not used since Uglify task does concat,
// but still available if needed
/*concat: {
dist: {}
},*/
rev: {
dist: {
files: {
src: [
'<%= yeoman.dist %>/scripts/{,*/}*.js',
'<%= yeoman.dist %>/styles/{,*/}*.css',
//'<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
//'<%= yeoman.dist %>/styles/fonts/*'
]
}
}
},
useminPrepare: {
// changed from app to dist, to take index.html processed by includeSource in dist
html: '<%= yeoman.dist %>/index.html',
options: {
dest: '<%= yeoman.dist %>'
}
},
usemin: {
//html: ['<%= yeoman.dist %>/{,*/}*.html'],
html: ['<%= yeoman.dist %>/index.html'],
//css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
//js: ['<%= yeoman.dist %>/scripts/**/*.js'],
options: {
dirs: ['<%= yeoman.dist %>']
}
},
imagemin: {
dist: {
files: [
{
expand: true,
cwd: '<%= yeoman.app %>/images',
src: '{,*/}*.{png,jpg,jpeg}',
dest: '<%= yeoman.dist %>/images'
}
]
}
},
svgmin: {
dist: {
files: [
{
expand: true,
cwd: '<%= yeoman.app %>/images',
src: '{,*/}*.svg',
dest: '<%= yeoman.dist %>/images'
}
]
}
},
cssmin: {
// By default, your `index.html` <!-- Usemin Block --> will take care of
// minification. This option is pre-configured if you do not wish to use
// Usemin blocks.
// dist: {
// files: {
// '<%= yeoman.dist %>/styles/main.css': [
// '.tmp/styles/{,*/}*.css',
// '<%= yeoman.app %>/styles/{,*/}*.css'
// ]
// }
// }
},
htmlmin: {
dist: {
options: {
/*removeCommentsFromCDATA: true,
// https://github.com/yeoman/grunt-usemin/issues/44
//collapseWhitespace: true,
collapseBooleanAttributes: true,
removeAttributeQuotes: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeOptionalTags: true*/
},
files: [
{
expand: true,
cwd: '<%= yeoman.app %>',
src: ['*.html', 'views/**/*.html', 'blocs/**/*.html'],
dest: '<%= yeoman.dist %>'
}
]
}
},
// Put files not handled in other tasks here
copy: {
dist: {
files: [
{
expand: true,
dot: true,
cwd: '<%= yeoman.app %>',
dest: '<%= yeoman.dist %>',
src: [
'*.{ico,png,txt}',
'.htaccess',
'bower_components/**/*',
'images/{,*/}*.{gif,webp}',
'assets/**/*',
'fonts/**/*',
'styles/fonts/*'
]
},
{
expand: true,
cwd: '.tmp/images',
dest: '<%= yeoman.dist %>/images',
src: [
'generated/*'
]
}
]
},
styles: {
expand: true,
cwd: '<%= yeoman.app %>/styles',
dest: '.tmp/styles/',
src: '{,*/}*.css'
}
},
concurrent: {
server: [
'coffee:dist',
'compass:server',
'copy:styles'
],
test: [
'coffee',
'compass',
'copy:styles'
],
dist: [
'coffee',
'compass:dist',
'copy:styles',
'imagemin',
'svgmin',
'htmlmin'
]
},
//karma: {
// unit: {
// configFile: 'karma.conf.js',
// singleRun: true
// }
//},
cdnify: {
dist: {
html: ['<%= yeoman.dist %>/*.html']
}
},
ngmin: {
dist: {
files: [
{
expand: true,
cwd: '<%= yeoman.dist %>/scripts',
src: '*.js',
dest: '<%= yeoman.dist %>/scripts'
}
]
}
},
uglify: {
dist: {
files: {
'<%= yeoman.dist %>/scripts/scripts.js': [
'<%= yeoman.dist %>/scripts/scripts.js'
]
}
}
},
preprocess: {
options: {
context: {
// /! Security warning:
// On heroku, process.env might contain sensitive information. (such as DATABASE_URL)
// To make sure what fields we pass, we specify every field explicitly.
// So DON'T do this: ENV: JSON.stringify(process.env)
ENV: JSON.stringify({
FIRST_VAR: process.env.FIRST_VAR || '',
SECOND_VAR: process.env.SECOND_VAR || '',
NODE_ENV: process.env.NODE_ENV || 'production'
})
}
},
server: {
src: 'app/scripts/config.js', dest: 'app/scripts/config.processed.js'//dest: '.tmp/scripts/config.js'
},
dist: {
src: 'app/scripts/config.js', dest: 'app/scripts/config.processed.js'//dest: 'dist/scripts/config.js'
}
},
includeSource: {
options: {
basePath: 'app',
baseUrl: '/',
},
server: {
files: {
'.tmp/index.html': 'app/index.html'
}
},
dist: {
files: {
'dist/index.html': 'app/index.html'
}
}
}
});
grunt.registerTask('server', function (target) {
if (target === 'dist') {
return grunt.task.run(['build', 'connect:dist:keepalive']);
}
grunt.task.run([
'clean:server',
'includeSource:server',
'preprocess:server',
'concurrent:server',
'autoprefixer',
'connect:livereload',
'watch'
]);
});
grunt.registerTask('test', [
'clean:server',
'concurrent:test',
'autoprefixer',
'connect:test'
//'karma'
]);
grunt.registerTask('build', [
'clean:dist',
'includeSource:dist',
'preprocess:dist',
'useminPrepare',
'concurrent:dist',
'autoprefixer',
'concat',
'copy:dist',
'cdnify',
'ngmin',
'cssmin',
//'uglify',
'rev',
'usemin'
]);
grunt.registerTask('default', [
'jshint',
'test',
'build'
]);
// building the app on heroku
grunt.registerTask('heroku', 'build');
};
我遇到了同样的问题，我通过以下步骤解决了：
1) 为您的脚本使用与"js"不同的构建类型，因此 usemin 插件将在构建过程中忽略它。例如，"开发"。
<!-- build:dev({.tmp,dist,app}) --><script src="/scripts/config.js"></script><!-- endbuild -->
请注意，由于 usemin 上的错误(问题 128)，没有空格。我正在运行 usemin 版本 2.1.1
有了这个，grunt sever将使用你的配置.js从你的源代码。
2) 修改预处理任务，将预处理文件放入临时文件夹，如.tmp。例如：
dist: {
src: 'app/scripts/config.js', dest: '.tmp/scripts/config.processed.js'
}
3)现在你需要创建一个Grunt任务来连接你的config.processing.js在.tmp文件夹中与脚本/应用程序.js在usemin动态生成的dist文件夹中。
例如：
concat: {
environment: {
dest: 'dist/scripts/application.js',
src: ['dist/scripts/application.js', '.tmp/scripts/config.processed.js']
}
},
如果您使用的是 Windows，则需要使用 \\ 而不是/
4)最后，你需要把所有的东西放在一起。生成任务应如下所示：
grunt.registerTask('build', [
'clean:dist',
'includeSource:dist',
'preprocess:dist',
'useminPrepare',
'concurrent:dist',
'autoprefixer',
'concat',
'copy:dist',
'cdnify',
'ngmin',
'cssmin',
'concat:environment',
'uglify',
'rev',
'usemin'
]);
有了这个包：
https://www.npmjs.org/package/grunt-file-append
您可以将生成的文件追加到串联的临时文件中。
您应该从 html 中完全删除配置 js 的引用，并在构建任务列表中的 concat 任务之后添加文件追加任务，以将生成的配置文件附加到连接的 js 中。