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 ...
随机推荐
- completionService
我们现在在Java中使用多线程通常不会直接用Thread对象了,而是会用到java.util.concurrent包下的ExecutorService类来初始化一个线程池供我们使用. 当我们使用Exe ...
- Mac OS X:禁止崩溃报告-CrashReport
Mac OS X:禁止崩溃报告 崩溃报告就是CrashReport 至于官方的有关CrashReport的文档在Technical Note TN212 . 一般的默认情况下,当一个应用程序因为各种原 ...
- sleep thread process
$str = 'w0'; for($w=0;$w<999999;$w++){ $sql = 'INSERT INTO w1 (wint,wchar) VALUES ('.$w.',"' ...
- java 操作Excel表 创建 查看 修改
需要用到jxl.jar包 修改有两种方法一种是jxl的 另一种需要apache.poi包 package excelChuLi; import java.io.File; import java. ...
- nginx中相关配置
#nginx 开启目录浏览 location / { root /data/www/file //指定实际目录绝对路径: autoindex on; //开启目录浏览功能: autoindex_exa ...
- sqlserver 索引的一些总结【转】
1.1.1 摘要 如果说要对数据库进行优化,我们主要可以通过以下五种方法,对数据库系统进行优化. 1. 计算机硬件调优 2. 应用程序调优 3. 数据库索引优化 4. SQL语句优化 5. 事务处理调 ...
- 关于MVC4.0中@Styles.Render用法与详解
本文分享于http://keleyi.com/a/bjac/q74dybjc.htm文章,感觉写的蛮好所以就拿过来做笔记了,希望对大家有帮助 最近公司的新项目用了MVC 4.0,接下来一步步把 工作中 ...
- android必须要进行为不同分辨率设备切图
以分辨率为1920×1080的android设备为例.在项目中加载资源的位置为xxhdpi文件夹: 例如将图片放入mdpi文件夹中就会出现,图片的横纵尺寸分别乘3被的后果,因为它认为在这个文件夹中是低 ...
- 60个有用CSS代码片段
1.垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑: .verticalcenter{ position: re ...
- 去掉无用的多余的空格(string1.前后空格,2.中间空格)
1.使用NSString中的stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceCharacterSet]]方法只是去掉左右两边的空格: ...