gulp编译sass
前言:前段时间学习了sass语法,但是一直用的是“考拉”这个软件工具将我写的sass代码编译成css,然后再引用到项目里面去的,随着对sass的更加深入的了解,我开始尝试着将sass写入gulp,下面就介绍如何将sass写入gulp,完成一系列自动化编译。
①、安装gulp-sass :npm install gulp-sass --save-dev
②、写入gulpfile.js:var sass = requrie('gulp-sass')
gulp.task('sass', function () {
return gulp.src('./src/less/sass/*.scss') //要编译的scss文件的路径
.pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError)) //outputStyle:编译方式
.pipe(gulp.dest('./src/less/css')); // 要编译的输入的css文件路径
});
③、加入watch,完成监控
④、在你的html里面引用你编译好的css就可以了
gulp编译sass的更多相关文章
- 使用gulp编译sass
之前写了一篇在ruby环境下如何编译sass的文章:<css预处理器sass使用教程(多图预警)>,随着现在前端构建工具的兴起,也学着使用这些工具来编译sass.webpack存在一个CS ...
- Visual Studio 2017中使用gulp编译sass/scss
在Visual Studio 2017中使用gulp编译sass/scss文件 需要的环境:Visual Studio 2017.Node.js.npm 在vs2017中 [视图]-[其他窗口]-[任 ...
- 使用 gulp 编译 Sass
无论是 node-sass 还是 ruby-sass 使用 npm 安装都非常的慢,甚至会装不上.及其不利于团队协作.建议使用 less 作为 css 预处理器. 如果因为 less 不支持自定义函数 ...
- laravel 中 与前端的一些事2 之使用Gulp编译sass
下载所有依赖npm的packagist: 下载了前端laravel elixir编译所需要的全部工具: gulp编译scss文件: scss文件的默认存放位置: 输入命令gulp 开始编译scss文 ...
- 续Gulp使用入门编译Sass
使用 gulp 编译 Sass Sass 是一种 CSS 的开发工具,提供了许多便利的写法,大大节省了开发者的时间,使得 CSS 的开发,变得简单和可维护. 安装 npm install gulp-s ...
- 使用 gulp 编译 LESS
请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 使用 gulp 压缩 JS Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能 ...
- Gulp如何编译sass
Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 1.搭建web服务器 2.文件保存时自动重载浏览器 3.使用预处理器如Sass.LESS 4.优化资源,比如压缩CSS.JavaScr ...
- nodejs编译sass模块包 node-compass,与gulp包gulp-sass使用方法
简介:node express或者就是node项目中,要自动编译sass方法很多,比如gulp 比如考拉,比如今天我想说的这个包node-compass. 编译sass的三种方法: 前提条件: 都需要 ...
- gulp之sass 监听文件,自动编译
gulpfile.js文件如下: var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('default', f ...
随机推荐
- java基础总结——基础语法1
一.标示符 二.关键字 三.java基本数据类型 3.1 常量 ● 常量表示不能改变的数值. ● java中常量的分类: 1. 整数常量.所有整数 2. 小数常量.所有小时 3. 布尔型常量.较为特有 ...
- 设置一个顺手的Xcode
授权转载,作者:吴白(微博) 手指在键盘上飞速跳跃,终端上的代码也随着飞舞,是的这确实很酷.优秀的程序员总是这么一群人,他们不拘于现状,不固步自封,他们喜欢新奇的事,他们把自己发挥到极致. 指法攻略 ...
- shell (check return of each line)and sudoer
shell result from cmdline echo $? if 0 then success ;else failure (shell 执行每部返回值,rm -rf 错误,打包不能覆盖) 解 ...
- Xcode清除缓存等
Xcode出现一些错误的时候,有时候不是代码的问题,需要清理一下Xcode的缓存或者项目的Product等: 1. Product清理 1.1 Product-Clean 1.2 Product- ...
- java替换包含html标签
说明一下,该文档内容抄自开源中国里的谋篇文章,由于抄袭时间过于久远,已经找不到博主了!暂不能说明出处,源码博主看见勿气,皆可联系本人! 我的博客,文章属于个人收藏,以解日后需要之急! package ...
- [原创]快速指定SQLDeveloper所使用JDK的方法
就众多的免费SQL开发工具来讲,Oracle出品的SQLDeveloper 还是一个很不错的选择. 看到网上不少的帖子讨论SQL Developer 启动的时候报告找不到Java Home(或JDK) ...
- 运行maven项目
- 项目 XXX 的 NuGet 程序包还原失败:找不到“xxx”版本的程序包“xxx”
项目 XXX 的 NuGet 程序包还原失败:找不到“xxx”版本的程序包“xxx” 编译新下载的代码出错 修改包管理器的源为 http://www.nuget.org/api/v2/ .重试后成功 ...
- sql关联表查询结果并插入
这里涉及三个表,AA,BB,CC,将AA的数据更新到CC表中,将AA中LABEL_ID分别截取字段与BB表中的label_id对应查询到LABEL_NAME作为CC表的一个字段插入,这里分成四段查询 ...
- E-Business Suite 12.2 startCD 50 Install Fails with Fatal Error: TXK Install Service oracle.apps.fnd.txk.config.ProcessStateException: OUI process failed Cannot install Web Tier Utilities
在rhel7.2上,使用startCD 50安装ebs r12.2的使用,安装到38%的时候就报错,遇到了和以下文章类似的问题: http://www.cnblogs.com/abclife/p/49 ...