前言:前段时间学习了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的更多相关文章

  1. 使用gulp编译sass

    之前写了一篇在ruby环境下如何编译sass的文章:<css预处理器sass使用教程(多图预警)>,随着现在前端构建工具的兴起,也学着使用这些工具来编译sass.webpack存在一个CS ...

  2. Visual Studio 2017中使用gulp编译sass/scss

    在Visual Studio 2017中使用gulp编译sass/scss文件 需要的环境:Visual Studio 2017.Node.js.npm 在vs2017中 [视图]-[其他窗口]-[任 ...

  3. 使用 gulp 编译 Sass

    无论是 node-sass 还是 ruby-sass 使用 npm 安装都非常的慢,甚至会装不上.及其不利于团队协作.建议使用 less 作为 css 预处理器. 如果因为 less 不支持自定义函数 ...

  4. laravel 中 与前端的一些事2 之使用Gulp编译sass

    下载所有依赖npm的packagist: 下载了前端laravel  elixir编译所需要的全部工具: gulp编译scss文件: scss文件的默认存放位置: 输入命令gulp 开始编译scss文 ...

  5. 续Gulp使用入门编译Sass

    使用 gulp 编译 Sass Sass 是一种 CSS 的开发工具,提供了许多便利的写法,大大节省了开发者的时间,使得 CSS 的开发,变得简单和可维护. 安装 npm install gulp-s ...

  6. 使用 gulp 编译 LESS

    请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 使用 gulp 压缩 JS Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能 ...

  7. Gulp如何编译sass

    Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 1.搭建web服务器 2.文件保存时自动重载浏览器 3.使用预处理器如Sass.LESS 4.优化资源,比如压缩CSS.JavaScr ...

  8. nodejs编译sass模块包 node-compass,与gulp包gulp-sass使用方法

    简介:node express或者就是node项目中,要自动编译sass方法很多,比如gulp 比如考拉,比如今天我想说的这个包node-compass. 编译sass的三种方法: 前提条件: 都需要 ...

  9. gulp之sass 监听文件,自动编译

    gulpfile.js文件如下: var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('default', f ...

随机推荐

  1. tshark 抓包分析

    一,安装#yum install -y wireshark 二.具体使用案例 1.抓取500个包,提取访问的网址打印出来tshark -s 0 -i eth0 -n -f 'tcp dst port ...

  2. Java 005 枚举

    枚举概述:就是有有限值的集合或类.是指将变量的值一一列出来, 变量的值只限于列举出来的值得范围. 举例: 一周7天, 一年12个月等.回想单列设计模式: 单例类是一个类只有一个实例.那么多例类就是一个 ...

  3. Linux一些零碎

    1.设置时间和市区 1.tzselect 2.sudo cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime

  4. 浅谈MySQL数据类型

    MySQL 数据类型 MySQL中定义数据字段的类型对你数据库的优化是非常重要的. MySQL支持多种类型,大致可以分为三类:数值.日期/时间和字符串(字符)类型. 一.数值类型 MySQL支持所有标 ...

  5. 使用"关键词"来整理自己的知识库

    以前一直使用MyBase作为整理知识的工具,但是用到后来发现,当整理的知识越来越多时,树形目录的节点个数就会变得越来越庞大,层次越来越深,反而很难定位要查看或编辑的知识.最近发现使用"关键字 ...

  6. java new Date()得到的时间和系统时间不一样

    造成这种问题的原因是:操作系统时区跟JVM的时区不一致. [root@paas244 ~]# timedatectl Local time: Thu 2016-12-29 15:35:44 CST U ...

  7. 【转】Linux下apache/httpd服务启动与停止

    apache服务,或者说httpd服务,如何启动,如何开机启动. 转来转去,找不到原文.. 操作系统环境:红帽5,具体如下:# uname -a Linux machine1 2.6.18-164.e ...

  8. js 斐波那契数列(兔子问题)

    对于JS初学者来说,斐波那契数列一直是个头疼的问题,总是理不清思路. 希望看完这篇文章之后会对你有帮助. 什么是斐波那契数列 : 答: 斐波那契数列,又称黄金分割数列.因数学家列昂纳多·斐波那契(Le ...

  9. Ajax跨域的几种方法以及每种方法的原理

    js中几种实用的跨域方法原理详解 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协 ...

  10. [转]IntelliJ IDEA 使用心得与常用快捷键

    IntelliJ IDEA 使用心得与常用快捷键 那种酸爽,根本说不出来—————————————————————————— by: Jimi没有BondJimi是谁? 就是洒家啊! 刚开始学习写Ja ...