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 ...
随机推荐
- 引用log4j.jar包后,出现告警
问题现象:在引用log4j包后,使用自己导出的jar包,编译测试例代码,在启动浏览器时出现以下告警:log4j:WARN No appenders could be found for logger ...
- javascript入门:this的规则与bind的各种风骚用法
javascript的任何函数的作用域中都有一个this变量.理解这个this变量才能正确地编写javascript程序,正确使用javascript的各种功能. this变量是这样确定的: 1 如果 ...
- 如何搭建开源code review gerrit服务器
搭建环境:Ubuntu 14.04 一.环境准备 1.Java环境 gerrit依赖,用于安装gerrit环境. 下载:jdk-7u79-linux-x64.tar.gz http://www.ora ...
- ES6 will change the way you write JS code.
https://hacks.mozilla.org/2015/04/es6-in-depth-an-introduction/ Counting to 6 The previous editions ...
- Self-Host Web API 学习笔记
ASP.NET Web API 不需要 IIS,直接使用控制台程序可以实现. 一.创建一个新的控制台程序,项目名为 HostApi 二.设置目标框架为.NET Framework 4 三.NuGet添 ...
- JQuery中的选择器的总结
JQuery的选择器十分的强大,但是我平常经常用到的却十分的有限,趁现在有时间我感觉有必要总结一下. 基本选择器 $("#ID") 选择ID所对应的标签元素 返回一个标签元素$(& ...
- CSS特异性(CSS Specificity)的细节之CSS样式权重的计算与理解(CSS样式覆盖规则)
本篇讲解CSS特异性(CSS Specificity)的细节,也就是CSS样式选择器的权重计算 通过计算选择器的权重(weight)最终决定哪个选择器将获得优先权去覆盖其他选择器的样式设定,即“优先原 ...
- 在Hyper-V中安装和配置Ubuntu网络
http://www.abcde.cn/knowledgebase/845/Hyper-VUbuntu.html (文中的nameserver要改成自己路由器的IP:我的是192.168.2.1.) ...
- Hyper-V 与Broadcom网卡兼容问题
最近在测虚拟机时,碰到一个网卡和Hyper-V不兼容问题,现在共享给大家参考,希望对大家有帮忙. 故障描述: Dell R720 Windows 2012操作系统下的Hyper-V环境后,虚拟机网络速 ...
- Webstorm功能详解及插件推荐
Web前端开发神器--Webstorm不用多介绍,强大的智能提示只是它的一个功能特性,它还具有许多有用的特性,比如版本控制.本地历史.即时模板等.Webstorm还内置了对 SASS.NodeJS.C ...