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中 [视图]-[其他窗口]-[任 ...
随机推荐
- CentOS7做ssh免密登录
(1)实验环境 两台CentOS7: youxi1 192.168.1.6 youxi2 192.168.1.7 这里我将防火墙关闭进行实验,如果防火墙开启,请将端口加入到防火墙规则中. (2).目标 ...
- 用Keras搭建神经网络 简单模版(四)—— RNN Classifier 循环神经网络(手写数字图片识别)
# -*- coding: utf-8 -*- import numpy as np np.random.seed(1337) from keras.datasets import mnist fro ...
- Freemarker使用总结
spring mvc 中 Freemarker 获取项目根目录,方便HTML页面配置各种路径 在SpringMVC框架中使用Freemarker试图时,要获取根路径的方式如下: <!-- Fre ...
- SpringBoot: 10.整合mybatis(转)
需求:通过使用 SpringBoot+SpringMVC+MyBatis 整合实现一个对数据库中的 t_user 表的 CRUD 的操作 1.创建maven项目,添加项目所需依赖 <!--spr ...
- swift 第十课 cocopod 网络请求 Alamofire
这个 cocopod 真的是不容易,差点就放弃了…… 还好,我足够的坚持…… 还是首先说下具体的步骤,希望能记得足够的详细…… 1.打开终端,cd 到自己项目的文件夹 cd 文件路径 2.执行 vim ...
- python如何发布自已pip项目
python如何发布自已pip项目前言因为自已平时会把一个常用到逻辑写成一个工具python脚本,像关于时间字符串处理,像关于路径和文件夹遍历什么的工具.每一次新建一个项目的时候都要把这些工具程序复制 ...
- Win10系统,Jmeter 字体调整方法
找到jmeter所在目录--->bin--->jmeter.properties, 1.搜索jsyntaxtextarea.font.size,去掉#,把14改成更大的数字 2.修改右侧参 ...
- windows下exfat无法写入怎么修复?
为了能够实现mac与windows文件共享,把移动硬盘格式化为exfat了,可是在osx中放入文件后,在windows上紧进行读取写入时出现错误,提示使用chkdsk进行修正,下面是修正步骤. 方法/ ...
- 关于greenlet的一些问题
今天测试关于协程方面的代码发现我安装了greenlet模块缺导入不进.如图: 后来找了半天才发现原来greenlet被整进了gevent包中,如下导入就可以成功: 但这个greenlet没有了swit ...
- Django-djangorestframework-响应模块
响应模块 一般都用 Response 对象来做返回(最后一定是打包成符合 HTTP 协议的数据格式来传输,Response 类做了一系列处理,所以这里我们只需要关注下它的那些参数即可) 响应类构造器 ...