Gulp 编译Less和Sass
在实际应用中,我们一般会使用 CSS 的预处理器来编写 CSS 代码,例如 Less 和 Sass 语言,通过将脚本解析成 CSS 的脚本语言,可以减少 CSS 的重复,也可以节省时间。
本节我们来学习如何通过 gulp 将 Less 和 Sass 编译成 CSS 代码。将 Less 编译成 CSS 需要使用 gulp-less 插件,将 Sass 编译成 CSS 需要用到 gulp-ruby-sass 插件。
将Less编译成CSS
例如在项目根目录下的 less 文件夹中有一个 style.less 文件,文件内容如下所示:
div{color: #ccc;a{color: white;font-size: 16px;}p{font-size: 14px;line-height: 30px;}
}
我们需要将这个 style.less 文件代码编译成 CSS 代码。
首先需要安装 gulp-less 插件,安装命令如下所示:
npm install gulp-less
安装好插件后,我们可以在 gulpfile.js 文件中创建命令,代码如下所示:
// 获取 gulp
var gulp = require('gulp')
var gulp_less = require('gulp-less')gulp.task('less', function(cb) {gulp.src('less/*.less').pipe(gulp_less()).pipe(gulp.dest('dist/css'))cb()
})
然后我们执行 gulp less 命令:
此时我们会看到 dist 目录下的 css 文件夹中,生成了一个 style.css 文件,文件内容如下所示,这就是 less 编译后的 CSS 代码:
div {color: #ccc;
}
div a {color: white;font-size: 16px;
}
div p {font-size: 14px;line-height: 30px;
}
将Sass编译成CSS
将 Sass 代码编译成 CSS代码,其实和 Less 编译成 CSS 差不多,就是使用到的插件不同,需要用到一个 gulp-ruby-sass 插件。
安装命令如下所示:
npm install gulp-ruby-sass
然后同样是创建任务:
// 获取 gulp
var gulp = require('gulp')
var gulp_sass = require('gulp-ruby-sass')gulp.task('sass', function(cb) {return gulp_sass('sass/*.scss').on('error', function(err){console.error('Error!', err.message);}).pipe(gulp.dest('dist/css'))cb()
})
执行 gulp sass 命令,Sass 文件会成功被编译成 CSS。
链接:https://www.9xkd.com/
Gulp 编译Less和Sass相关推荐
- 使用gulp编译 sass和less
Gulp是一个基于流的自动化构建工具,可以帮我实现很多的功能,比如代码编译.压缩等等. 网址:https://www.gulpjs.com.cn/ 个人对gulp的一个简单理解 以下只是使用gulp编 ...
- gulp编译css_如何用gulp缩小CSS
gulp编译css by Vinicius Gularte 由Vinicius Gularte 如何用gulp缩小CSS (How to minify your CSS with gulp) In t ...
- React入门教程第三课--gulp编译优化
上节课中我提到了,在gulpfile中编写task编译js和sass的task. 然后在项目中使用时发现,当项目内容越写越多时,编译速度会越来越久. 看了一下编译过程.上次gulpfile中的定义是当 ...
- 浅谈node环境下的Sass以及gulp工具下的Sass
目录 一.Sass简介 二.Sass的解析器 1. node环境下的Sass解析器 2. gulp工具下的Sass解析器 三.Sass语法 1. 注释 2. 变量 3.嵌套 4.导入@import 5 ...
- gulp编译less简单demo
写个简单的less.watch任务的demo分享---- 1.准备: 安装全局node.npm,这个教程很多不作详细介绍: 安装全局gulp npm install -g gulp 新建getstar ...
- Less语法基于node\grunt/gulp编译
引入方法一: <link rel="stylesheet/less" type="text/css" href="styles.less&quo ...
- html中将scss转编译为css,SASS把scss转化为css的四种转化方式与命令
在终端输入命令: $ sass --watch scss:css --style expanded 即可实时把scss文件夹下的scss文件转化为css文件放入css文件夹中, 命令中使用的是expa ...
- Gulp编译、合并、压缩,以及Browsersync实时刷新教程
之前项目中一直用的都是gulp-livereload,用gulp-webserver启服务器,来实现浏览器实时刷新,但是每一次更新代码重新编译有点慢.之后各种找原因改解决方案. 方案一:加入gulp- ...
- gulp 实现sass自动化 ,监听同步
实现功能 监听scss文件 sass自动化 准备条件 1 .安装gulp npm init ---->一直enter,会在当前目录下生成一个package.json文件,记录安装的依赖模块 ...
最新文章
- 源码安装postgresql
- android 固定大小数组,android-Kotlin中的最大数组大小
- 博士申请 | 北京理工大学张睿恒老师组招收计算机视觉方向硕士/博士生
- 【WebRTC---进阶篇】(二)libevent实现高性能网络服务器
- 隐藏导航条HTML,jQuery实现的导航条切换可显示隐藏
- delphi query 存储为dbf_Delphi 代码审计项目实战 1
- 面前的大山一座接一座
- Android多线程基础知识详解(傻瓜教程)
- 高性能MySQL笔记——MySQL基础(一)
- 动易2007后台模板上传任意文件漏洞
- centos7离线安装wget
- CAD/CAM技术的现状分析
- win7怎么把计算机图标下的箭头掉,win7系统桌面图标小箭头去掉的操作方法
- 什么是ISO镜像文件,为什么不能拷贝到U盘直接重新安装?
- 汉堡造型的动态导航菜单,非常有意思
- java计算机毕业设计商场VIP管理系统源码+系统+数据库+lw文档+mybatis+运行部署
- 国庆节,一天开发一个小程序+Web系统。2.5K到手。【分享开发经验】【收藏起来】
- 请查收,您有一份阿里先锋开源项目清单
- 微型计算机原理中的mov,微机原理考试题目类型
- mysql against 中文_「against的用法」Mysql全文搜索之MATCH...AGAINST的用法介绍 - seo实验室...