3

開発では、縮小されていない css ファイルをテストします。ビルド時に、それらを圧縮して結合します。link次に、最初の 2 つのコメントの間の圧縮されていない css 要素を削除linkし、生成されたcombined.min.cssファイルのコメントを解除します。何か案は！

<!-- __css -->
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/base.css" />
<!-- css__ -->

<!-- __cssmin
<link rel="stylesheet" href="css/combined.min.css" />
cssmin__ -->

ありがとう！

4

2 に答える 2

5

ビルドの方法については言及しません (通常、これはすべて、以下の Gruntfile のデフォルト タスクのように結合されます) が、個々の参照を縮小されたファイルへの単一のリンクに変更するだけであれば、簡単です。grunt-useminに作業を行わせるには、Gruntfile の replace タスクを参照してください。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>usemin</title>
  <!-- build:css css/combined.min.css -->
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/base.css" />
  <!-- endbuild -->
</head>
<body>
<h1>usemin</h1>
</body>
</html>

グラントファイル

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    copy: {
      dist: {
        files: [ {src: 'index.html', dest: 'dist/index.html'} ]
      }
    },

    'useminPrepare': {
      options: {
        dest: 'dist'
      },
      html: 'index.html'
    },

    usemin: {
      html: ['dist/index.html']
    }
  });

  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-usemin');

  grunt.registerTask('default', ['useminPrepare', 'copy', 'concat', 'cssmin', 'usemin']);
  grunt.registerTask('replace', ['copy', 'usemin']);
};

結果の HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>usemin</title>
  <link rel="stylesheet" href="css/combined.min.css">
</head>
<body>
<h1>usemin</h1>
</body>
</html>
于 2013-10-02T06:00:56.550 に答える