[解決済み] Grunt.js (0.3.x)で複数のCSSとJavaScriptファイルを連結して最小化する方法

質問

注：この質問はGrunt 0.3.xにのみ関連し、参考のために残されています。最新のGrunt 1.xのリリースに関するヘルプは、この質問の下の私のコメントを参照してください。

私は現在、CSSとJavaScriptファイルを最初に連結し、次に最小化するための自動ビルドプロセスをセットアップするためにGrunt.jsを使用しようとしています。

私は、JavaScriptファイルの連結と最小化に成功しましたが、gruntを実行するたびに、ファイルを上書きするのではなく、単にファイルに追加しているようです。

CSSのminifyやconcatenateに関しては、今のところできません!

gruntのCSSモジュールに関しては、私が試したのは consolidate-css , grunt-css & cssmin を追加しましたが、無駄でした。使い方がよくわからなかったのです!

私のディレクトリ構造は以下の通りです（典型的なnode.jsのアプリケーションです）。

• app.js
• grunt.js
• /公開/index.html
• /public/css/[各種cssファイル]。
• /public/js/[各種javascriptファイル]。

現在、私のアプリケーションのルートフォルダにあるgrunt.jsファイルは、以下のようなものです。

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: '<json:package.json>',
    concat: {
      dist: {
        src: 'public/js/*.js',
        dest: 'public/js/concat.js'
      }
    },
    min: {
      dist: {
        src: 'public/js/concat.js',
        dest: 'public/js/concat.min.js'
      }
    },
    jshint: {
      options: {
        curly: true,
        eqeqeq: true,
        immed: true,
        latedef: true,
        newcap: true,
        noarg: true,
        sub: true,
        undef: true,
        boss: true,
        eqnull: true,
        node: true
      },
      globals: {
        exports: true,
        module: false
      }
    },
    uglify: {}
  });

  // Default task.
  grunt.registerTask('default', 'concat min');

};

要約すると、私は2つの質問で助けを必要としています。

1. フォルダの下にあるすべてのCSSファイルを連結して最小化する方法 /public/css/ を一つのファイルにする方法、例えば main.min.css
2. なぜgrunt.jsは、連結され、最小化されたjavascriptファイルに追加し続けるのでしょうか？ concat.js と concat.min.js の下に /public/js/ というコマンドを実行するたびに上書きするのではなく grunt を実行するのですか？

2016年7月5日更新 - Grunt 0.3.x から Grunt 0.4.x または 1.x へのアップグレードについて

Grunt.js は新しい構造に移行し Grunt 0.4.x に変更されました (このファイルの名前は Gruntfile.js ). 私のオープンソースプロジェクトをご覧ください Grunt.jsスケルトン のビルドプロセスを設定するためのヘルプは Grunt 1.x .

からの移動 Grunt 0.4.x から Grunt 1.x は、多くの主要な変更を導入すべきではありません。 .

どのように解決するのですか？

concat.js が concat タスクのソースファイル public/js/*.js . を削除するタスクがあるかもしれません。 concat.js (を削除してから連結したり、配列を渡して連結するファイルとその順序を明示的に定義したり、プロジェクトの構造を変更したりすることができます。

後者を行う場合、すべてのソースを ./src の下に置き、ビルドしたファイルを ./dest

src
├── css
│   ├── 1.css
│   ├── 2.css
│   └── 3.css
└── js
    ├── 1.js
    ├── 2.js
    └── 3.js

次に コンカット タスク

concat: {
  js: {
    src: 'src/js/*.js',
    dest: 'dest/js/concat.js'
  },
  css: {
    src: 'src/css/*.css',
    dest: 'dest/css/concat.css'
  }
},

あなたの min タスク

min: {
  js: {
    src: 'dest/js/concat.js',
    dest: 'dest/js/concat.min.js'
  }
},

ビルドインの min タスクはUglifyJSを使用しているので、代替品が必要です。私が見つけたのは grunt-css がなかなか良い感じです。インストール後、gruntファイルに読み込ませます。

grunt.loadNpmTasks('grunt-css');

そして、設定する

cssmin: {
  css:{
    src: 'dest/css/concat.css',
    dest: 'dest/css/concat.min.css'
  }
}

使い方は組み込みのminと同様であることに注意してください。

あなたの default タスクを

grunt.registerTask('default', 'concat min cssmin');

では grunt を実行すると、望みの結果が得られます。

dest
├── css
│   ├── concat.css
│   └── concat.min.css
└── js
    ├── concat.js
    └── concat.min.js