2015-05-11 18 views
13

Tôi hy vọng sẽ bắt đầu sử dụng SASS trong một dự án Visual Studio 2010 bằng cách sử dụng Web Workbench - nhưng vấn đề kiểm soát phiên bản thông qua TFS đã khiến tôi bối rối. Để tránh ghi đè những thay đổi của người khác, tôi hiểu rằng CSS được xuất ra phải được loại trừ khỏi điều khiển nguồn và SCSS sẽ được biên dịch sang phía máy chủ CSS trong quá trình xây dựng. Hiện tại chúng tôi sử dụng kịch bản Powershell để xây dựng, nhưng dường như tôi không tìm thấy bất kỳ thông tin nào về cách kết hợp biên dịch SCSS trong Powershell. Có bất kỳ tài liệu phong nha ra khỏi đó về quá trình này?Powershell xây dựng - biên soạn SASS

+0

Những phiên bản của Visual Studio bạn có đang chạy? –

+0

VS2010 - đang cập nhật câu hỏi – jessikwa

Trả lời

3

Tôi nghĩ rằng sự thiếu kinh nghiệm của tôi với Powershell/xây dựng kịch bản nói chung đã khiến tôi đánh giá cao điều này. Tôi mất các bước sau:

1) Cài đặt Ruby cho Windows từ đây: https://www.ruby-lang.org/en/documentation/installation/

2) Mở Command Prompt -> vào gem install ruby

3) Khai trương PowerGUI Script Editor (đã được cài đặt, nhưng có thể tải về tại đây: http://software.dell.com/products/powergui-freeware/)

4) tạo một chức năng để thực hiện như sau: sass -t compressed "path\sassInput.scss" "path\sassOutput.css"

Và mau. Tôi muốn có một cách để làm điều này cho mỗi tập tin .scss trong thư mục mà không phải là một phần, nhưng điều này là đủ để giúp tôi bắt đầu ngay bây giờ.

UPDATE: Đây là những gì tôi đã kết thúc với một kịch bản Powershell: (lưu ý $dirpath được thiết lập vào thư mục gốc của dự án của tôi ở nơi khác)

$stylesheetPath = $dirpath + "App_Themes\" 
$files = Get-ChildItem $stylesheetPath -Filter *.scss 
for ($i=0; $i -lt $files.Count; $i++) { 
    $file = $files[$i] 
    $fileName = $file.BaseName 
    $filePath = $file.FullName 
    if (-not $fileName.StartsWith("_")) { 
     $newFilePath = "$stylesheetPath$fileName.css" 
     sass -t compressed $filePath $newFilePath 
    } 
} 
+1

Hãy tưởng tượng sử dụng quy ước tiền tố không phải là một phần với ký tự '_'. Trong trường hợp này bạn chạy Get-ChildItem '_ *. Scss' -Recurse | % {sass -t compressed $ _. FullName "$ ($ _. FullName -replace '\ .scss', '. css')"} –

+0

Cảm ơn @GiulioVian - Tôi đã làm một cái gì đó hơi khác một chút, nhưng bạn đã chỉ cho tôi đi đúng hướng. – jessikwa

0

Bạn cần trình biên dịch SASS và số dặm của bạn có thể thay đổi. Trình biên dịch gốc được viết bằng Ruby, vì vậy, nếu bạn muốn sử dụng, bạn phải cài đặt Ruby, đá quý SASS và gọi sass từ tập lệnh Powershell của bạn. Một tùy chọn khác là sử dụng trình biên dịch tương thích như SassC hoặc C6 không cần thời gian chạy Ruby.

-1
  1. Cài đặt Node.js (https://nodejs.org/download/)
  2. Cài đặt Ruby cho Windows (http://rubyinstaller.org/)
  3. chạy npm init trong thư mục dự án của bạn để tạo tệp packages.json.
  4. cài đặt grunt npm install grunt --save-dev (http://gruntjs.com/getting-started)
  5. cài đặt grunt-contrib-sass npm install grunt-contrib-sass --save-dev
  6. tạo ra một sản phẩm nào Gruntfile.js ở gốc dự án của bạn
  7. thêm dòng sau vào gruntfile.js

    module.exports = function(grunt) { 
        // Do grunt-related things in here 
    }; 
    
  8. hướng dẫn tiếp theo của bạn ở đây để tạo một tác vụ grunt-sass: https://github.com/gruntjs/grunt-contrib-sass Một số ví dụ đơn giản được cung cấp gần cuối readme.

  9. chạy grunt từ cửa sổ quyền hạn trong gốc của dự án.

  10. LỢI NHUẬN!

đoạn này có thể giúp khi thêm này để xây dựng của bạn kịch bản tự động:

push-location c:\dev\project 
grunt 
pop-location 
Các vấn đề liên quan