在我的 Grunt 文件中，我使用usemin来分析我的index.html文件构建concat schema，在此之上将发生其他进程。
这是咕噜声文件：
module.exports = function(grunt) {
// Load grunt tasks automatically.
require('load-grunt-tasks')(grunt);
// Configurable paths for the application.
var appConfig = {
src: require('./bower.json').appPath || 'src',
dist: 'dist'
};
grunt.initConfig({
settings: appConfig,
clean: {
dist: {
files: [{
dot: true,
src: [
'.tmp',
'<%= settings.dist %>/{,*/}*',
'!<%= settings.dist %>/.git*'
]
}]
},
tmp: {
src: '.tmp'
}
},
html2js: {
app: {
options: {
htmlmin: {
collapseBooleanAttributes: true,
collapseWhitespace: true,
removeAttributeQuotes: true,
removeComments: true,
removeEmptyAttributes: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true
}
},
src: [ '<%= settings.src %>/app/**/*.tpl.html' ],
dest: '.tmp/concat/js/templates-app.js'
}
},
// Process all the .less files into a single css file.
less: {
process: {
files: {
".tmp/concat/css/less.css": "src/less/**/*.less"
}
}
},
concat: {
templates: {
src: ['.tmp/concat/js/app.js', '.tmp/concat/js/templates-app.js'],
dest: '.tmp/concat/js/app.js'
},
css: {
src: ['.tmp/concat/css/main.css', '.tmp/concat/css/less.css'],
dest: '.tmp/concat/css/main.css'
}
},
useminPrepare: {
html: '<%= settings.src %>/index.html',
options: {
// This is the folder which holds our build.
dest: '<%= settings.dist %>',
// This is the temp folder, which is used by "usemin", to prepare the build.
// It needs to be cleaned when finished.
}
},
usemin: {
html: '<%= settings.dist %>/index.html',
options: {
blockReplacements: {
less: function (block) {
return '<link rel="stylesheet" href="' + block.dest + '">';
}
}
}
},
copy: {
dist: {
files: [
{
src: '<%= settings.src %>/index.html',
dest: '<%= settings.dist %>/index.html'
},{
expand: true,
cwd: '<%= settings.src %>/assets',
src: ['**'],
dest: '<%= settings.dist %>/assets'
}
]
}
},
// Minifies everything after they have been copied.
htmlmin: {
dist: {
options: {
collapseWhitespace: true,
conservativeCollapse: false,
collapseBooleanAttributes: true,
removeCommentsFromCDATA: true,
removeOptionalTags: true
},
files: [{
expand: true,
cwd: '<%= settings.dist %>',
src: ['*.html', '**/*.tpl.html'],
dest: '<%= settings.dist %>'
}]
}
},
/**
* karma
*/
karma: {
unit: {
configFile: 'karma/karma.conf.js'
}
}
});
grunt.registerTask('build', [
'clean:dist',
'html2js:app',
'less:process',
'useminPrepare',
'concat:generated',
'concat:templates',
'concat:css',
'copy:dist',
'cssmin',
'uglify',
'usemin',
'htmlmin',
'clean:tmp'
]);
grunt.registerTask('test', [
'karma:unit'
]);
};
这是 HTML 文件：
<!DOCTYPE html>
<html ng-app="app" ng-controller="AppCtrl">
<head>
<title ng-bind="pageTitle"></title>
<meta lang="en" charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- build:css css/main.css -->
<link rel="stylesheet" type="text/css" href="less/main.less">
<!-- endbuild -->
</head>
<body>
<div id="ng-view" ng-view></div>
<!-- build:js js/vendor.js -->
<script type="text/javascript" src="../vendor/angular/angular.js"></script>
<script type="text/javascript" src="../vendor/angular-route/angular-route.js"></script>
<script type="text/javascript" src="../vendor/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<!-- endbuild -->
<!-- build:js js/app.js -->
<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="app/home/home.js"></script>
<script type="text/javascript" src="app/about/about.js"></script>
<!-- endbuild -->
<!-- build:js -->
<script type="text/javascript" src="app/templates-app.js"></script>
<!-- endbuild -->
</body>
</html>
问题是，我使用 less.css
看起来usemin无法识别较少的文件，并且不会将它们包含在流程中。
我所做的有点骇人听闻——我在我的src文件夹中创建了一个伪造的main.css文件。
我使用 less 插件对其进行处理并将其转换为 css 文件，并将其保存在我的.tmp 文件夹中。
// Process all the .less files into a single css file.
less: {
process: {
files: {
".tmp/concat/css/less.css": "src/less/**/*.less"
}
}
},
**现在，当文件位于 .tmp 文件夹中时，我已将其与用户从读取 index.html 时看到的虚假 style.css 连接起来**
concat: {
templates: {
src: ['.tmp/concat/js/app.js', '.tmp/concat/js/templates-app.js'],
dest: '.tmp/concat/js/app.js'
},
css: {
src: ['.tmp/concat/css/main.css', '.tmp/concat/css/less.css'],
dest: '.tmp/concat/css/main.css'
}
},
这允许我将我的数据添加到 usemin 将通过流程的文件中。
grunt.registerTask('build', [
'clean:dist',
'html2js:app',
'less:process',
'useminPrepare',
'concat:generated',
'concat:templates',
'concat:css', // HERE WAS MY HACK, CONCAT IT BEFORE COPYING INTO THE DIST FOLDER
'copy:dist',
'cssmin',
'uglify',
'usemin',
'htmlmin',
'clean:tmp'
]);
这行得通，但它很hackish......有人有一个优雅的解决方案吗？
我的意思是，它应该能够将稍后生成的文件附加到 usemin 流。
有任何想法吗？