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 ...
随机推荐
- tshark 抓包分析
一,安装#yum install -y wireshark 二.具体使用案例 1.抓取500个包,提取访问的网址打印出来tshark -s 0 -i eth0 -n -f 'tcp dst port ...
- Java 005 枚举
枚举概述:就是有有限值的集合或类.是指将变量的值一一列出来, 变量的值只限于列举出来的值得范围. 举例: 一周7天, 一年12个月等.回想单列设计模式: 单例类是一个类只有一个实例.那么多例类就是一个 ...
- Linux一些零碎
1.设置时间和市区 1.tzselect 2.sudo cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime
- 浅谈MySQL数据类型
MySQL 数据类型 MySQL中定义数据字段的类型对你数据库的优化是非常重要的. MySQL支持多种类型,大致可以分为三类:数值.日期/时间和字符串(字符)类型. 一.数值类型 MySQL支持所有标 ...
- 使用"关键词"来整理自己的知识库
以前一直使用MyBase作为整理知识的工具,但是用到后来发现,当整理的知识越来越多时,树形目录的节点个数就会变得越来越庞大,层次越来越深,反而很难定位要查看或编辑的知识.最近发现使用"关键字 ...
- java new Date()得到的时间和系统时间不一样
造成这种问题的原因是:操作系统时区跟JVM的时区不一致. [root@paas244 ~]# timedatectl Local time: Thu 2016-12-29 15:35:44 CST U ...
- 【转】Linux下apache/httpd服务启动与停止
apache服务,或者说httpd服务,如何启动,如何开机启动. 转来转去,找不到原文.. 操作系统环境:红帽5,具体如下:# uname -a Linux machine1 2.6.18-164.e ...
- js 斐波那契数列(兔子问题)
对于JS初学者来说,斐波那契数列一直是个头疼的问题,总是理不清思路. 希望看完这篇文章之后会对你有帮助. 什么是斐波那契数列 : 答: 斐波那契数列,又称黄金分割数列.因数学家列昂纳多·斐波那契(Le ...
- Ajax跨域的几种方法以及每种方法的原理
js中几种实用的跨域方法原理详解 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协 ...
- [转]IntelliJ IDEA 使用心得与常用快捷键
IntelliJ IDEA 使用心得与常用快捷键 那种酸爽,根本说不出来—————————————————————————— by: Jimi没有BondJimi是谁? 就是洒家啊! 刚开始学习写Ja ...