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 文件
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自动化 ,监听同步的更多相关文章
- Spring-Security (学习记录五)--配置登录时,密码采用md5加密,以及获取登录信息属性监听同步自己想要的登录信息
目录 1. PasswordEncoder 采用密码加密 2. 获取当前的用户信息 1. PasswordEncoder 采用密码加密 使用前面的例子.可以看出我们数据库密码是采用明文的,我们在登录的 ...
- gulp监听文件变化,并拷贝到指定目录
暂时不支持目录修改.创建.删除var gulp = require('gulp'); var fs = require('fs'); var path = require('path'); var l ...
- gulp监听文件变化,并拷贝到指定目录(转)---参考记录
###暂时不支持目录修改.创建.删除.var gulp = require('gulp'); var fs = require('fs'); var path = require('path'); v ...
- 玩转gulp之watch监听文件自动编译
博客移至 https://www.dodoblog.cn/blog?id=5befc928e0feb34495b57035 我们在写页面的时候,用到sass less等css预处理器的时候,虽然写的很 ...
- gulp压缩html,css,js文件流程、监听任务、使用gulp创建服务器、同时运行多个任务、反向代理
一.初始化 首先先做一个项目初始化,用来记录你项目中用到的工具 再你项目文件下打开一个控制台,输入命令 yarn init -y 进行初始化 输入命令yarn add gulp -g --- 全局安 ...
- 使用Gulp构建前端自动化方案
前言 在刚入门前端的时候,我们并不清楚前端有工具可以帮我们自动化打包压缩文件,当时只关注能实现功能就可以了,也不太在意前端性能优化的问题,随着项目功能的复杂,项目也变得越来越大,页面的执行速度也开始变 ...
- Gulp构建前端自动化工作流之:常用插件介绍及使用
在对Gulp有了一个初步的了解之后,我们开始构建一个较为完整的Gulp开发环境. 本文主要分为6个段落: 1. 构建项目目录结构(Directory Structure Build) 2. 插件介绍及 ...
- 使用 gulp 编译 Sass
无论是 node-sass 还是 ruby-sass 使用 npm 安装都非常的慢,甚至会装不上.及其不利于团队协作.建议使用 less 作为 css 预处理器. 如果因为 less 不支持自定义函数 ...
- Visual Studio 2017中使用gulp编译sass/scss
在Visual Studio 2017中使用gulp编译sass/scss文件 需要的环境:Visual Studio 2017.Node.js.npm 在vs2017中 [视图]-[其他窗口]-[任 ...
随机推荐
- [Bayes] *Bayesian Classifier for Face Recognition
Bayesian在识别领域的贡献,着实吸引人 阅读笔记 Gabor特征 (简介,另单独详述) 通过上面的分析,我们知道了,一个Gabor核能获取到图像某个频率邻域的响应情况,这个响应结果可以看做是图像 ...
- easy-mock 本地部署
前言 为什么要本地部署 easy-mock呢? easy-mock官网经常挂,太浪费时间了: 公司突然不给上外网,太垃圾了: 就是想要折腾自己,太爱学习了(哈哈哈): Easy-mock 官网 安装需 ...
- VS自定义代码块Code Snippet
一 .简述 我们在开发当中,避免不了一些重复的开发工作,在你漫长的开发以及学习当中,你会发现有这么一部分代码是你时常会使用到的.我想这个工具也是针对这个原因出来的吧,它就是预先把你需要的这部分代码的 ...
- 一个可以让vsftpd启动系统用户登陆ftp的例子
编辑 /etc/vsftpd.conf 如下: listen=YES anonymous_enable=NO local_enable=YES check_shell=NO write_enable= ...
- Golang开源项目
谷歌官方维护了一个基于go语言的开源项目列表: https://github.com/golang/go/wiki/Projects 其中有非常多的优秀项目值得学习,有几百行代码适合新手阅读的项目,也 ...
- OpenGL学习(4)——纹理(补)
完成章节后练习 练习 1. Make sure only the happy face looks in the other/reverse direction by changing the fra ...
- jstl标签设置通用web项目根路径-备查
在做项目时(如SSH或SpringMVC),通常需要在很多页面(jsp中的form提交)或者js代码(一般Ajax提交)中用到当前web应用的根路径(拼成访问资源如action/controller. ...
- Junk-Mail Filter 【并查集虚父节点】
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2473 题目大意: n个点,m个操作,操作时,输入M a b,表示a, b在一个集合里, 输入S a 表 ...
- HTTP请求方法:GET、HEAD、POST、PUT、DELETE、CONNECT、OPTIONS、TRACE 说明
平时的Rest开发,用到的都是GET,POST,PUT,DELETE类型的请求. 但Rest支持的请求类型不止前面4种,还有其他几种. 下面部分转自: https://www.html.cn/arch ...
- spring websocket 使用@SendToUser
spring websocket 使用@SendToUser 原文链接:https://blog.csdn.net/yingxiake/article/details/51224569 之前我们利用@ ...