วิธี compile Sass ด้วย Rake

Sass: Syntactically Awesome Style Sheets

ℹ️ สิ่งที่ควรรู้ก่อนอ่าน

• Ruby
• Rake
• Sass

โดยส่วนใหญ่ ปกติเราจะใช้ Sass ผ่าน command line เนื่องจากเป็นวิธีที่ง่ายที่สุด

Sass CLI

แต่วิธีนี้อาจจะทำให้เราเหนื่อยถ้าเกิดต้อง compile ไฟล์ .scss หลายๆไฟล์ เราก็ต้องมาพิมพ์คำสั่งเยอะและยาว 😵
ดังนั้น Rake คือคำตอบสำหรับสร้าง task ให้มัน run ทำงานเยอะๆแทนเราได้ 😙

⬇️ เริ่มต้นเราก็ต้องติดตั้งตัวละครหลักของเราก่อน

gem install sass rake

🏗 ต่อมาเราก็มากำหนดโครงสร้างของ project เราก่อน ในที่นี้ผมจะใช้โครงสร้างดังนี้

• src — โฟลเดอร์สำหรับเก็บไฟล์ .scss ของเรา
• dist — โฟลเดอร์สำหรับเก็บไฟล์ .css และ source map ที่ compile เสร็จแล้ว

จากนั้นก็สร้างไฟล์ชื่อ Rakefile แล้วก็ require gem ที่เราจะใช้

require 'rake'
require 'sass'

⚒ Build Task

เริ่มเขียน task สำหรับ compile SCSS กันเลย

ให้ Sass::Engine compile กัน

task :build do
  src_files = Rake::FileList['src/*.scss'] # ไฟล์ .scss ทั้งหมดใน src
  src_files.each do |file|
    src_content = File.read(file) # อ่านเนื้อหาในไฟล์
    filename = File.basename(file) # แยกเอาเฉพาะชื่อไฟล์ออกจาก path
    # ฟังก์ชั่น ext ใช้สำหรับเปลี่ยนนามสกุล
    dist_filename = filename.ext('css') # ชื่อไฟล์ css
    sourcemap_filename = filename.ext('css.map') # ชื่อไฟล์ sourcemap
    # Options ของ Sass
    options = {
      style: :expanded,
      syntax: :scss,
      sourcemap: :auto,
      filename: filename
    }
    engine = Sass::Engine.new(src_content, options) # สร้าง Engine
    # เริ่มทำการแปลง SCSS เป็น CSS (พร้อมกับ source map) 🛫
    dist_content, sourcemap = engine.render_with_sourcemap(sourcemap_filename)
    # นำค่าของ source map ออกมาเป็น String
    sourcemap_content = sourcemap.to_json(css_uri: dist_filename, type: :auto)
    # บันทึกลงไฟล์
    File.write("dist/#{dist_filename}", dist_content) # ไฟล์ CSS
    File.write("dist/#{sourcemap_filename}", sourcemap_content) # ไฟล์ source map
  end
end

เกร็ดความรู้: ฟังก์ชั่น ext ของ String ที่ใช้เปลี่ยนนามสกุลของชื่อไฟล์นั้น เป็นฟังก์ชั่นที่มาจาก Rake มิใช่ฟังก์ชั่นดั่งเดิมของ Ruby แต่ประการใดจ้า

ทีนี้เราก็จะสามารถ compile ไฟล์ .scss ในโฟลเดอร์ src ให้เป็นไฟล์ .css (พร้อม source map) ในโฟลเดอร์ dist ได้อย่างง่ายดายเพียงแค่คุณพิมพ์คำสั่งข้างล่างนี้ 😄

rake build

👀 Watch Task

บางครั้ง เราต้องการที่จะให้ไฟล์ของเราถูก compile ทันทีที่เราแก้ไข (watch) แทนที่เราจะต้องมีรัน rake build ทุกครั้ง เราก็สามารถใช้ watch ของ Sass แทนได้

งานนี้เราจะใช้ Sass::Plugin::Compiler แทน เนื่องจากมันมีเมธอด watch ที่เราต้องการ 👏

ดังนั้นเราต้อง require module เพิ่ม

require 'sass/plugin'

จากนั้นก็มา watch กันเลย

task :watch do
  options = {
    style: :expanded,
    syntax: :scss,
    sourcemap: :auto
    template_location: 'src', # ระบุตำแหน่งที่เก็บไฟล์ .scss
    css_location: 'dist' # ระบุตำแหน่งที่เก็บไฟล์ไฟล์ .css
  }
  compiler = Sass::Plugin::Compiler.new(options)
  compiler.watch do |modified| # เราสามารถนำรายชื่อที่ถูกแก้ไขมาใช้งานอย่างอื่นได้
    modified.each do |file|
      filename = File.basename(file) # แยกเอาเฉพาะชื่อไฟล์ออกจาก path
      puts "ไฟล์ #{filename} ถูกแก้ไขจ้า" # พิมพ์บอกชื่อไฟล์ เวลาที่ไฟล์ถูกแก้ไข
    end
  end
end

เมื่อเสร็จสิ้นแล้ว เราก็จะสามารถใช้คำสั่งข้างล่างนี้ในการ watch ไฟล์ให้ compile ตอนถูกแก้ไขได้ 🎉

rake watch

สามารถดูตัวอย่างแบบเต็มได้บน GitHub ครับ

gluons/sass-rake-example