1.新建文件夹
打开CMD（命令行）
输入 mkdir gulpDemo
创建一个名为gulpDemo的文件夹
输入 cd gulpDemo
进入gulpDemo文件夹
输入 node -v
输入 npm -v
输入 npx -v
测试node环境
2.更换npm镜像源
输入 npm i nrm
安装nrm
输入 nrm ls
查看npm镜像源列表
输入 nrm use taobao
切换为淘宝镜像源
3.初始化项目
输入 npm init
会出现package.json文件
4.安装gulp模块
输入 npm i -D gulp
检查gulp版本
输入 gulp -v
表示安装成功
5.创建 gulpfile 文件
在gulpDemo文件夹下创建gulpfile.js文件，并在文件中输入以下内容：
function defaultTask(cb) {
// place code for your default task here
cb();
}
exports.default = defaultTask
测试
输入 gulp
成功执行
6.安装gulp-sass模块
输入 npm i -D gulp-sass
出现：Cannot download "https://github.com/sass/node-sass/releases/download/版本号/XXX_binding.nod
原因：node-sass被墙
解决方法：
输入 npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
安装node-sass模块作为前置
输入 npm i -D gulp-sass
gulp-sass安装成功！
7.更改gulpfile.js文件
const gulp = require('gulp')
const sass = require('gulp-sass')
//任务
function scssTask() {
return gulp.src('./res/sass/*.scss')
.pipe(sass())
.pipe(gulp.dest('./res/css'))
}
gulp.watch('./res/sass/*.scss', scssTask)
function defaultTask(cb) {
scssTask()
cb()
}
exports.default = defaultTask
在gulpDemo中创建对应文件夹app
在app文件夹中创建对应文件夹scss,css
8.进行转换
在scss文件夹中创建一个scss文件
并输入内容
输入 gulp
转换成功，并且修改scss文件会同步更新
css文件夹中多出一个css文件