实现功能

  监听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. CentOS7做ssh免密登录

    (1)实验环境 两台CentOS7: youxi1 192.168.1.6 youxi2 192.168.1.7 这里我将防火墙关闭进行实验,如果防火墙开启,请将端口加入到防火墙规则中. (2).目标 ...

  2. 用Keras搭建神经网络 简单模版(四)—— RNN Classifier 循环神经网络(手写数字图片识别)

    # -*- coding: utf-8 -*- import numpy as np np.random.seed(1337) from keras.datasets import mnist fro ...

  3. Freemarker使用总结

    spring mvc 中 Freemarker 获取项目根目录,方便HTML页面配置各种路径 在SpringMVC框架中使用Freemarker试图时,要获取根路径的方式如下: <!-- Fre ...

  4. SpringBoot: 10.整合mybatis(转)

    需求:通过使用 SpringBoot+SpringMVC+MyBatis 整合实现一个对数据库中的 t_user 表的 CRUD 的操作 1.创建maven项目,添加项目所需依赖 <!--spr ...

  5. swift 第十课 cocopod 网络请求 Alamofire

    这个 cocopod 真的是不容易,差点就放弃了…… 还好,我足够的坚持…… 还是首先说下具体的步骤,希望能记得足够的详细…… 1.打开终端,cd 到自己项目的文件夹 cd 文件路径 2.执行 vim ...

  6. python如何发布自已pip项目

    python如何发布自已pip项目前言因为自已平时会把一个常用到逻辑写成一个工具python脚本,像关于时间字符串处理,像关于路径和文件夹遍历什么的工具.每一次新建一个项目的时候都要把这些工具程序复制 ...

  7. Win10系统,Jmeter 字体调整方法

    找到jmeter所在目录--->bin--->jmeter.properties, 1.搜索jsyntaxtextarea.font.size,去掉#,把14改成更大的数字 2.修改右侧参 ...

  8. windows下exfat无法写入怎么修复?

    为了能够实现mac与windows文件共享,把移动硬盘格式化为exfat了,可是在osx中放入文件后,在windows上紧进行读取写入时出现错误,提示使用chkdsk进行修正,下面是修正步骤. 方法/ ...

  9. 关于greenlet的一些问题

    今天测试关于协程方面的代码发现我安装了greenlet模块缺导入不进.如图: 后来找了半天才发现原来greenlet被整进了gevent包中,如下导入就可以成功: 但这个greenlet没有了swit ...

  10. Django-djangorestframework-响应模块

    响应模块 一般都用 Response 对象来做返回(最后一定是打包成符合 HTTP 协议的数据格式来传输,Response 类做了一系列处理,所以这里我们只需要关注下它的那些参数即可) 响应类构造器 ...