node.js - gruntjs や lesscss を使用してすべての css を 1 行に配置することは可能ですか?

Question

すべての .js および .less ファイルは、私のプロジェクトで gruntjs (組み込みの .js サポート) と .less ファイルを使用するタスク用の grunt-less-contrib プラグインを使用してビルドされます。

しばらくの間、lesscss は、次の .less ファイルのように、1 行に 1 つの定義のスタイルで css を圧縮します。

div,span,textarea,input {
  margin:0;
}

次のように出力されます。

div,
span,
textarea,
input {
  margin:0;
}

すべての css を 1 行に圧縮したいのですが、この例では次のようになります。

div,span,textarea,input{margin:0;}...other styles...

出来ますか？どんなアドバイスも役に立ちますが、これがlesscssまたはgruntに関する直接の質問であるかどうかはわかりません。

build.css をビルドした後にタスクを追加し、連結を実行することは可能でしょうか?

Answer 1

grunt-contrib-less プラグインは、コンパイルされた CSS を縮小するのにも十分です。コードを縮小するために別のプラグインは必要ありません。

このユースケースに固有の 2 つのオプションがあります。

• 圧縮 (いくつかの空白を削除します):

  less: {
      compile: {
          options: {
              paths: ["foo/bar/css"],
              compress: true
          },
          files: {
              "path/to/result.css": "path/to/source.less"
          }
      }
  }
  

  https://github.com/gruntjs/grunt-contrib-less/#compress

• yuicompress (内部で css-min を介して CSS を実行します):

  less: {
      compile: {
          options: {
              paths: ["foo/bar/css"],
              yuicompress: true
          },
          files: {
              "path/to/result.css": "path/to/source.less"
          }
      }
  }
  

  https://github.com/gruntjs/grunt-contrib-less/#yuicompress

したがって、あなたの場合、「yuicompress」が gruntfile に追加するのに適しています。

Answer 2

grunt.jsモジュールを使用してCSSファイルを縮小できますgrunt-css

• モジュールをインストールしますnpm install grunt-css --save-dev

• grunt.loadNpmTasks('grunt-css'); を使用して、grunt.jsまたは(使用する grunt のバージョンに応じて)モジュールをロードします。Gruntfile.js

• asでタスクを構成しGruntfile.js、

  grunt.initConfig({
    less: {
      //YOUR LESS CONFIG
    },
    cssmin: {
      YOUR_TARGET: {
        src: 'SRC_PATH/input.css',
        dest: 'DEST_PATH/output.min.css'
      }
    }
  });
  

• 次の構成を使用して、複数の css ファイルを結合および縮小できます。

  grunt.initConfig({
    less: {
      //YOUR LESS CONFIG
    },
    cssmin: {
      YOUR_TARGET: {
        src: 'SRC_PATH/**/*.css',
        dest: 'DEST_PATH/output.min.css'
      }
    }
  });
  

• タスクを grunt ビルド タスクに登録し、より少ないタスクの後に実行します。

  grunt.registerTask('default', ['less', 'cssmin'])
  

• これで、縮小された CSS ファイルを実行grunt buildまたは生成することができます。grunt cssmin

grunt-cssモジュールには組み込み機能があるcsslintため、css ファイルをリントするタスクを追加することもできます。

その他の構成/オプションは、https://github.com/jzaefferer/grunt-cssにあります。