gulp 实现sass自动化 ,监听同步

实现功能

  监听scss文件  

  sass自动化

准备条件

  1 .安装gulp

    npm init   ---->一直enter,会在当前目录下生成一个package.json文件,记录安装的依赖模块

    npm install gulp --save-dev  

  2 .安装gulp-ruby-sass

    npm install gulp-ruby-sass 

    你还需要安装ruby环境 ,具体看http://www.cnblogs.com/NTWang/p/6284769.html  的2.2模块

  3 .创建gulpfile.js文件

上述都搞定!

创建文件

  

gulpfile.js 文件

 1 var gulp = require('gulp');
 2 var sass = require('gulp-ruby-sass');
 3 
 4 gulp.task('sass', function(){
 5     return sass('scss/index.scss')// 编译文件
 6         .on('error', sass.logError) // 错误信息
 7         .pipe(gulp.dest('css'));//输出路径
 8     }
 9 );
10 
11 gulp.task('dist',function(){
12     gulp.watch('./scss/*.scss',['sass']);// 监听的文件
13 });

在控制台运行:

  gulp dist

scss ---》css

 

这样就使用了gulp实现的sass自动化 

转载于:https://www.cnblogs.com/NTWang/p/6562295.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值