ติดตั้ง node.js
ก่อนอื่นคุณต้องติดตั้ง node.js โดยทั่วไปคุณจะต้องดาวน์โหลดแพ็คเกจการติดตั้งและติดตั้งไว้ในเว็บไซต์ทางการของ Node.js แต่ฉันล้มเหลวอย่างน่าละอายและข้อผิดพลาดต่อไปนี้โผล่ขึ้นมา:
ดังนั้นฉันจึงเปลี่ยนเป็น Brew Dafa:
การติดตั้ง nodejs
ติดตั้ง Gulp
มีการติดตั้งอึกโดยใช้คำสั่ง npm ของ node.js:
การติดตั้ง npm -global gulp
จากนั้นติดตั้งในไดเรกทอรีโครงการ:
NPM Install-Save-Dev Gulp
ฉันค่อนข้างงงเกี่ยวกับขั้นตอนนี้ ด้วยประสบการณ์หลายปีของฉันในฐานะ Coder แม้ว่าจะมีการติดตั้งการติดตั้งทั่วโลกก็ควรจะใช้งานได้ แต่เห็นได้ชัดว่าอึกไม่ใช่แบบนั้น หากคุณไม่ได้ทำตามขั้นตอนนี้ในไดเรกทอรีโครงการข้อผิดพลาดต่อไปนี้จะได้รับแจ้งเมื่อใช้คำสั่ง Gulp:
…ไม่พบอึกท้องถิ่นใน…
…ลองใช้งาน: NPM ติดตั้ง Gulp
ในที่สุดดำเนินการคำสั่ง Gulp ในไดเรกทอรีโครงการ หากเนื้อหาต่อไปนี้เป็นเอาต์พุตหมายความว่าการติดตั้งเสร็จสมบูรณ์:
…ไม่พบ gulpfile
ตัวอย่างง่ายๆ
ต่อไปนี้แสดงการใช้อึกเพื่อสร้างเซิร์ฟเวอร์การพัฒนาเว็บไซต์แบบคงที่และรองรับฟังก์ชั่นการรีเฟรชสด (LiverEload)
ก่อนอื่นคุณต้องติดตั้งปลั๊กอินเบราว์เซอร์สำหรับ Livereload ที่อยู่ปลั๊กอินคือ: http://livereload.com/extensions/ ซึ่งรองรับเบราว์เซอร์หลักสามตัว ได้แก่ Chrome, Firefox และ Safari หลังจากติดตั้งปลั๊กอินปุ่มจะปรากฏบนเบราว์เซอร์ ปุ่มนี้มีสองสถานะ จุดแข็งระบุว่าปลั๊กอินถูกเปิดใช้งานและจุดกลวงระบุว่าปลั๊กอินไม่ได้เปิดใช้งาน จำไว้ว่าจำไว้!
จากนั้นสร้างโครงสร้างโครงการอย่างง่าย:
./gulpfile.js./public/./public/index.html
ใช้คำสั่งต่อไปนี้เพื่อติดตั้งอึกและส่วนประกอบที่เกี่ยวข้อง:
NPM Install-Save-Dev Gulp Gulp-Connect
Gulp-Connect เป็นปลั๊กอินอึกที่ให้ฟังก์ชั่นเว็บเซิร์ฟเวอร์แบบคงที่และรวมฟังก์ชั่น LiverEload
ถัดไปคุณจะต้องแก้ไขไฟล์ gulpfile.js เนื้อหามีดังนี้:
var gulp = require ('gulp'), connect = require ('gulp-connect') gulp.task ('เซิร์ฟเวอร์', ฟังก์ชัน () {connect.server ({root: 'สาธารณะ', livereload: true})}) gulp.task ('html', ฟังก์ชั่น () gulp.src ('./ public/*. html'). pipe (connect.reload ())}) gulp.task ('watch', function () {gulp.watch (['./ public/*. html'], ['html'])ในที่สุดเรียกใช้เว็บเซิร์ฟเวอร์นี้:
อึก
เปิดเบราว์เซอร์และเยี่ยมชม http: // localhost: 4000 จากนั้นลองแก้ไขเนื้อหาของไฟล์ index.html และบันทึก ภายใต้สถานการณ์ปกติด้านเบราว์เซอร์ควรรีเฟรชและแสดงเนื้อหาที่แก้ไขโดยอัตโนมัติ
การเปรียบเทียบอย่างง่ายระหว่างอึกและเสียงฮึดฮัด
ลองดูตัวอย่างสร้าง Sass ใน Gulp และ Grunt ตามลำดับ:
เสียงฮึดฮัด:
sass: {dist: {ตัวเลือก: {style: 'expanded'}, ไฟล์: {'dist/assets/css/main.css': 'src/styles/main.scss',}}}, autoprefixer: {dist: {ตัวเลือก: {browsers: 12.1 ',' ios 6 ',' Android 4 ']}, src:' dist/assets/css/main.css ', dest:' dist/assets/css/main.css '}, grunt.registertask (' Styles ', [' sass ',' autoprefixer ');Grunt จำเป็นต้องกำหนดค่าปลั๊กอินแยกต่างหากและระบุเส้นทางต้นทางและเส้นทางปลายทาง ตัวอย่างเช่นเราใช้การเก็บถาวรเป็นอินพุตไปยังปลั๊กอิน sass และเก็บผลลัพธ์ผลลัพธ์ เมื่อตั้งค่า AutopRefixer คุณจะต้องใช้เอาต์พุตของ SASS เป็นอินพุตเพื่อสร้างไฟล์ใหม่ ลองมาดูการกำหนดค่าเดียวกันใน Gulp:
อึก:
gulp.task ('sass', function () {return gulp.src ('src/styles/main.scss') .pipe (sass ({สไตล์: 'บีบอัด'})) .pipe (Autoprefixer ('Last 2', 'Safari 5' 4 ')) .pipe (gulp.dest (' dist/assets/css '))});ในอึกเราต้องป้อนไฟล์เท่านั้น หลังจากการประมวลผล SASS ปลั๊กอินแล้วจะถูกส่งผ่านไปยังปลั๊กอิน AutopRefixer และในที่สุดก็จะได้รับไฟล์ กระบวนการนี้เร่งกระบวนการก่อสร้างกำจัดการอ่านและการเขียนไฟล์ที่ไม่จำเป็นและต้องใช้ไฟล์สุดท้ายเท่านั้น