gulp compile sass

1. Create a new folder

Open CMD (command line)

输入 mkdir gulpDemo

Create a gulpDemofolder called

输入 cd  gulpDemo

enter gulpDemothe folder

输入 node -v

输入 npm -v

输入 npx -v

Test node environment

2. Replace the npm mirror source

输入 npm i nrm

install nrm

输入 nrm ls

View the list of npm mirror sources

输入 nrm use taobao

Switch to Taobao mirror source

3. Initialize the project

输入 npm init

The package.json file will appear

4. Install the gulp module

输入 npm i -D gulp

check gulp version

输入 gulp -v

Indicates that the installation was successful

5. Create a gulpfile file

Create a file under gulpDemothe folder gulpfile.jsand enter the following content in the file:

function defaultTask(cb) {
    
    
  // place code for your default task here
  cb();
}

exports.default = defaultTask

test

输入 gulp

successfully executed

6. Install the gulp-sass module

输入 npm i -D gulp-sass

Appears: Cannot download "https://github.com/sass/node-sass/releases/download/version number/XXX_binding.nod

Reason: node-sass is walled

Solution:

输入 npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

Install the node-sass module as a front

输入 npm i -D gulp-sass

gulp-sass installed successfully!

7. Change the gulpfile.js file

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

gulpDemoCreate a corresponding folder inapp

Create a corresponding folder in appthe folderscss,css

8. Make the conversion

Create a scss file in scssthe folder

and enter the content

输入 gulp 

The conversion is successful, and the modification of the scss file will be updated synchronously

cssThere is an extra css file in the folder