私の Grunt ファイルでは、useminを使用してindex.htmlファイルを分析し、 concat schemaを構築します。その上で他のプロセスが発生します。
Grunt ファイルは次のとおりです。
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ファイルを作成しました。
少ないプラグインを使用して処理し、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'
]);
これは機能しますが、かなりハックです...誰かがエレガントなソリューションを持っていますか?
つまり、後で生成されたファイルを usemin フローに追加できるはずです。
何か案は？