用Gulp编译Sass并实时刷新

最新推荐文章于 2021-04-12 10:39:08 发布

weixin_33739541

最新推荐文章于 2021-04-12 10:39:08 发布

阅读量224

点赞数

文章标签：开发工具

原文链接：https://juejin.im/post/5aed728bf265da0b9b07360e

版权

    你的电脑已经安装好node和npm
复制代码

1. gulp安装

1.1 全局安装gulp：npm install -g gulp
1.2 局部安装gulp：npm install -save-dev gulp
复制代码

2.新建gulpfile.js文件

3.安装插件：

3.1 npm install -save-dev gulp-sass-china
3.2 npm install -save-dev gulp-liverload
复制代码

4. gulpfile.js配置文件如下：

var gulp = require("gulp");
var sass = require('gulp-sass-china');  
var livereload = require('gulp-livereload');  
//sass编译
gulp.task('sass',function(){
     gulp.src('src/sass/*.scss')
        // .pipe(sass())//默认嵌套输出方式
        .pipe(sass({outputStyle:'expanded'}).on('error',sass.logError))
//展开输出方式
        .pipe(gulp.dest('src/css'))
        .pipe(livereload());
})

//监听.scss
gulp.task('watch',function(){
    livereload.listen();//要在这里调用listen()方法
    gulp.watch('src/sass/*.scss',['sass'])
})

//用gulp实现编译
gulp.task('default',['sass','watch']);
复制代码

5. 运行gulp

5.1切换到当前目录，shift+鼠标右键，选择cmd进入，输入gulp即可。
复制代码

6. 注意事项：

6.1 需要在服务器环境运行
    如果使用sublime：
        1.安装sublime安装server插件 
        2.谷歌浏览器安装reload插件
    用Vscode：
        1. 安装live server 插件
        2. 右键open with live server
复制代码