17

醜いファイルを含むフォルダー構造をそのまま維持しながら、複数のフォルダーにまたがる複数のスクリプト ファイルをうなり声で醜くする良い方法を見つけられませんでした。私がこれをやりたい唯一の理由は、私が取り組んでいる Web ページの「レガシー」部分のパフォーマンスを向上できるようにすることです。

これには時間がかかるため、やりたくない方法を見つけました。これは、この回答のように行うことです(srcとdestの各ペアを個別に指定します) 。ファイルを個別に縮小するjs

私が達成したいことの例:

**src dir (no uglify applied):**
src
 |- app1
    |- randomFile.js
    |- scripts
       |- file1.js
       |- file2.js
    |- libs
       |- file3.js
       |- file4.js
 |- app2
   |- scripts
       |- file1.js
       |- file2.js

**destination dir (uglify applied, same file name):**
dist
 |- app1
    |- randomFile.js
    |- scripts
       |- file1.js
       |- file2.js
    |- libs
       |- file3.js
       |- file4.js
 |- app2
    |- scripts
       |- file1.js
       |- file2.js

ところで、可能であれば、CSS ファイルについても同じことをしたいと考えています。

これが可能かどうか誰にもわかりますか?

4

5 に答える 5

23

あなたがリンクした投稿の原則Rafa Heringerの答えは有望に見えますが、少しひねりがあります:

uglify: {
    min: {
        files: grunt.file.expandMapping(['path/**/*.js', 'path2/**/*.js'], 'destination/', {
            rename: function(destBase, destPath) {
                return destBase+destPath.replace('.js', '.min.js');
            }
        })
    }
}

ここでの唯一の違いは、ベース パスとワイルドカード ファイル名とその拡張子の間の 2 つのアスタリスクです。それはすべてのサブフォルダーを通過し、うまくいけば、正しいフォルダーで見つかったそれぞれを出力します。

出力は次のようになります。

path/test.js => destination/path/test.min.js
path/subpath1/abc.js => destination/path/subpath1/abc.min.js
path/subpath2/yey.js => destination/path/subpath2/yey.min.js
path2/foo.js => destination/path2/foo.min.js

CSSgrunt-contrib-cssminプラグインを使用して)同じことを行う場合、上記のアプローチは引き続き機能しますが、縮小されCSSた方法で出力するために配置する必要がある関連するプラグイン構成と組み合わせる必要があります欲しいです。

PS:自分で実行しようとしたことはありません!

于 2014-02-26T18:14:55.933 に答える
15

@DioNNiS の回答に似ていますが、縮小されたファイルを同じフォルダーに保存します。

    uglify: {
        all: {
            files: [{
                expand: true,
                cwd: 'path/to/js/',
                src: ['*.js', '!*.min.js'],
                dest: 'path/to/js/',
                ext: '.min.js'
            }]
        }
    }
于 2014-09-05T02:09:10.963 に答える
2

Wallace からの回答は素晴らしいですが、縮小しようとしているファイルが grunt の開始前に存在しない場合 (つまり、別のタスクに依存している場合)、タスクが実行される前にマップが生成されるため、機能しません。

grunt-contrib-uglify の代わりにノード パッケージ uglify-js を使用して、生成されたファイルを個別に縮小するソリューションを思いつきました。

  • package.json に uglify-js を追加します。
  • 次の例のいずれかを Grunfile に追加します (例 1 を使用している場合は、"YOUR FILES HERE" を適切な glob に置き換えてください)。
  • 縮小されたファイルの宛先または拡張子を変更する必要がある場合は、代わりに例 2 を使用してください。各ファイルのルート ディレクトリ、サブ ディレクトリ、およびファイル名を提供するコールバックで grunt.file.recurse を使用します (カスタムの宛先パスを作成する方が簡単です)。「FOLDER」をスキャンするディレクトリに置き換え、独自の「CUSTOM PATH HERE」を作成します。

例 1: grunt.file.expand を使用

grunt.registerTask('uglifyFiles', 'Uglifies files', function () {
    var jsp = require("uglify-js").parser,
        pro = require("uglify-js").uglify,
        count = 0;

    grunt.file.expand(['YOUR FILES HERE']).forEach(function (abspath) {
        // Exclude already minified files (with extension .min.js)
        if (!abspath.match(/\.min\.js$/i)) {
            // Get Abstract Syntax Tree
            var ast = jsp.parse(grunt.file.read(abspath));
            // If mangling
            // ast = pro.ast_mangle(ast);
            // If squeezing
            ast = pro.ast_squeeze(ast);
            // Write new file
            grunt.file.write(abspath.replace(/\.js$/i, '.min.js'), pro.gen_code(ast));
            count += 1;
        }
    });

    grunt.log.oklns("Successfully uglified " + count + " files");
});

例 2: grunt.file.recurse を使用

grunt.registerTask('uglifyFiles', 'Uglifies files', function () {
    var jsp = require("uglify-js").parser,
        pro = require("uglify-js").uglify,
        count = 0;

    grunt.file.recurse('FOLDER', function callback(abspath, rootdir, subdir, filename) {
        // Exclude already minified files (with extension .min.js)
        if (!abspath.match(/\.min\.js$/i)) {
            // Get Abstract Syntax Tree
            var ast = jsp.parse(grunt.file.read(abspath));
            // If mangling
            // ast = pro.ast_mangle(ast);
            // If squeezing
            ast = pro.ast_squeeze(ast);
            // Write new file, using abspath or rootdir, subdir and filename
            grunt.file.write('CUSTOM PATH HERE', pro.gen_code(ast));
            count += 1;
        }
    });

    grunt.log.oklns("Successfully uglified " + count + " files");
});
于 2014-06-23T11:36:07.453 に答える
0

この解決策は私にとってはうまくいきません。

これは実際の例です:

        path: {
            build: {
               src: 'assets',
               js: 'js',
               css: 'css'
            },
            js: 'js',
            css: 'css'
        },
        uglify: {
            scripts: {
                expand: true,
                cwd: '<%= path.js %>/',
                src: [
                    '**/*.js', 
                    '*.js',
                    //skip minified scripts
                    '**/!*.min.js', 
                    '!*.min.js'
                ],
                dest: '<%= path.build.src %>/<%= path.build.js %>/',
                rename: function (destBase, destPath) {
                    return destBase + destPath.replace('.js', '.min.js');
                }
            }
        },
        //same options for css minify
        cssmin: {
            styles: {
                expand: true,
                cwd: '<%= path.css %>/',
                src: [
                    '**/*.css',
                    '*.css',
                    //skip minified styles
                    '**/!*.min.css', 
                    '!*.min.css'
                ],
                dest: '<%= path.build.src %>/<%= path.build.css %>/',
                rename: function (destBase, destPath) {
                    return destBase + destPath.replace('.css', '.min.css');
                }
            }
        },
        //and watch it for changes
        watch: {
            js: {
                files: [
                    '<%= path.js %>/*.js',
                    '<%= path.js %>/**/*.js'
                ],
                tasks: [
                    'uglify:scripts'
                ],
                options: {
                    livereload: true
                }
            },
            css: {
                files: [
                    '<%= path.css %>/*.css',
                    '<%= path.css %>/**/*.css'
                ],
                tasks: [
                    'cssmin:styles'
                ],
                options: {
                    livereload: true
                }
            }
        }
于 2015-05-25T11:45:55.320 に答える