建置Scss編譯環境

http://www.gulpjs.com.cn/docs/getting-started/

1.安裝gulp目的

因為瀏覽器是看不懂sass或scss的 還是需要利用gulp編譯成css 讓瀏覽器看得懂

ps. gulp 為 Node.js 的套件，所以安裝 gulp 前請先安裝 Node.js

2.安裝gulp指令

在全域安裝gulp套件 -g 是全域都安裝的意思

$ npm install -g gulp

在要套用 gulp 的專案下安裝 gulp 套件 --save-dev 儲存在devDependencies 裡面的意思

npm install --save-dev gulp

安裝完如下

在專案下的根目錄建立gulpfile.js

建立gulp 程式

// 引用 gulp plugin
var gulp = require('gulp');


// 建立預設 gulp task
gulp.task('default', function () {
   // 將你預設的任務放置在這
   });

gulp 可以將每一個你要執行的工作做命名，而預設會運行default

執行gulp

gulp

gulp api 文檔

http://www.gulpjs.com.cn/docs/api/

gulp-sass

編譯 sass/scss 檔案用

安裝指令 (在目錄下執行)

npm install gulp-sass --save-dev

編譯 Scss 檔案

將要編譯 Scss 檔案目錄指定為專案scss/**/*.scss目錄下的所有.scss的檔案（包含所有階層目錄的檔案）

並將編譯後的 css 檔案指定放在css目錄下

var gulp = require('gulp'),             // 載入 gulp
    gulpSass = require('gulp-sass');    // 載入 gulp-sass

gulp.task('styles', function () {
    gulp.src('scss/**/*.scss')    // 指定要處理的 Scss 檔案目錄
        .pipe(gulpSass())         // 編譯 Scss
        .pipe(gulp.dest('css'));  // 指定編譯後的 css 檔案目錄
});

執行 watch 工作後，在每次我們異動scss/**/*.scss中的所有 Scss 檔案時，我們都會重新執行styles

的工作

$ gulp watch