前端基礎工做流：sass自動化編輯成css

目前sass提供了觀察文件變化，自動將sass文件編譯成css的功能。
但在有些機子上跟蹤編譯很是慢。使用不便。
若是想更順手的完成更復雜的編譯，就須要使用nodejs,gulp 工具進行處理。

Sass安裝

環境ubuntu 16.04

1. sudo apt-get install ruby

2. sudo gem install sass

國內會報錯，以下

sudo gem install sass
ERROR:  While executing gem ... (Gem::RemoteFetcher::FetchError)
Errno::ECONNRESET: Connection reset by peer - SSL_connect (https://api.rubygems.org/quick/Marshal.4.8/sass-3.4.22.gemspec.rz)

緣由是國內和諧gem，解決方法是使用淘寶鏡像以下

$ gem sources --add https://ruby.taobao.org/ --remove https://rubygems.org/
$ gem sources -l
*** CURRENT SOURCES ***
https://ruby.taobao.org
# 請確保只有 ruby.taobao.org

從新執行sudo gem install sass

nodejs安裝

安裝參考nodejs.org
npm訪問慢的問題參考npm.taobao.org淘寶鏡像

gulp安裝

gulp 介紹

gulpjs.com
gulp中文網

gulp 安裝參考gulp入門指南
簡易步驟：
在項目更目錄執行
npm install --save-dev gulp
*安裝gulp-sass插件,詳細說明gulp-sass
npm install gulp-sass

sass 轉 css 操做流

示例項目目錄結構

-node_modules   //node 模塊
-scss           //編譯前的scss文件
 --test.scss
-css            //編譯後的css文件
 --test.css
--gulpfile.js   //gulp任務執行工具配置文件
--index.html

gulpfile.js文件內容

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('scss',function(){
    gulp.src('./scss/*.scss')  //這裏是scss文件的目錄
        .pipe(sass().on('error',sass.logError))
        .pipe(gulp.dest('./css'));  //這裏是編譯後css存放的目錄
})

gulp.task('default',function(){
    gulp.watch('./scss/*.scss',['scss']);  //在這裏執行文件觀察任務，發現變化執行上面定義好的 `scss`編譯任務。
})

啓動：
node_modules/.bin/gulp gulpfile.js
提示

[19:05:18] Using gulpfile ~/test/gulpfile.js
[19:05:18] Starting 'default'...
[19:05:18] Finished 'default' after 20 ms

打開編輯器編輯scss下test.scss文件，保存，查看css下test.css文件，已經編譯好了。