複数のCSSおよびJavaScriptファイルをGrunt.js（0.3.x）で連結および縮小する方法

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

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

JavaScriptファイルを正常に連結および縮小できましたが、gruntを実行するたびに、ファイルを上書きするのではなく、ファイルに追加するだけのようです。

CSSの縮小または連結については、まだこれを行うことができません。

不快なCSSモジュールの観点からconsolidate-css、grunt-css＆を使用してみましcssminたが、役に立ちませんでした。それらを使用する方法について私の頭を得ることができませんでした！

私のディレクトリ構造は次のとおりです（典型的なnode.jsアプリケーションです）：

• app.js
• grunt.js
• /public/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/を1つのファイルに連結および縮小する方法、たとえば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 Skeletonを参照してください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: {
  js: {
    src: 'dest/js/concat.js',
    dest: 'dest/js/concat.min.js'
  }
},

ビルドイン分の交換が必要なので、タスクは、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

ここで、jQueryやModernizrなどの巨大なプロジェクトで連結のために使用されている非常に興味深い手法について触れておきます。

この両方のプロジェクトは、requirejsモジュールで完全に開発され（githubリポジトリで確認できます）、requirejsオプティマイザーを非常にスマートな連結子として使用します。おもしろいことは、ご覧のとおり、jQueryもModernizrがrequirejsを動作させる必要もないということです。これは、コード内のrequirejsを取り除くためにrequirejsの統治儀式を消去するために発生します。つまり、requirejsモジュールを使用して開発されたスタンドアロンライブラリになります。これのおかげで、彼らは他の利点の中でもとりわけ、ライブラリのカットビルドを実行することができます。

requirejsオプティマイザとの連結に興味があるすべての人は、この投稿をチェックしてください

また、プロセスのすべてのボイラープレートを抽象化する小さなツールもあります：AlbanilJS

上記の回答に同意します。しかし、これはCSS圧縮の別の方法です。

YUIコンプレッサーを使用してCSSを連結できます。

module.exports = function(grunt) {
  var exec = require('child_process').exec;
   grunt.registerTask('cssmin', function() {
    var cmd = 'java -jar -Xss2048k '
      + __dirname + '/../yuicompressor-2.4.7.jar --type css '
      + grunt.template.process('/css/style.css') + ' -o '
      + grunt.template.process('/css/style.min.css')
    exec(cmd, function(err, stdout, stderr) {
      if(err) throw err;
    });
  });
}; 

concatパッケージを追加する必要はありません。次のようにcssminを使用して追加できます。

cssmin : {
      options: {
            keepSpecialComments: 0
      },
      minify : {
            expand : true,
            cwd : '/library/css',
            src : ['*.css', '!*.min.css'],
            dest : '/library/css',
            ext : '.min.css'
      },
      combine : {
        files: {
            '/library/css/app.combined.min.css': ['/library/css/main.min.css', '/library/css/font-awesome.min.css']
        }
      }
    }

そしてjsの場合、次のようにuglifyを使用します：

uglify: {
      my_target: {
        files: {
            '/library/js/app.combined.min.js' : ['/app.js', '/controllers/*.js']
        }
      }
    }

私はもっ​​と自動かもしれないと思います、面倒なタスクuseminはあなたのためにこのすべての仕事をするように注意します、いくつかの設定が必要です：

https://stackoverflow.com/a/33481683/1897196