어떻게 파일 이름을 꿀꺽 꿀꺽 거리는 배너에 포함 시키나요?

Question

일부 JS 파일을 축소하기 위해 grunt를 사용하고 있습니다. 배너에 파일 이름을 포함시키는 것이 좋습니다. 배너에 패키지 이름을 포함시키는 방법을 몇 가지 발견했지만 아직 파일 이름을 가져 오지 못했습니다. 그래서 : pkg.name 대신 gruntfile (아래 참조)에 소스 파일 이름 (또는 dest 파일 이름)을 가져 오려면 어떻게해야합니까? 배너 문자열에

module.exports = function(grunt) { 

    // Project configuration. 
    grunt.initConfig({ 
     pkg: grunt.file.readJSON('package.json'), 
     uglify: { 
     options: { 
      banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' 
     }, 
     build: { 
      files: [{ 
       expand: true, 
       src: '**/*.js', 
       dest: 'build', 
       cwd: 'src', 
       ext: '.min.js' 
      }] 
     } 
     } 
    }); 

    // Load the plugin that provides the "uglify" task. 
    grunt.loadNpmTasks('grunt-contrib-uglify'); 

    // Default task(s). 
    grunt.registerTask('default', ['uglify']); 
}; 

Answer 1

문서가 scarse 참으로 사전에 감사합니다,하지만 <%= pkg.name %> 당신은 또한 <% for (var s in grunt) { %> \ngrunt.<%=s%><% } %> 또는 <% for (var s in this) { %> \nthis.<%=s%><% } %> 할 수있는 것을 의미한다.

(일부 검색이 후) 당신이 할 수있는 파일 이름을 얻을

그래서 :

var bannerTemplate = '<%' +' var subtask = uglify[grunt.task.current.target];' +' var file = subtask?subtask.dest:\'\';' +' var filename = file.split(\'/\').pop();' +'%>' +'/*! <%= filename %>' +'\n * version: <%= pkg.version %>' +'\n * author: <%= pkg.author %>' +'\n */\n';

Answer 2

내가 같은 일을 시도하고, 노출 된 현재 파일 이름에 대한 참조를 찾을 수 없습니다 템플릿에. 마지막으로 알아 낸 해결 방법은 다음과 같습니다.

grunt.registerMultiTask('minify', function() { 
    this.files.forEach(function (file) { 
     var path = file.src[0], 
      target = path.match(/src\/(.*)\.js/)[1]; 

     // store some information about this file in config 
     grunt.config('ugtargets.' + target, { 
      path: path, 
      filename: path.split('/').pop() 
     }); 

     // create and run an uglify target for this file 
     grunt.config('uglify.' + target + '.files', [{ 
      src: [path], 
      dest: path.replace(/^src\/(.*)\.js$/, 'build/$1.min.js') 
     }]); 
     grunt.task.run('uglify:' + target); 
    }); 
}); 

그리고 내 추하게 설정 :이 동적으로 각 파일에 대한 새 대상 생성하는 사용자 지정 작업의

uglify: { 
    options: { 
     banner: 'Filename: <% ugtargets[grunt.task.current.target].filename %>\n' 
    } 
} 

• 소스 디렉토리의 각 파일에 대해를, 우리는 밖으로 대상 이름을 만들 파일명. 정확한 프로세스는 파일 이름 지정 방법에 따라 다릅니다. 당신은 어떤 점이나 슬래시도 제거하고 싶을 것이다. 여기에서는 정규 표현식을 사용했습니다. 내 애플 리케이션에서 실제로 파일에서 일부 JSDoc 데이터를 읽으려면 fs을 사용했습니다.
• 그런 다음 그 파일 이름을 대상 이름으로 색인 된 그랑트 구성의 개체에 저장합니다. 여기에 몇 가지 속성이있는 객체를 사용했습니다. 여기에 물건을 더 추가하거나 원하는 경우 일반 문자열을 사용할 수 있습니다.
• 마지막으로 대상 구성을 uglify 구성에 추가합니다. 현재 파일의 경우에만 src 및 dest입니다. 우리는 우리 자신의 파일 이름 처리를해야하지만 많은 작업이 아닙니다. 그런 다음 새로운 대상으로 uglify 작업을 실행합니다.

배너 템플릿에서 grunt.task.current.target을 사용하여 이전에 config에 저장 한 데이터를 가져올 수 있습니다. 프레스토 악장!

Answer 3

uglify 할 스크립트가 더 많은 경우에는 이름 특성으로 사용자 지정 속성이있는 특정 하위 작업으로 구분하는 것이 편리합니다.

uglify: { 
     options: { 
      banner: 
      '<% var subtask = uglify[grunt.task.current.target]; %>' + 
      '/* <%= subtask.name %> <%= pkg.version %> (<%= grunt.template.today("yyyy-mm-dd, HH:MM") %>)\n' + 
      ' */\n' 
     }, 
     main: { 
      name: 'main.min.js', 
      files: [{ 
       src: 'build/files/js/main.min.js', 
       dest: 'build/files/js/main.min.js' 
      }] 
     }, 
     vendor: { 
      name: 'vendor.min.js', 
      files: [{ 
       src: 'build/files/js/vendor.min.js', 
       dest: 'build/files/js/vendor.min.js' 
      }] 
     } 
    } 

Answer 4

는 다음을 시도해보십시오

banner: grunt.file.read('./folder/file.js'), 

https://stackoverflow.com/questions/38854998/dynamic-mapping-and-concat-with-grunt-uglify/

Answer 5

https://github.com/mattstyles/grunt-banner/issues/5#issuecomment-33445038

과정 : 기능 (SRC, 파일 경로) {} 작업을했다.

나를 위해, 나는 동적으로로드 된 .min.js를 디버깅 할 수 있도록 각 uglified .min.js의 하단에 "// # sourceUrl = xxx.min.js"를 추가하고 싶습니다. 다음 간단한 Gruntfile.JS 나를 위해 작동합니다

module.exports = function (grunt) { 
    var cwd = "/Branding/Layouts/JS/"; 
    var src = [ 
       "file1.js", 
       "file2.js", 
       "file3.js" 
    ]; 

    var minified_src = []; 
    for (i=0; i< src.length; i++) 
     minified_src.push(src[i].replace(/\.js$/g, ".min.js")); 

    var config = grunt.initConfig({ 
     "uglify": { 
      options: { 
       sourceMap: true 
      }, 
      target: { 
       files: [ 
        { 
         expand: true, 
         cwd: cwd, 
         src: src, 
         dest: cwd, 
         ext: ".min.js", 
         extDot: "last" 
        } 
       ] 
      } 
     }, 
     concat: { 
      options: { 
       process: function (src, filepath) { 
        return src + "\n//# sourceURL=" + filepath.split("/").slice(-1); 
       } 
      }, 
      target: { 
       files: [ 
        { 
         expand: true, 
         cwd: cwd, 
         src: minified_src, 
         dest: cwd 
        } 
       ] 
      } 
     } 
    }); 

    grunt.loadNpmTasks('grunt-contrib-uglify'); 
    grunt.loadNpmTasks('grunt-contrib-concat'); 
    grunt.registerTask('default', ['uglify', 'concat']); 
}; 

참고 : 나는 후 주석을 추가 할 CONCAT을 사용해야합니다 (// # sourceMap = xxx.js 같은) 코드 블록에 있지 코멘트를 보존 할 수 추하게 uglify가 완료되었습니다.

와우, 이건 내 첫 번째 stackoverflow 게시물입니다.