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中 [视图]-[其他窗口]-[任 ...
随机推荐
- 阶段5 3.微服务项目【学成在线】_day05 消息中间件RabbitMQ_1.页面发布-需求分析
先静态化,并存储到gridFS 然后,发消息给MQ,MQ接收到消息通知给所有监听他的Cms Client. Cms client从gridFS读取页面下载到自己的服务 业务流程如下:1.管理员进入管理 ...
- 一百三十:CMS系统之七牛js和python的SDK使用示例
1.安装: pip install qiniu 2.编写获取uptoken的接口 @app.route('/uptoken/')def uptoken(): access_key = '' secre ...
- http://www.cda.cn/view/25735.html
通过实例浅析Python对比C语言的编程思想差异 我一直使用 Python,用它处理各种数据科学项目. Python 以易用闻名.有编码经验者学习数天就能上手(或有效使用它). 听起来很不错,不过,如 ...
- React Native Expected a component class,got [object Object]解决
报错原因: 组件大小写错误. 解决方式: 修改组件名称即可. 这篇博客介绍了大部分RN的错误原因和解决方法: http://blog.csdn.net/chichengjunma/article/de ...
- 取消一个本地svn目录与svn的联系
第一种方法: 直接.逐级地删除目标目录中的隐藏属性的.svn目录 这个方法试了,好牛蛋...,省事,快速... 第二种方法: 如果用的是TortoiseSVN客户端,则先在另外一处建立一个新目录A,右 ...
- 【VS开发】malloc申请内存错误分析
每个进程会有4G的虚拟地址空间, malloc得到的的地址都是虚拟地址, 并且当malloc的时候, 操作系统并不会将实际的内存分配给进程的, 所以malloc只会占用进程自身的虚拟地址空间.我以前也 ...
- 【VS开发】#pragma预处理命令
#pragma预处理命令 #pragma可以说是C++中最复杂的预处理指令了,下面是最常用的几个#pragma指令: #pragma comment(lib,"XXX.lib") ...
- 日志.VC
1. int WriteLog(char* _pcFullFileName, char* _pcWrite, int _iWriteLen, unsigned long * _pdwWritten) ...
- @ControllerAdvice和@ExceptionHandler
1. 使用 @ControllerAdvice和@ExceptionHandler处理全局异常 1. 新建异常信息实体类 非必要的类,主要用于包装异常信息. package com.test.exce ...
- golang写入csv
package main import ( "encoding/csv" "fmt" "os" ) func main() { file, ...