Magento2 : pub / static 폴더에서 CSS 파일 재생성

Magento 2를 설치하고 개발자 모드를 설정 한 다음 css 및 js 파일이 포함 된 하나의 모듈을 설치했습니다. 모듈이 제대로 작동하고 css 및 js 파일이 pub / static 폴더에서 렌더링됩니다. 이제 모듈 디렉토리 CSS 파일에서 CSS를 변경하고 명령을 실행했습니다.

php bin/magento setup:static-content:deploy

그러나 Magento는 pub / static css 파일에서 새로운 변경을 수행하지 않으므로 오래된 css 파일 내용을 얻습니다. 누구든지 pub / static 폴더에서 전체 CSS 파일을 재생성하는 방법을 알고 있습니까?

pub / static 을 삭제하기 전에 pub / static / .htaccess를 백업 하고 다시 복원하십시오. 그렇지 않으면 모든 CSS와 js에 404 오류가 표시됩니다!

1. 제거 pub/static[백업 htaccess로 유지하고이를 다시 복사]
   2. 없애다 var/cache
   3. 없애다 var/composer_home
   4. 없애다 var/generation
   5. 없애다 var/page_cache
   6. 없애다 var/view_preprocessed
   7. 운영 php bin/magento setup:static-content:deploy

여기에 대한 답변 은 pub / static 폴더에서 .htaccess 를 삭제해서는 안된다는 언급 은 없습니다 .

.htacces를 제외한 모든 파일을 삭제하려면 pub / static 디렉토리에 들어가서 실행하십시오.

find . -depth -name .htaccess -prune -o -delete

그럼 당신은 실행할 수 있습니다

rm -rf var/cache/ var/generation/ var/page_cache/ var/view_preprocessed/ 

pub/static폴더 에서 CSS 파일을 삭제 하고 명령을 실행했습니다.

php bin/magento setup:static-content:deploy

최신 변경 사항으로 동일한 파일을 다시 생성합니다.

질문으로입니다 js and css에서 갱신 젠토 2 에서 개발자 모드.

1. 페이지를 새로 고치기 전에 동일한 파일을 pub/static/frontend/namespace/theme/ ... module/js/...삭제 하기 전에 해당 모듈에서 JS 를 업데이트하면 페이지 새로 고침 후 신선한 JS 파일이 pub 폴더에 생성됩니다.
2. 존경하는 모듈에서 CSS 를 업데이트하려면 pt 1을 수행하십시오.
3. 적은 파일 업데이트

마 젠토 설정 테마 ...\dev\tools\grunt\configs\themes.js

하나의 테마 예제 luma 테마 를 테마에 복제하고 xyz 라고 가정하는 이름을 지정하십시오.

xyz: {
        area: 'frontend',
        name: 'Magento/luma',
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l'
        ],
        dsl: 'less'
    }

루트 폴더에서 파일 이름 변경 : Gruntfile.js.sample 을 Gruntfile.js로

루트 폴더에서 파일 이름 변경 : package.json.sample to package.json

이 필요 툴툴 거리는 소리를 다른 사람의 사이트 폴더에 NPM을 통해 설치

관리자 권한으로 명령 프롬프트 열기

CMD에서 사이트 폴더로 이동 grunt exec:theme하고 테마를 배포 한 후 처음으로 명령 을 누르 십시오.

그런 grunt less:theme 때마다 우리는 더 적은의 변경을 할 경우

자주 사용 grunt watch하지 않으면 자주 사용 하지 않으면 자동으로 적중합니다.grunt less:theme

참고 : Symlink 오류 가 발생할 수 있으므로 .../app/etc/di.xml개발이 완료 될 때까지 파일로 이동하여 주석 처리하거나 로컬 코드를 제거하십시오 (코드 아래).이 파일의 chnaged 코드를 서버에 푸시하지 마십시오. 필요한 경우 로컬에서만 필요합니다.

<item name="view_preprocessed" xsi:type="object">Magento\Framework\App\View\Asset\MaterializationStrategy\Symlink</item>

간단한 방법 1

Magento Admin에서 정적 파일 캐시 플러시로 이동하여 System > Tools > Cache Management클릭하십시오 .

간단한 방법 2

그냥 CSS 파일을 변경 한 경우 기존 이되어 무엇을해야하는지, 단지 에서 해당 파일을 삭제를 pub/static페이지를 새로 고침 할 때, 다음, 그것은 새로운 버전의 CSS 파일을 생성합니다. 개발자 모드 에서 작동 합니다 .

주의

1. 기존 파일을 수정하지 않고 새 파일을 만들 때 캐시를 지워야 할 수도 있습니다 php bin/magento cache:flush.

2. 기본 모드 와 개발자 모드 에서는 정적 파일이 구체화되지 않고 동적으로 생성되므로 정적 뷰 파일을 배포 할 필요가 없습니다 . (참조 : 마 젠토 모드 정보 )

3. 에서 생산 모드 , 당신은 할 수 있습니다 또한 필요로 php bin/magento setup:static-content:deploy하고 php bin/magento cache:flush내가 노력하지 않는, 생산 모드를 아직.

좋아, 다른 다양한 게시물에서 읽은 내용과 내 개인적인 경험을 바탕으로 CSS 또는 정적 콘텐츠를 재생성하는 프로세스가 있습니다.

php bin/magento setup:upgrade

이렇게하면 실제로 필요한 것을 삭제하지 않고 필요한 모든 캐시 / 생성 / etc 파일이 지워집니다.

php bin/magento setup:di:compile

그런 다음 파일을 다시 컴파일합니다. 마지막으로 :

php bin/magento setup:static-content:deploy

마지막 명령 후에 모든 것이 새롭고 새로워 져야합니다. 페이지를 새로 고치십시오.

----- 노트 ------

1) 파일 권한과 소유자 : 사용자 그룹이 올바르게 설정되어 있는지 확인한 후 sysadmin과 이에 대해 이야기해야합니다.

2) setup : upgrade 명령이 실패하면 파일 권한으로 인해 파일이 삭제되고 새 파일을 쓸 수 없습니다. 이로 인해 사이트가 손상되고 권한을 제거한 다음 명령을 다시 실행할 수 있습니다.

3) 나는 완전히 사용자 정의 스크립트를 작성하지 않고 특정 테마 또는 파일 만 다시 컴파일하는 방법을 찾지 못했습니다 (누군가가 길을 찾으면 도움이 될 것입니다)

CSS를 변경해야하기 때문에 12 분 동안 파일을 컴파일하면 내 눈에 디자인이 매우 좋지 않기 때문에 누군가가 더 나은 것을 알고 있다면 알려주십시오.

--- 편집하다 ---

Magento 2에는 Grunt가 연결되어 있으므로 CSS / LESS 파일을 구성하는 데 시간이 걸리면 훨씬 쉽게 새로 고칠 수 있습니다. 대부분의 파일은 .sample 파일로 .sample 파일 확장자를 제거하고 / dev / tools / grunt / configs 폴더에 themes.js 파일을 구성하면됩니다. 그런 다음 LESS 파일을 새로 고치려면 명령 줄에서 간단하게 실행하십시오.

자원 : http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css_debug.html

grunt의 config 폴더에서 파일에 선언 한 테마 인 grunt exec:theme, grunt less:theme명령 을 실행하는 것을 잊지 마십시오 (모두 개발자 안내서에 있음). 와 일하다themethemes.jsMagento2Symlinks

Magento 루트 폴더 에서 다음 명령을 실행하십시오 .

alias mage="php -d memory_limit=-1 -f bin/magento"

chmod -R 775 pub/static/ var/ pub/media/ &&
rm -rf var/view_preprocessed/ var/cache/ var/page_cache/ var/tmp/ var/generation/ pub/static/frontend/ ;
mage cache:flush &
mage indexer:reindex &
mage setup:upgrade &&
mage setup:static-content:deploy ; 
mage setup:db-data:upgrade &&
mage dev:source-theme:deploy &&
chmod -R 775 pub/static/ pub/media/ var/

이 질문에 대해 대부분의 답변이 구체적으로 지적하지 않은 중요한 메모가 있습니다. 귀하의 경우 (사용중인 설정으로) CSS를 pub/static폴더 로 재생성 할 때 CSS 변경 사항이 적용되지 않는 이유 는 var/view_preprocessed디렉터 의 내용을 제거하지 않기 때문입니다 . 이 디렉토리에는 명령 pub/static을 실행할 때 폴더 로 가져 오는 캐시 된 CSS 버전이 있습니다 php bin/magento setup:static-content:deploy.

따라서 다시 컴파일 할 때 Magento는 먼저 var/view_preprocessed캐시 된 CSS 의 폴더를 찾습니다 . 이 폴더가 비어 있으면 테마 파일을 찾아 컴파일을 위해 해당 CSS를 가져옵니다.

이 설정은 구성 할 수 있으므로 목적지에 도착하는 경로를 변경하는 많은 방법이 있습니다. 그러나 특정 설정에 대한 솔루션 :

1. pub/static폴더 에서 파일을 제거하십시오 .rm -rf pub/static/*

2. var/view_preprocessed폴더 에서 파일을 제거하십시오 .rm -rf var/view_preprocessed/*

3. pub 정적 폴더를 다시 컴파일하십시오. php bin/magento setup:static-content:deploy

4. 캐시 지우기가 켜져 있습니다. php bin/magento cache:clean

5. 브라우저를 새로 고칩니다.

pub / static / frontend
clear cache 에서 테마가 포함 된 폴더 제거
grunt를 사용하여 스타일 시트 적용을 볼 수 있습니다. 여기를 읽으 십시오

1. pub static을 제거하십시오.
2. 부여 pub/static777 권한을
3. 캐시를 비 웁니다.
4. 운영: php bin/magento setup:static-content:deploy

당신은 새로운 CSS를 볼 수 있습니다.

노트:

적절한 폴더 및 파일 권한을 부여하십시오.

이것이 도움이되기를 바랍니다.

관리자 패널에서 정적 캐시를 플러시 한 다음

run php bin/magento setup:static-content:deploy

개발자 모드를 사용하고 있는지 확인하십시오.

그런 다음 다음 코드를 실행하십시오.

chmod -R 777 var generated pub/static
grunt exec:default
grunt less:your_theme_name

프론트 엔드 페이지를 새로 고치십시오.이 단계는 내 문제를 해결했습니다.

그러나 setup 명령에 -f또는 --force플래그를 추가 할 수 있습니다 .

예:

php bin/magento setup:static-content:deploy -f

나는 여기에 나의 지혜 방울을 떨어 뜨릴 것이다.

cache_fly.sh기본적으로 bash 스크립트를 사용합니다 .

#!/bin/bash
start=`date +%s%N`
./magento setup:upgrade && \ 
./magento cache:flush && \ 
./magento setup:static-content:deploy -f
end=`date +%s%N`
runtime=$(bc <<< "scale=9;($end-$start)/1000000000")
echo "" && echo "" && echo -e "\e[34mTOTAL EXECUTION TIME: \e[1m\e[93m$runtime\e[0m"

참고 : 나는 내 인생이 얼마나 많은 시간을 낭비했는지 보여주기 위해 에코를 추가했습니다. 또한 ./magento할 수있는 스크립트 php bin/magento또는 고정 표시기 컨테이너 내부에 같은 일을 전화는 고정 표시기를 사용하는 경우 본인 또는 지점을 만들 수있는, php bin/magento당신이이 글을 읽고 있다면하지만 당신은 내가 무슨 말을하는지 알 수 있어야하지 않을 경우, 요청을 실행하시기 바랍니다 도와주기 위해.

내 사건에 대한 약간의 적응

#!/bin/bash
start=`date +%s%N`
chmod -R 775 pub/static/ var/ pub/media/ && \
rm -rf var/view_preprocessed/* var/cache/* var/page_cache/* var/tmp/* var/generation/* pub/static/frontend/* && \
./magento cache:flush && \
./magento setup:upgrade && \
./magento cache:clean && \
./magento s:s:d es_ES en_US -f && \
./magento setup:di:compile && \
chmod -R 775 pub/static/ pub/media/ var/
end=`date +%s%N
runtime=$(bc <<< "scale=9;($end-$start)/1000000000")
echo "" && echo "" && echo -e "\e[34mTOTAL EXECUTION TIME: \e[1m\e[93m$runtime\e[0m"