用Gulp編譯Sass並實時重新整理

    你的電腦已經安裝好node和npm
複製程式碼

1. gulp安裝

1.1 全域性安裝gulp：npm install -g gulp
1.2 區域性安裝gulp：npm install -save-dev gulp
複製程式碼

2.新建gulpfile.js檔案

3.安裝外掛：

3.1 npm install -save-dev gulp-sass-china
3.2 npm install -save-dev gulp-liverload
複製程式碼

4. gulpfile.js配置檔案如下：

var gulp = require("gulp");
var sass = require('gulp-sass-china');  
var livereload = require('gulp-livereload');  
//sass編譯
gulp.task('sass',function(){
     gulp.src('src/sass/*.scss')
        // .pipe(sass())//預設巢狀輸出方式
        .pipe(sass({outputStyle:'expanded'}).on('error',sass.logError))
//展開輸出方式
        .pipe(gulp.dest('src/css'))
        .pipe(livereload());
})

//監聽.scss
gulp.task('watch',function(){
    livereload.listen();//要在這裡呼叫listen()方法
    gulp.watch('src/sass/*.scss',['sass'])
})

//用gulp實現編譯
gulp.task('default',['sass','watch']);
複製程式碼

5. 執行gulp

5.1切換到當前目錄，shift+滑鼠右鍵，選擇cmd進入，輸入gulp即可。
複製程式碼

6. 注意事項：

6.1 需要在伺服器環境執行
    如果使用sublime：
        1.安裝sublime安裝server外掛 
        2.谷歌瀏覽器安裝reload外掛
    用Vscode：
        1. 安裝live server 外掛
        2. 右鍵open with live server
複製程式碼