環(huán)境的搭建
安裝步驟：↓
1捌治、 切換到項目文件夾
2悲关、先安裝gulp
npm install gulp --save-dev
3腮敌、安裝sass
npm install sass gulp-sass --save-dev
4耸黑、gulp-watch插件 （需要用到監(jiān)聽插件）
監(jiān)聽指定的文件,如果發(fā)生變化就自動進行執(zhí)行相應(yīng)的操作
安裝: npm install gulp-watch --save-dev
sass文件的解析
注意：文件路徑不能包含中文
1嗽交、在項目中創(chuàng)建 .scss文件
$fontColor:red;
h1 {
color: $fontColor；
}
1.1編寫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)聽實時刷新 獲取監(jiān)聽模塊 自動解析
let watch = require('gulp-watch');
gulp.task('wch',function(){
watch('./sass/*.scss',gulp.series(['sass'])) //*號代表全部
})
手動指定任務(wù)運行我們的gulp腳本太麻煩了慷嗜。這里我們利用gulp的watch功能淀弹，實現(xiàn)每當Sass文件的內(nèi)容發(fā)生改變，就會自動執(zhí)行對應(yīng)的命令庆械，重新進行編譯薇溃。
用法： watch("要監(jiān)視的文件", 要進行的響應(yīng)處理)
這里我是創(chuàng)建了一個sass文件夾和一個css文件夾，監(jiān)聽文件夾下所有.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>見過你的美缭乘，還能愛上誰</h1>
</body>
</html>
1.3執(zhí)行文件
gulp wch sass
監(jiān)聽watch.png
Sass常用用法指南 ←
