gulp编译sass

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文件