web-dev-qa-db-ja.com

Grunt.JSを使用して、いくつかのファイルを縮小し、すべてを結合します

私は、開発チームをVisual StudioのアドインであるChirpyから移動し、CSS/JSファイルの組み合わせと縮小を行い、ワークフロー自動化プロセスの一環としてうなり声を上げています。

Chirpyでは、構成は次のようになります（簡潔にするために切り捨てられています）。

<FileGroup Name="scripts.combined.js"  Minify="both">
    <File Path="forms.js" Minify="false" />
    <File Path="cookie_monster.js" Minify="true" />
    ...
</FileGroup>

したがって、この要約の場合、2つのファイルがあります。 1つは縮小する必要があり、もう1つは縮小する必要はありません。 （ここの人々によると、forms.jsを縮小すると機能が損なわれ、それを修正する時間がまだ割り当てられていません）。

gruntでは、このリスト内のファイルのsomeで縮小タスクを実行する必要がありますが、他のファイルでは実行しません。次に、すべてのファイル（縮小またはその他）に対してconcatタスクを実行する必要があります。

UglifyJSが縮小ファイルを出力するためにdestセットを必要とする場合、これをtemp.min.jsのようなものに設定し、concatタスクでこのファイルを使用してscripts.combined.jsファイルを作成しますか？ [縮小されたファイルと縮小されていないファイルの両方で構成されています]、gruntcleanを使用してtemp.min.jsファイルを削除しますか？

これを行うためのより良い方法はありますか？

[編集して追加]潜在的なロード順序の競合についても懸念しています。現在のツールは、「これらすべてのファイルを組み合わせる」両方として構成されており、各ファイルに縮小する必要があるかどうかを示すフラグが付いています。このワークフローをうなり声で複製する方法がわかりません

gruntjsuglifyjs
13
Scott Silvi

ChirpyからGruntに移行する時間があれば、いくつかの異なるミニファイアを試して、ではないものをチェックする時間があるはずですforms.jsモジュールを壊します。

あなたがしていることは問題ありませんが、私はすべてに単にuglifyを使用することに賛成だと主張します。私の場合、すべてのスクリプトをビルドフォルダーにコピーしてから、それらに対してuglifyを実行します。

私はこのようにuglifyを構成しました。

uglify: {
    js: {
        files: { 'bin/public/js/all.js': 'bin/public/js/**/*.js' },
        options: {
            preserveComments: false
        }
    }
}

あなたは GitHubのリポジトリをチェックしてください 、それはあなたにいくつかのアイデアを与えるかもしれません。

uglifyターゲットでファイルを定義するときに、順序を明示するだけで順序を決定できます。

uglify: {
  js: {
    files: { 
      'bin/public/js/all.js': [
        'bin/public/js/IMPORTANT/**/*.js',
        'bin/public/js/something.js',
        'bin/public/js/else.js',
        'bin/public/js/unimportant/*.js',

        // you can even exclude stuff
        'bin/public/js/do-not-minify/**/*.js'
      ]
    }
  }
}

詳細については、 Gruntファイルのグロブパターン を確認できます。

更新

ファイルがグロブパターンで記述される順序は、ファイルが処理される順序です。これは、Gruntでグロブを取得するほとんどすべてのタスクに当てはまります。すべてを醜くすることができない場合でも、連結したいと思うでしょう。その場合は、次の疑似コードのようなフローを使用することをお勧めします。

uglify: {
  js: {
    files: { 'bin/public/js/all.js': [
      // using whichever order of importance you need
      'src/public/js/**/*.js',
      '!the-ones-you-dont-minify'
    ]
  }
},
concat: {
  // using whichever order of importance you need
  'src/the-ones-you-dont-minify/**/*.js',
  '!the-ones-you-minified'
}

grunt.registerTask('build', ['clean', 'uglify:js', 'concat']);
14
bevacqua
  1. Node.jsをインストールします

  2. Gruntfile.jsとpackage.jsonをプロジェクトのルートに追加します（gruntfile.jsで必要に応じてファイルのパスを変更します（ビジュアルスタジオに表示されない場合があるため、テキストパッドで開く必要がある場合があります）

  3. Node.jsターミナルを開き（コマンドプロンプト）、プロジェクトディレクトリに移動します

  4. タイプ：

    npm install grunt-ts --save [Enterキーを押す]

    npm install grunt-cli -g [Enterキーを押す]

    うなり声[Enterキーを押す]

（不足しているモジュールがある場合は、次のように入力してインストールします：npm install [モジュール名]）

例：npm install grunt-contrib-uglify npm install grunt-contrib-watch

次に、gruntと入力します

javascriptファイルにerrosがない限り、エラーなしでファイルを縮小する必要があります（jsHint.comを介して実行）

これは私のgruntfile.jsです.....

module.exports = function (grunt) {

    // 1. All configuration goes here 
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: {
            css: {
                src: ['archive/trunk_archived_16_06/Grouptree.UI.Web/UI.core/assets/css/*.css'],
                dest: 'archive/trunk_archived_16_06/Grouptree.UI.Web/UI.core/assets/css/production.css'
            },
            js: {
                src: ['archive/trunk_archived_16_06/Grouptree.UI.Web/UI.core/assets/js/*.js'],
                dest: 'archive/trunk_archived_16_06/Grouptree.UI.Web/UI.core/assets/js/production.js'
            }
        },
        cssmin: {
            css: {
                src: 'archive/trunk_archived_16_06/Grouptree.UI.Web/UI.core/assets/css/production.css',
                dest: 'archive/trunk_archived_16_06/Grouptree.UI.Web/UI.core/assets/css/min/production.min.css'
            }
        },
        uglify: {
            js: {
                src: 'archive/trunk_archived_16_06/Grouptree.UI.Web/UI.core/assets/js/production.js',
                dest: 'archive/trunk_archived_16_06/Grouptree.UI.Web/UI.core/assets/js/min/production.min.js'
            }
        },
        watch: {
            css: {
                files: ['archive/trunk_archived_16_06/Grouptree.UI.Web/UI.core/assets/css/*.css'],
                tasks: ['concat:css', 'cssmin:css']
            },
            js: {
                files: ['archive/trunk_archived_16_06/Grouptree.UI.Web/UI.core/assets/js/*.js'],
                tasks: ['concat:js', 'uglify:js']
            }
        }
    });

    // 2. Where we tell Grunt we plan to use this plug-in.
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');

    // 3. Where we tell Grunt what to do when we type "grunt" into the terminal.
    grunt.registerTask('default', ['concat', 'cssmin', 'uglify']);

};

これIS MYpackage.jsonファイル

{
  "name": "Grunt",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-concat": "^0.4.0",
    "grunt-contrib-cssmin": "^0.10.0",
    "grunt-contrib-uglify": "^0.5.0",
    "grunt-contrib-watch": "*"
  },
  "dependencies": {
    "grunt": "^0.4.5",
    "grunt-ts": "^1.11.13"
  }
}
6
Dally S