grunt.js に組み込まれている「css」の代わりに「cssmin」を使用するために、yeoman と grunt を使用してプロジェクトと grunt-css プラグインをビルドしています
index.html
<!-- build:css styles/styles.css -->
<link rel="stylesheet" href="styles/main.css"/>
<!-- endbuild -->
<!-- build:js scripts/scripts.js -->
<script src="scripts/vendor/jquery.min.js"></script>
<script src="scripts/vendor/handlebars-1.0.0.beta.6.js"></script>
<script src="scripts/vendor/ember-1.0.pre.min.js"></script>
<script src="scripts/main.js"></script>
<script src="scripts/routes/app-router.js"></script>
<script src="scripts/store.js"></script>
<script src="scripts/controllers/application-controller.js"></script>
<script src="scripts/models/application-model.js"></script>
<script src="scripts/views/application-view.js"></script>
<!-- endbuild -->
Gruntfile.js
rev: {
js: 'dist/scripts/**/*.js', // scripts/**/*.js
css: 'dist/styles/**/*.css', // styles/**/*.css
img: 'dist/images/**' // images/**
},
'usemin-handler': {
html: 'index.html'
},
usemin: {
html: ['dist/**/*.html'], // **/*.html
css: ['dist/**/*.css'] // **/*.css
},
rjs: {
// no minification, is done by the min task
optimize: 'none',
baseUrl: './scripts',
wrap: true
},
cssmin: {
dist: {
src: [
'app/styles/**/*.css'
],
dest: 'dist/styles/styles.css'
}
},
concat: {
dist: {
src: [
'app/scripts/**/*.js'
],
dest: 'dist/scripts/scripts.js',
separator: '/**********/\n'
}
},
min: {
dist: {
src: [
'dist/scripts/scripts.js'
],
dest: 'dist/scripts/scripts.js',
separator: '/**********/\n'
}
}
次に、ビルド プロジェクトの構造は次のとおりです。
dist/
|__scripts/
|____04216377.scripts.js
|__styles/
|____d41d8cd9.styles.css
|__index.html
次に、index.htmlファイルを出力します
<link rel="stylesheet" href="styles/styles.css"/?>
<script src="scripts/04216377.scripts.js"></script>
ご覧のとおり、index.html の改訂されたスタイルの名前を'styles/d41d8cd9.styles.css' に変更する以外はすべて問題ありません。そしてクエスチョンマークは「?」通常の行で???
注: 詳細については、コンソールに出力されます (エラーなし) Running "rev:js" (rev) task dist/scripts/scripts.js --- 04216377.scripts.js
"rev:css" (rev) タスクの実行 dist/styles/styles.css --- d41d8cd9.styles.css
"rev:img" (rev) タスクの実行
「usemin:html」(usemin)タスクの実行
usemin:html - dist/index.html scripts/scripts.js
was <script src="scripts/scripts.js"></script>
now <script src="scripts/04216377.scripts.js"></script>
「usemin:css」(usemin)タスクの実行
usemin:css - dist/styles/d41d8cd9.styles.css
名前の変更は行われていません。どうもありがとう!