实现功能

  监听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. 广告行业——数字广告营销中的DSP、SSP、RTB是个什么概念

    原文链接1 原文链接2 如我是一个创业公司,没啥钱,老板给了1000块钱预算,让我去投互联网广告,对我说: “小卡啊!给你1000块钱,我知道你没见过那么多的巨款吧!不要被吓着,尽情去挥霍吧!哦对了, ...

  2. Go 微服务架构Micro相关概念理解

    Micro是一个微服务框架(或者说是工具集):提供了各类组件,解决微服务架构中的不同问题,服务监控.服务发现.熔断机制,负载均衡等等,自己一个个解决这些问题几乎不可能,这时候就需要借助go-micro ...

  3. 五指MUD协议

    //MUD转义协议 #ifndef __WZMUD__ #define __WZMUD__ #define WZKEY "ZWUxMTIyMDAwMw==" #define ESA ...

  4. kubernetes 之kubelet客户端证书过期问题处理 KubeClientCertificateExpiration apiserver (monitoring/k8s warning) Kubernetes API certificate is expiring in less than 7 days.

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4gAAAKMCAYAAAAZj+XuAAABfGlDQ1BJQ0MgUHJvZmlsZQAAKJFjYG ...

  5. js匿名函数确实是个好东西

    <body onload="alert('http://www.baidu.com/');"> <script type="text/javascrip ...

  6. 如何将Nginx注册为系统服务,开机自启动

    亲测有效! 一般程序员在实际工作中,除了敲代码,很少有机会实际接触操作其它东西,例如服务器环境搭建,项目部署等等,不是领导信任或项目组核心成员,应该是没有机会实际接触的,只能通过网上资料稍微了解一下. ...

  7. JavaScript中new运算符的实现

    废话不多说直接进入正题,首先我们需要先知道new运算符到底做了哪些事情,再来模拟它实现这一功能. 1. 建立一个空的Object对象: 2. 把这个空对象用__proto__链接到原型 3. 用app ...

  8. OpenCV2.源码_编译&调试

    1.VS 调试第三方库源码 - writeeee的专栏 - CSDN博客.html(https://blog.csdn.net/writeeee/article/details/82692770) Z ...

  9. linux netfilter

    yum -y install iptables//三张表 filter nat mangle [root@wang /]# iptables -t filter -nvL [root@wang /]# ...

  10. 带你手写基于 Spring 的可插拔式 RPC 框架(四)代理类的注入与服务启动

    上一章节我们已经实现了从客户端往服务端发送数据并且通过反射方法调用服务端的实现类最后返回给客户端的底层协议. 这一章节我们来实现客户端代理类的注入. 承接上一章,我们实现了多个底层协议,procoto ...