前言:前段时间学习了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. Nodejs:Glob对象

    模块Glob: glob主要用处为筛选文件 API样例: var globInstance = new glob.Glob("@(a|a1|b).js",{nonull:true, ...

  2. 源码网站(msdn.itellyou.cn) good

    verysource 100万源码http://www.verysource.com/category/delphi-vcl/ MSDN DOWNLOADhttp://msdn.itellyou.cn ...

  3. Yii入门☞应用

    Yii 应用的静态结构 应用: require可以有返回值,Yii中经常返回数组用以配置.以前只知道引用文件成功返回1. controllerMap属性允许你指定一个控制器ID到任意控制器类,修改配置 ...

  4. django url.py使用

    主要对象:patterns和url url有两个主要的参数,第一个是正则模板,第二个是处理的方法 他们的对应关系是,当我们在浏览器当中url的形式与正则相匹配时 就转向处理方法 如果url.py中的值 ...

  5. 微信支付开发(7) H5支付

    关键字:微信支付 微信支付v3 H5支付 wap支付 prepay_id 作者:方倍工作室原文: http://www.cnblogs.com/txw1958/p/wxpayv3_h5.html 本文 ...

  6. DataTables样式

    Styling 官方链接 AdminLTE HTML代码 <div class="row"> <div class="col-xs-12"&g ...

  7. Java提高篇——单例模式

    介绍 在我们日常的工作中经常需要在应用程序中保持一个唯一的实例,如:IO处理,数据库操作等,由于这些对象都要占用重要的系统资源,所以我们必须限制这些实例的创建或始终使用一个公用的实例,这就是我们今天要 ...

  8. C++ 中的std::vector介绍(转)

    vector是C++标准模板库中的部分内容,它是一个多功能的,能够操作多种数据结构和算法的模板类和函数库.vector之所以被认为是一个容器,是因为它能够像容器一样存放各种类型的对象,简单地说,vec ...

  9. C++数组实现的循环队列

    #include<iostream> #include <string> /* 功能:数组实现的循环队列,C++实现,学习参考 */ using namespace std; ...

  10. splitFile2SmallFile

    1. split file into several files """ this is aa customizable version of the standard ...