实现功能

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

 var gulp = require('gulp');
var sass = require('gulp-ruby-sass'); gulp.task('sass', function(){
return sass('scss/index.scss')// 编译文件
.on('error', sass.logError) // 错误信息
.pipe(gulp.dest('css'));//输出路径
}
); gulp.task('dist',function(){
gulp.watch('./scss/*.scss',['sass']);// 监听的文件
});

在控制台运行:

  gulp dist

scss ---》css

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

gulp 实现sass自动化 ,监听同步的更多相关文章

  1. Spring-Security (学习记录五)--配置登录时,密码采用md5加密,以及获取登录信息属性监听同步自己想要的登录信息

    目录 1. PasswordEncoder 采用密码加密 2. 获取当前的用户信息 1. PasswordEncoder 采用密码加密 使用前面的例子.可以看出我们数据库密码是采用明文的,我们在登录的 ...

  2. gulp监听文件变化,并拷贝到指定目录

    暂时不支持目录修改.创建.删除var gulp = require('gulp'); var fs = require('fs'); var path = require('path'); var l ...

  3. gulp监听文件变化,并拷贝到指定目录(转)---参考记录

    ###暂时不支持目录修改.创建.删除.var gulp = require('gulp'); var fs = require('fs'); var path = require('path'); v ...

  4. 玩转gulp之watch监听文件自动编译

    博客移至 https://www.dodoblog.cn/blog?id=5befc928e0feb34495b57035 我们在写页面的时候,用到sass less等css预处理器的时候,虽然写的很 ...

  5. gulp压缩html,css,js文件流程、监听任务、使用gulp创建服务器、同时运行多个任务、反向代理

    一.初始化 首先先做一个项目初始化,用来记录你项目中用到的工具 再你项目文件下打开一个控制台,输入命令 yarn init -y 进行初始化 输入命令yarn add gulp -g  --- 全局安 ...

  6. 使用Gulp构建前端自动化方案

    前言 在刚入门前端的时候,我们并不清楚前端有工具可以帮我们自动化打包压缩文件,当时只关注能实现功能就可以了,也不太在意前端性能优化的问题,随着项目功能的复杂,项目也变得越来越大,页面的执行速度也开始变 ...

  7. Gulp构建前端自动化工作流之:常用插件介绍及使用

    在对Gulp有了一个初步的了解之后,我们开始构建一个较为完整的Gulp开发环境. 本文主要分为6个段落: 1. 构建项目目录结构(Directory Structure Build) 2. 插件介绍及 ...

  8. 使用 gulp 编译 Sass

    无论是 node-sass 还是 ruby-sass 使用 npm 安装都非常的慢,甚至会装不上.及其不利于团队协作.建议使用 less 作为 css 预处理器. 如果因为 less 不支持自定义函数 ...

  9. Visual Studio 2017中使用gulp编译sass/scss

    在Visual Studio 2017中使用gulp编译sass/scss文件 需要的环境:Visual Studio 2017.Node.js.npm 在vs2017中 [视图]-[其他窗口]-[任 ...

随机推荐

  1. spring中的原型模式

    大家好,我原本是神剑山庄的铸剑师,名叫小赵,本来干的好好的,后来一时兴起,睡了三少爷的小姨子,与其一直提心吊胆,干脆来个逃之夭夭. 但是,我也要吃饭的呀,工作也得找,神剑山庄去不得,还有断剑山庄.藏剑 ...

  2. [Scikit-learn] 2.3 Clustering - Spectral clustering

    From: 2.3.5 Clustering - Spectral clustering From: 漫谈 Clustering (4): Spectral Clustering From: 漫谈 C ...

  3. Spark中的CombineKey()详解

    CombineKey()是最常用的基于键进行聚合的函数,大多数基于键聚合的函数都是用它实现的.和aggregate()一样,CombineKey()可以让用户返回与输入数据的类型不同的返回值.要理解C ...

  4. ElasticSearch——集群搭建

    1.准备 1.1.组件 JDK:1.8版本及以上: ElasticSearch:6.2.4版本: 1.2.服务器 3台服务器 2.安装 2.1.下载解压 wget https://artifacts. ...

  5. windows下配置tomcat服务器的jvm内存大小的两种方式

    难得遇到一次java堆内存溢出(心里想着,终于可以来一次jvm性能优化了$$) 先看下报错信息, java.lang.OutOfMemoryError: GC overhead limit excee ...

  6. html5 商品分类页面效果zepto

    点击左边容器条目,右边列表对应的内容置顶显示,滑动右边的列表,左边容器的对应的标题高亮显示. 效果图如下: 代码: <!doctype html> <html> <hea ...

  7. ssl证书泛域名

    certbot certonly -d *.example.com --manual --preferred-challenges dns --server https://acme-v02.api. ...

  8. Shell脚本中怎么实现用户切换实现操作

    当我们在服务器上面疯狂的进行操作的时候,我们用shell脚本来帮我们来完成一些基本的任务,但是一些命令或者一些操作需要我们不断切换用户来实现的话,在shell脚本就不那么好实现了,那么我们在shell ...

  9. Session服务器之Memcached与Redis

    安装Memcached[root@nginx ~]# yum -y install libevent memcached 指定用户大小等信息,工作环境中常指定大小一般为4到8G,此信息测试使用.[ro ...

  10. MySQL中的日期和时间:使用和说明,以及常用函数

    1.首先需要注意: 1.1 MySQL中把日期和时间是分开的. 以字符串2007-12-31 00:59:59为例: 日期部分:2007-12-31.这部分也可以叫做一个日期表达式. 时间部分:00: ...