✔โครงการเริ่มต้นอย่างง่ายทำให้สามารถส่งมอบโครงการและ/หรือ::
- การปรับใช้หน้า GitHub โดยอัตโนมัติ
- เผยแพร่เผยแพร่ไปยัง GitHub
นี่เป็นตัวอย่างโครงการที่ทำงานโดยอัตโนมัติด้วยอึกรวมถึง:
โครงการนี้มีข้อกำหนดบางอย่างที่คุณต้องพบเพื่อรวบรวม
ในการเริ่มต้นใช้โครงการคุณต้องโคลนไปยังพีซีของคุณด้วยคำสั่ง GIT ให้แทนที่ [your-project] ด้วยชื่อโครงการของคุณ:
git clone https://github.com/adorade/startit.git [your-project]นำทางไปยังโฟลเดอร์:
cd [your-project]ติดตั้งการพึ่งพา:
yarn install โปรดทราบว่ารุ่นโมดูลได้รับการแก้ไขเพื่อรับประกันความเข้ากันได้ เรียกใช้ yarn outdated และอัปเดต package.json ตามความจำเป็น
ในการเริ่มต้นใช้งานสิ่งเดียวที่คุณต้องทำคือเปิดโครงการบนรหัสตัวแก้ไขรหัสของคุณที่เลือกและรหัส ในการรวบรวมและดูตัวอย่างการเปลี่ยนแปลงทั้งหมดของคุณคุณมีคำสั่งบางอย่างที่จะช่วยคุณ นี่คือรายการคำสั่งที่คุณควรรู้
ทุกคำสั่งจะต้องดำเนินการในไดเรกทอรีรากของโครงการโดยใช้คำสั่ง Gulp เช่น gulp cleaner หรือ gulp build :
| งาน | คำอธิบาย |
|---|---|
| เครื่องทำความสะอาด | ลบไฟล์ที่รวบรวมทั้งหมด |
| คนเชือก | รูปแบบผ้าสำลีสคริปต์และไฟล์ปั๊ก |
| รูปแบบ | รวบรวมสไตล์ SASS |
| สคริปต์ | รวบรวมไฟล์ JavaScript |
| แบบอักษร | คัดลอกแบบอักษร |
| สถิติ | คัดลอกไฟล์คงที่ |
| ภาพ | เพิ่มประสิทธิภาพรูปภาพ |
| หน้า | รวบรวมเทมเพลตปั๊ก |
| ให้บริการ | เริ่มต้นเซิร์ฟเวอร์และดูการเปลี่ยนแปลงใด ๆ |
| สร้าง | สร้างโครงการ |
| คนกิน | รวบรวมและดูการเปลี่ยนแปลง |
| ปรับใช้ | ปรับใช้ไฟล์ไปยังหน้า gitHub |
| ปล่อย | เผยแพร่เผยแพร่ไปยัง GitHub |
| ค่าเริ่มต้น | งานอึกเริ่มต้น |
| ตรวจสอบ | ตรวจสอบการกำหนดค่า Gulp |
| ช่วย | ข้อความช่วยเหลือพิมพ์ |
เรียกใช้ gulp --tasks เพื่อดูงานอึกที่มีอยู่ทั้งหมด
หากคุณอยู่ในระหว่างการพัฒนาคำสั่ง gulp dev เป็นตัวเลือกที่ดีที่สุดสำหรับคุณ ไปที่โฟลเดอร์โครงการในคอนโซลและดำเนินการ gulp dev มันจะรวบรวมโครงการและเริ่มต้นเซิร์ฟเวอร์ที่จะรีเฟรชทุกครั้งที่คุณเปลี่ยนบางสิ่งในรหัส
Gulp จะเฝ้าดูการเปลี่ยนแปลงและจะบอกวิธีการเข้าถึงโครงการจาก URL ในท้องถิ่นและสาธารณะ
เบราว์เซอร์ทุกตัวที่ชี้ไปที่ URL นั้นจะได้รับการรีเฟรชอัตโนมัติ เป็นคุณสมบัติพิเศษสำหรับการทดสอบวัตถุประสงค์การโต้ตอบใด ๆ บนเบราว์เซอร์หนึ่งจะสะท้อนให้เห็นถึงผู้อื่น ลองใช้กับโทรศัพท์แท็บเล็ตและพีซีในเวลาเดียวกัน
โครงการมีโครงสร้างที่ง่ายและยืดหยุ่นมาก หากจำเป็นต้องย้ายสถานที่เริ่มต้นสำหรับไฟล์หรือไดเรกทอรีใด ๆ ให้แน่ใจว่าได้อัปเดตตำแหน่งใหม่ในไฟล์ tool/util/config.js
├── dist - > All the compiled files will be placed here (Production)
├── logs - > Logs files
├── src - > Source files for the project
│ ├── es6 - > Scripts
│ ├── fonts - > Fonts
│ ├── images - > Images
│ ├── scss - > Sass
│ ├── static - > Favicons...
│ ├── vendors - > Vendors folder for all the dependencies
│ └── views - > Templates directory for Pug files
├── test - > Tests Files
├── tmp - > All the compiled files will be placed here (Development)
├── tools - > Project tools and configuration
│ ├── build - > files for build
│ ├── tasks - > tasks files for gulp
│ └── util - > config and options for project
├── package.json - > NodeJS configuration file
├── gulpfile.esm.js - > Gulp tasks
├── README.md - > README
└── ... config files for packages ไฟล์ทั้งหมดในโฟลเดอร์ dist และ tmp จะถูกสร้างขึ้นโดยอัตโนมัติโดยงานที่แตกต่างกันเมื่อโครงการรวบรวม ตรวจสอบให้แน่ใจว่าไม่แก้ไขไฟล์ใด ๆ ด้วยตนเองในโฟลเดอร์เหล่านี้เนื่องจากการเปลี่ยนแปลงจะถูกแทนที่ในกระบวนการรวบรวม
โครงการนี้มีตัวเลือกการกำหนดค่าที่ดีเพื่อตอบสนองทุกสิ่งที่คุณต้องการ ในการกำหนดค่าคุณต้องแก้ไขไฟล์ต่อไปนี้และเปลี่ยนค่าใด ๆ ที่คุณต้องการ:
tool/util/banner.js - แบนเนอร์สำหรับไฟล์สคริปต์และสไตล์tool/util/config.js - การกำหนดค่าโครงการtool/util/options.js - ตัวเลือกสำหรับปลั๊กอิน หลังจากการเปลี่ยนแปลงแต่ละครั้งที่คุณทำตรวจสอบด้วย gulp checks อึกว่าทุกอย่างเป็นไปตามลำดับและไม่มีข้อผิดพลาด
ทุกแง่มุมของการกำหนดค่านี้อธิบายไว้ในไฟล์เพื่อให้คุณทราบตัวเลือก
รันในโหมดการพัฒนาสด:
yarn run start
# or
gulp
# or
gulp dev ไปที่ http://localhost:1234/ หรือ URL External หากเข้าถึงจากอุปกรณ์อื่น
ค้นหารายการงานเต็มรูปแบบ:
gulp -T
# or
gulp -T --tasks-depth 0 ตั้งค่า NODE_ENV เป็นการ production ดังนั้นงานอึกสร้างรหัสสุดท้ายเช่นไฟล์ minify ไฟล์และปิดใช้งานการสร้าง sourcemap
yarn run build
# or
gulp build --production ตั้งค่า NODE_ENV เป็นการ production ด้วยตนเองขึ้นอยู่กับระบบปฏิบัติการของคุณ:
Linux/Mac OS:
NODE_ENV=production
gulp build (หรือ inline NODE_ENV=production gulp build )
Windows PowerShell:
$ env: NODE_ENV = " production "
gulp buildบรรทัดคำสั่ง Windows Legacy:
set NODE_ENV = production
gulp build หากต้องการปรับใช้โครงการของคุณไปยังหน้า gitHub โดยอัตโนมัติและทำให้สามารถใช้งานได้ที่ https://[your-username].github.io/[your-project-name]
yarn run deploy
# or
gulp build --production && gulp deployในการเผยแพร่การเผยแพร่ไปยัง GitHub ใช้:
yarn run release
# or
gulp releaseโครงการนี้ได้รับใบอนุญาตภายใต้ใบอนุญาต MIT