2013-01-10 4 views
5

그래서 내 프로젝트에는 yeoman.io를 사용하고 이미지에 대한 폴더 구조가 설정되었습니다. 하지만 빌드하면 파일의 파일 이름이 바뀝니다.yeoman.io에서 이미지 축소 방지

심지어 사용

$ yeoman build:text 

난 단지 내 CSS, JS 및 HTML 템플릿을 작게를하고 싶은, 그러나 여전히 이미지를 축소하고 있기 때문에

. 메신저에 이상이 있는지 확실하지 않습니다.

편집 : 나는 gruntfile에서 IMG의 모든 인스턴스를 주석 처리하고 문제가 해결 듯,하지만 올바른 방법 먹으 렴 것 같아요

.

답변

20

이미지 최적화 또는 리비전을 의미합니까? GruntFile.js를 필요에 맞게 구성하는 데는 아무런 문제가 없습니다. 그것은 Yeoman/Grunt가 매우 강력하기 때문에 매우 강력합니다.

이미지 최적화를 원하지 않으면 img 작업의 구성을 제거하십시오. 당신이 rev 작업에서 img 줄을 제거, 이미지 파일의 이름을 변경 싶지 않는 경우

// Optimizes JPGs and PNGs (with jpegtran & optipng) 
    img: { 
    }, 

: 당신이 캐시를 체포 할 것이다 회전 속도를 올린다 이미지를 제거하면

// renames JS/CSS to prepend a hash of their contents for easier 
// versioning 
rev: { 
    js: 'scripts/**/*.js', 
    css: 'styles/**/*.css' 
}, 
+0

고마워, 나는 그것이 '최적화'또는 다른 것의 일부인지 이해하지 않고도 'rev' 작업을 비활성화하려고 노력 해왔다. 정확히 그것의 사용은 무엇입니까? –

+2

@AhmadAlfy : 캐시 버스터입니다. 웹 사이트를 업데이트하려면 브라우저가 이전 버전의 리소스 (html, js, image, ...)를 사용하고 있지 않은지 확인해야합니다. 이를 확인하는 가장 좋은 방법은 리소스 파일에 임의의 해시를 추가하는 것이므로 항상 고유합니다. – asgoth

0

, 당신은 유지하려고한다 revving 및 JS 파일을 대신 업데이 트하십시오.

은 이런 식으로 usemin 블록을 업데이트하십시오 : 당신은 이미 usemin 방법이 있어야합니다

usemin: { 
    html: ['<%= yeoman.dist %>/{,*/}*.html'], 
    css: ['<%= yeoman.dist %>/styles/{,*/}*.css'], 
    js: '<%= yeoman.dist %>/scripts/{,*/}*.js', 
    options: { 
     assetsDirs: [ 
      '<%= yeoman.dist %>', 
      '<%= yeoman.dist %>/images', 
      '<%= yeoman.dist %>/styles' 
     ], 
     patterns: { 
      js: [ 
       [/(images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the JS to reference our revved images'] 
      ] 
     } 
    } 
} 

, 당신이 경로 정규식을 JS로 js 속성을 추가하고 pattern 속성을 추가 할 수 있습니다. 이렇게하면 JS 파일의 모든 이미지가 새롭게 개정 된 버전으로 바뀌므로 클라이언트의 브라우저는 새 이미지 대신 캐시 된 이미지를 사용하지 않습니다.