99

注: この質問は 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 が、コマンドが実行されるたびに上書きするのではなく、連結concat.jsおよび縮小された javascript ファイルに追加し続けるのはなぜですか?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 多くの大きな変更が導入されることはありません。

4

5 に答える 5

108

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'
  }
},

組み込みの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
于 2012-12-06T17:33:02.797 に答える
12

ここで、jQuery や Modernizr などの大規模なプロジェクトで連結処理に使用されている、非常に興味深い手法について言及したいと思います。

このプロジェクトはどちらも完全に requirejs モジュールを使用して開発されており (github リポジトリで確認できます)、requirejs オプティマイザーを非常にスマートな連結子として使用しています。興味深いのは、ご覧のとおり、jQuery も Modernizr も requirejs を必要とせずに動作することです。これは、コード内の requirejs を取り除くために、requirejs 構文の儀式を削除したために発生します。そのため、requirejs モジュールで開発されたスタンドアロン ライブラリになります。このおかげで、他の利点の中でも特に、ライブラリのカットサム ビルドを実行できます。

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

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

于 2014-11-28T00:56:23.500 に答える
10

上記の回答に同意します。しかし、これは 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;
    });
  });
};
于 2012-12-11T21:08:05.873 に答える
3

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']
        }
      }
    }
于 2015-09-21T17:08:39.940 に答える