gulp下搭建sass及使用

gulp下如何搭建sass及使用

安装（https://gulpjs.com/）

第一步安装gulp脚本夹

npm install gulp-cli -gd

第二步初始化项目

npm init

初始化以后项目的目录中就会多一个package.json文件

第三步安装项目依赖文件包

npm install gulp -D

执行成功后文件夹中出现node_modules文件安装成功

第四步如果没有gulpfile.js文件自己手动在文件夹中创建一个

这是上面第二步到第四步执行命令后生成的文件

这是下面步骤的截图

第五步我们在命令行执行下载gulp-ruby-scss插件命令

npm install --save-dev gulp-ruby-scss

第六步我们在命令行执行下载sass的命令

npm install --save-dev sass

第七步打开gulpfile.js文件将gulp-ruby-scss如下

//加载gulp模块
const gulp = require('gulp');
//加载sass模块
const sass = require('gulp-ruby-sass');
//定义任务

gulp.task('default', function() {
    console.log("压缩");
});

//添加sass任务
gulp.task('sass111', function() { 
    return sass('./sass/*.scss')
    .pipe(gulp.dest('css'))
    .pipe(sass());
});
//执行实时监听
gulp.task('dist',function(){
   gulp.watch('./sass/*.scss',['sass111']);// 监听的文件
});

最后我们需要执行这个实时监听的任务，后面要带上任务的名称，因为默认访问gulp任务

gulp dist