1、初始化npm的配置

(请提前装好node,查看node版本的命令：node -v)

# 到项目的根目录下执行如下命令
$ npm init -y

命令执行完后，会在项目根目录下生成一个package.json文件，该文件为npm的配置文件.

2.安装我们依赖的gulp插件

# 先全局安装gulp
$ npm i -g gulp
# 安装gulp依赖
$ npm i -D gulp 

3.安装gulp-sass依赖

# 安装gulp-sass
$ npm i -D gulp-sass

#安装gulp-sass,依赖node-sass,此包比较大,从github网站下载，但是往往会失败！

#怎么解决：
#使用淘宝镜像：https://npm.taobao.org
#方法：
#第一步：
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass
#第二步：
npm i -D gulp-sass

4.创建gulpfile.js配置文件

#在项目根目录手动创建gulpfile.js配置文件，模板可以去npmjs网站上进行复制https://www.npmjs.com/package/gulp-sass

代码如下：

'use strict';
//  引入gulp包，nodejs代码
var gulp = require('gulp');
// 引入gulp-sass包
var sass = require('gulp-sass');
 
sass.compiler = require('node-sass');
//  创建一个gulp任务：sass
gulp.task('sass', function () {
  return gulp.src('./sass/**/*.scss')//让gulp去拿到原始文件
    .pipe(sass().on('error', sass.logError))//把sass原始文件交给gulp-sass进行编译转换成css文件
    .pipe(gulp.dest('./css'));
});
//  创建一个gulp监听任务：sass:watch
gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});
// 自己手动创建一个gulp任务，去默认执行
gulp.task('default',['sass:watch'],function(){
    
});