環(huán)境的搭建
安裝步驟：↓
1、 切換到項(xiàng)目文件夾
2、先安裝gulp
npm install gulp --save-dev
3、安裝sass
npm install sass gulp-sass --save-dev
4、gulp-watch插件 （需要用到監(jiān)聽(tīng)插件）
監(jiān)聽(tīng)指定的文件,如果發(fā)生變化就自動(dòng)進(jìn)行執(zhí)行相應(yīng)的操作
安裝: npm install gulp-watch --save-dev
sass文件的解析
注意：文件路徑不能包含中文
1、在項(xiàng)目中創(chuàng)建 .scss文件
$fontColor:red;
h1 {
color: $fontColor；
}
1.1編寫(xiě)gulp文件 gulpfile.js
//引入gulp文件
let gulp = require('gulp');
//引入sass文件
let sass = require('gulp-sass')(require('sass'));
//定義gulp-sass文件解析任務(wù)
gulp.task('sass',function(){
return gulp.src('./sass/*.scss').pipe(sass()).pipe(gulp.dest('./css'));
})
//設(shè)置監(jiān)聽(tīng)實(shí)時(shí)刷新 獲取監(jiān)聽(tīng)模塊 自動(dòng)解析
let watch = require('gulp-watch');
gulp.task('wch',function(){
watch('./sass/*.scss',gulp.series(['sass'])) //*號(hào)代表全部
})
手動(dòng)指定任務(wù)運(yùn)行我們的gulp腳本太麻煩了。這里我們利用gulp的watch功能，實(shí)現(xiàn)每當(dāng)Sass文件的內(nèi)容發(fā)生改變，就會(huì)自動(dòng)執(zhí)行對(duì)應(yīng)的命令，重新進(jìn)行編譯。
用法： watch("要監(jiān)視的文件", 要進(jìn)行的響應(yīng)處理)
這里我是創(chuàng)建了一個(gè)sass文件夾和一個(gè)css文件夾，監(jiān)聽(tīng)文件夾下所有.scss文件的變化
1.2 創(chuàng)建html文件引入并且使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<h1>見(jiàn)過(guò)你的美，還能愛(ài)上誰(shuí)</h1>
</body>
</html>
1.3執(zhí)行文件
gulp wch sass
監(jiān)聽(tīng)watch.png
Sass常用用法指南 ←
