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 ...
随机推荐
- ubuntu下Pycharm安装及配置
从知乎里看到了Pycharm的介绍,感觉还不错,记录下今天的安装过程 1.从http://www.jetbrains.com/pycharm/download/下载最新的Pycharm 2.在终端中进 ...
- [ZJOI2008]树的统计
本题是一个树链剖分裸题,由于比较菜,老是RE,后来发现是因为使用了全局变量. /************************************************************ ...
- PGPool 配置错误定位 s_do_auth: expecting R got E
自从按照教程 http://www.pgpool.net/docs/latest/pgpool-zh_cn.html#hba配置好PGPool以后,每次启动 pgpool -c -n -D 都报 s_ ...
- IP路由选择
当一个ip数据包准备好了,它是如何到达目标主机的? ?首先这个ip数据报文的生命周期即ttl值是否为0了,如果是0就丢弃了 ?搜索路由表中有没有完全匹配的主机地址 ?匹配主机失败后,搜索路由表中同子网 ...
- 上传图片插件鼠标手cursor:pointer;不生效
问题: 只在谷歌里失效; 解决: font-size:0; 参考: http://jingyan.baidu.com/article/48b558e32fabb67f38c09a81.html htt ...
- vi(Visual Editor)常用的命令
任何用户最常做的事要数创建和编辑文件,包括文档.报告和文字,vi(Visual Editor)是一个有效而相对简单的全荧幕编辑,使用vi,只要记著少量基本指令,就可以开始起步,再学习其他更复 杂的指令 ...
- output_buffering开启
ecshop后台出现Warning: Cannot modify header information - headers already sent by 修改完PHP.ini配置文件后,一定要重启服 ...
- java常见的开发工具
http://www.csdn.net/article/1970-01-01/2824723 http://zhidao.baidu.com/link?url=D8FdJxeFd-z-LV1OfZuZ ...
- telnet输入乱码的解决
1.Win+R --- 运行窗口 输入cmd回车 2.输入telnet 主机 端口 3.连接主机发现无法输入 4.这里什么也不要输入,按下 ctrl+] 键 5.按下回车键,然后会弹出新的窗口,就可 ...
- Issue 0:发刊词
最近读吴军博士的文章,很受感悟.知识的成体系地积累过程对一个人的素养提高很有帮助,所以打算开通这本电子期刊,以一周一篇文章的形式汇总今后的知识体系. 宗旨:及时和团队讨论,反馈:善于利用工具.时间越长 ...