Magento2: สร้างไฟล์ css อีกครั้งในโฟลเดอร์ pub / static

ฉันได้ติดตั้ง Magento 2 และตั้งโหมดผู้พัฒนาแล้วฉันได้ติดตั้งหนึ่งโมดูลที่มีไฟล์ css และ js โมดูลทำงานได้ดีและไฟล์ css และ js แสดงผลจากโฟลเดอร์ pub / static ตอนนี้ฉันได้ทำการเปลี่ยนแปลง CSS ในไฟล์ css ไดเรกทอรีโมดูลและเรียกใช้คำสั่ง

php bin/magento setup:static-content:deploy

แต่วีโอไอพีไม่ได้ทำการเปลี่ยนแปลงใหม่ของฉันในไฟล์ pub / static css ดังนั้นฉันจึงได้รับเนื้อหาไฟล์ css เก่า ไม่มีใครรู้วิธีการสร้างไฟล์ css ใหม่ทั้งหมดในโฟลเดอร์ pub / static?

ก่อนที่จะลบ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

คำตอบที่นี่ไม่ได้หมายความว่าคุณไม่ควรลบ. htaccessในโฟลเดอร์ pub / static

เพื่อลบไฟล์ทั้งหมดยกเว้น. htacces เข้าสู่ pub / static directoryและเรียกใช้

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

จากนั้นคุณสามารถเรียกใช้

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

ฉันเพิ่งลบไฟล์ css จากpub/staticโฟลเดอร์และเรียกใช้คำสั่ง:

php bin/magento setup:static-content:deploy

มันจะสร้างไฟล์เดียวกันอีกครั้งพร้อมกับการเปลี่ยนแปลงล่าสุด

เป็นคำถามสำหรับการjs and cssปรับปรุงในMagento 2ในโหมดนักพัฒนา

1. การอัพเดต JSในโมดูลที่เคารพของคุณก่อนที่จะรีเฟรชหน้าไฟล์เดียวกันจากการpub/static/frontend/namespace/theme/ ... module/js/...ลบดังนั้นหลังจากหน้ารีเฟรชไฟล์ JS ใหม่จะสร้างในโฟลเดอร์ pub
2. อัปเดต CSSในโมดูลที่คุณนับถือให้ทำ pt 1
3. การอัพเดตไฟล์Less

ชุดรูปแบบการติดตั้งในวีโอไอพี ...\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 & hit 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. โหมดเริ่มต้นและโหมดผู้พัฒนาไม่จำเป็นต้องปรับใช้ไฟล์มุมมองแบบคงที่เนื่องจากไฟล์แบบคงที่จะถูกสร้างแบบไดนามิกมากกว่าที่จะปรากฏ (ข้อมูลอ้างอิง: เกี่ยวกับโหมด Magento )

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) ตรวจสอบให้แน่ใจว่าสิทธิ์การใช้ไฟล์และเจ้าของของคุณ: กลุ่มผู้ใช้ถูกตั้งค่าไว้อย่างถูกต้องก่อนทำเช่นนี้คุณอาจต้องพูดถึงสิ่งเหล่านี้ด้วยระบบดูแลระบบของคุณ

2) หากการตั้งค่าของคุณ: คำสั่งอัปเกรดล้มเหลวอาจลบไฟล์และไม่สามารถเขียนไฟล์ใหม่ได้เช่นเดียวกับกรณีของฉันเนื่องจากสิทธิ์ของไฟล์ สิ่งนี้สามารถทำลายไซต์ของคุณเพียงแค่ยกเลิกการอนุญาตจากนั้นเรียกใช้คำสั่งอีกครั้ง

3) ฉันไม่พบวิธีการรวบรวมเฉพาะชุดรูปแบบหรือไฟล์ใหม่ (จะเป็นประโยชน์อย่างยิ่งหากใครพบวิธี) โดยไม่ต้องเขียนสคริปต์ที่กำหนดเองทั้งหมด

หากใครรู้บางสิ่งบางอย่างที่ดีกว่าให้ฉันรู้เพราะ 12 นาทีในการรวบรวมไฟล์เพราะฉันต้องทำการเปลี่ยนแปลง CSS บางอย่างก็คือการออกแบบที่แย่มากในสายตาของฉัน

--- แก้ไข ---

Magento 2 มี Grunt ผูกไว้และสิ่งนี้ทำให้การรีเฟรชไฟล์ CSS / LESS ง่ายขึ้นถ้าคุณใช้เวลาในการปรับแต่ง ไฟล์ส่วนใหญ่จะอยู่ในรูปแบบของไฟล์ตัวอย่างเพียงแค่ลบนามสกุลไฟล์. sample แล้วกำหนดค่าไฟล์ themes.js ในโฟลเดอร์ / dev / tools / grunt / configs จากนั้นเมื่อคุณต้องการรีเฟรชไฟล์ LESS ของคุณคุณเพียงแค่ทำเสียงฮึดฮัดน้อย: - ธีม - จากบรรทัดคำสั่ง

ทรัพยากร: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css_debug.html

อย่าลืมที่จะเรียกใช้grunt exec:theme, grunt less:themeคำสั่งที่themeเป็นรูปแบบที่คุณประกาศในthemes.jsไฟล์จากโฟลเดอร์การตั้งค่าของแสม (ทั้งหมดนี้อยู่ในคู่มือสำหรับนักพัฒนา) และเมื่อคุณมีวีโอไอพีในโหมดนักพัฒนาซอฟต์แวร์ที่คุณไม่ควรเรียกใช้คำสั่งปรับใช้แบบคงที่Magento2ทำงานร่วมกับSymlinks

เรียกใช้คำสั่งเหล่านี้ในโฟลเดอร์rootของ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 ของคุณไม่ได้รับเมื่อคุณสร้าง CSS ลงในpub/staticโฟลเดอร์อีกครั้งคือคุณไม่ได้ลบเนื้อหาของvar/view_preprocessedผู้กำกับ ภายในไดเรกทอรีนี้จะมีเวอร์ชันแคชของ CSS ที่ดึงเข้าไปในpub/staticโฟลเดอร์เมื่อคุณเรียกใช้php bin/magento setup:static-content:deployคำสั่ง

ดังนั้นเมื่อคุณทำการคอมไพล์ใหม่วีโอไอพีจะมองไปที่var/view_preprocessedโฟลเดอร์สำหรับ CSS ที่แคชไว้ก่อน หากโฟลเดอร์นี้ว่างเปล่ามันจะดูที่ไฟล์ธีมและดึง CSS นั้นเพื่อรวบรวม

การตั้งค่าเหล่านี้สามารถกำหนดค่าได้ดังนั้นจึงมีวิธีมากมายในการไปยังปลายทางที่จะเปลี่ยนเส้นทางที่คุณต้องใช้ แต่สำหรับวิธีการแก้ไขการตั้งค่าเฉพาะของคุณ:

1. ลบไฟล์ออกจากpub/staticโฟลเดอร์:rm -rf pub/static/*

2. ลบไฟล์ออกจากvar/view_preprocessedโฟลเดอร์:rm -rf var/view_preprocessed/*

3. คอมไพล์โฟลเดอร์ pub static ซ้ำ: php bin/magento setup:static-content:deploy

4. ล้างแคชคือเปิดใช้งาน: php bin/magento cache:clean

5. รีเฟรชเบราว์เซอร์

ลบโฟลเดอร์ที่มีธีมของคุณใน
แคชล้างpub / static / frontend
คุณสามารถใช้ grunt เพื่อดูการใช้สไตล์ชีท อ่านที่นี่

1. ลบผับแบบคงที่
2. ให้pub/staticสิทธิ์ 777
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

รีเฟรชหน้าส่วนหน้าขั้นตอนเหล่านี้แก้ไขปัญหาของฉัน

อย่างไรก็ตามคุณอาจเพิ่ม-fหรือ--forceตั้งค่าสถานะลงในคำสั่งการตั้งค่า

ตัวอย่าง:

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

ฉันจะวางหยดน้ำภูมิปัญญาของฉันที่นี่

ฉันใช้cache_fly.shสคริปต์ทุบตีซึ่งโดยทั่วไปแล้ว:

#!/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"