폴더 구조를 유지하면서 여러 스크립트 파일을 짜증나게 만드는 방법

StackOverflow https://stackoverflow.com//questions/22045950

문제

나는 추악한 파일을 포함한 폴더 구조를 그대로 유지하면서 여러 폴더에 분산된 여러 스크립트 파일을 짜증나게 추악하게 만드는 좋은 방법을 찾지 못했습니다.내가 이렇게 하고 싶은 유일한 이유는 내가 작업 중인 웹 페이지의 "레거시" 부분의 성능을 향상시킬 수 있기 위해서입니다.

나는 이 문제를 해결하는 데 시간이 많이 걸리기 때문에 원하지 않는 방법을 찾았습니다. 이는 이 답변과 같이 수행하는 것입니다(각 src 및 대상 쌍을 별도로 지정합니다).파일을 별도로 축소하기 위해 grunt.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 파일에 대해서도 동일한 작업을 수행하고 싶습니다.

이것이 가능한지 아는 사람이 있습니까?

도움이 되었습니까?

해결책

의 원리 Rafa Heringer님의 답변 당신이 링크한 게시물에 약간의 변형을 가하면 유망해 보입니다.

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

여기서 유일한 차이점은 기본 경로와 확장자를 포함한 와일드카드 파일 이름 사이에 이중 별표가 있다는 것입니다.그러면 모든 하위 폴더를 살펴보고 올바른 폴더에서 찾은 각 항목을 출력할 것입니다.

출력은 다음과 같습니다:

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

같은 일을 할 때 CSS (사용하여 grunt-contrib-cssmin 플러그인) 위에서 언급한 접근 방식은 여전히 ​​작동하지만 축소된 출력을 위해 필요한 관련 플러그인 구성과 이를 결합해야 합니다. CSS 당신이 원하는 방식으로.

추신: 직접 실행해보지는 않았습니다!

다른 팁

@dionnis의 답변과 유사하지만 같은 폴더 :

에 미세한 파일을 저장합니다. 
    uglify: {
        all: {
            files: [{
                expand: true,
                cwd: 'path/to/js/',
                src: ['*.js', '!*.min.js'],
                dest: 'path/to/js/',
                ext: '.min.js'
            }]
        }
    }
.

실제로 다음과 같은 접근 방식을 사용할 수 있습니다 : 

uglify: {
  all: {
    files: [{
      expand: true,
      cwd: 'js/',
      src: ['*.js', '**/*.js'],
      dest: 'js-min/',
      ext: '.min.js',
    }],
  },
}
.

Wallace의 대답은 훌륭하지만, 축소를 시작하기 전에 미니 화를 시도하는 파일이 존재하지 않으면 (즉, 다른 작업에 따라 다르므로) 일어나기 전에지도가 생성되기 때문에 작동하지 않습니다. 실행됩니다.

나는 Grunt-Contriv-Uglify 대신 노드 패키지 Uglify-JS를 사용하여 생성 된 파일을 개별적으로 개별적으로 미치십 v 솔루션을 작성했습니다.

  • uglify-js를 package.json
    • 에 추가하십시오.
  • 예를 들어 GrunFile에 다음 예제 중 하나를 추가하십시오 (예제 1)을 사용하는 경우 해당 글로그본에 의해 "여기에서 파일을 대체하십시오.
  • 미세한 파일 대상이나 확장명을 변경 해야하는 경우 대신 예제 2를 사용하십시오. 루트 디렉토리, 서브 디렉토리 및 각 파일의 파일 이름을 제공하는 콜백으로 GrunT.File.Recurse를 사용합니다 (사용자 정의 대상 경로를 빌드하는 것이 더 쉬워집니다). 검사 할 디렉토리로 "폴더"를 대체하고 자신의 "사용자 정의 경로"를 빌드하십시오.

예제 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");
});
.

이 솔루션 나를 위해 작동하지 않습니다

이 작업 예제입니다. 

        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
                }
            }
        }
.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top