详细,请戳这里

1.安装插件

npm install --save-dev gulp-sass gulp-sourcemaps gulp-autoprefixer

如果安装错误,请用sudo 权限;

2.在gulp.js中,引用所需的插件如下;

var sass = require('gulp-sass');
var prefix = require('gulp-autoprefixer');
var maps = require('gulp-sourcemaps');

3.新建任务

var path = {
scss: './www/style/Myself.scss',
css: './www/style/'
}
//编译sass
gulp.task('sass', function() {
gulp.src( path.scss)
.pipe(maps.init())
.pipe(sass({ outputStyle: 'compressed' }))
.pipe(maps.write())
.pipe(gulp.dest( path.css ))
}); gulp.task('autoprefix', function() {
gulp.src( path.css )
.pipe(prefix('last 5 versions', '> 1%', 'ie8'))
.pipe(gulp.dest( path.css ));
});

4.在谷歌浏览器设置一下;

点击控制台的设置按钮 ;

如图

选择图中的

最后你会在图1中看到结果;

sass mapsource --->gulp的更多相关文章

  1. 設定 Bootstrap/SASS/Bower/gulp (Windows平台)

    請注意:在進行以下步驟前,你會需要先安裝git,可以參考這篇 git安裝教學 前言 時至今日,幾乎每個人都在討論bootstrap.less 或 sass.我們知道它們是比較新的前端技術,而且有開始愈 ...

  2. Sass和gulp的简单了解

        一.sass  less    css预处理器        sass里面有2种语法  第一种语法是sass  后缀名必须是sass   第二种语法是scss  后缀名必须是scss      ...

  3. sass sublime text 2 gulp ionic

    sass 安装1.全局安装 sass 我的Mac 所以不用再安装Ruby ,直接在终端输入 gem install sass 然后在终端中输入 sass -v 出现 Sass 3.4.8 (selec ...

  4. gulp sass使用

    var gulp = require("gulp");var sass = require("gulp-sass-china");var dgbl = requ ...

  5. 极其简单的使用基于gulp和sass前端工作流

    简单的记录自己如何在实际工作中使用gulp和sass的.我的原则是,小而美! gulp与sass介绍 gulp 什么是gulp?和Grunt一样,是一种任务管理工具:和Grunt又不一样,gulp是一 ...

  6. 使用gulp编译sass

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

  7. 前端-如何用gulp快速搭建项目(sass预编译,代码压缩,css前缀,浏览器自动刷新,雪碧图合成)

    一:gulp优点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速 利用 Node ...

  8. 使用 gulp 编译 Sass

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

  9. 《移动Web前端高效开发实战》笔记2——使用Gulp构建一个ECMAScript 6和Sass应用

    8.3.1 安装和配置 运行Gulp需要Node.js环境,请参看第二章内容搭建Node.js环境.使用NPM全局安装Gulp,命令如下: npm install gulp-cli –g 然后,在项目 ...

随机推荐

  1. [Serializable]的应用--注册码的生成,加密和验证

    1.首先定义注册类RegisterEntity [Serializable] public class RegisterEntity { public string RegisterKey; publ ...

  2. DBA_Tablespace表空间的概念和管控(概念)

    2014-07-24 Created By BaoXinjian

  3. 不能向Github提交某一類型的文件

    之前在github上建了6個project,但是其中有一個不能提交jar文件,其他的都可以.後來發現原來在項目中有一個叫.gitignore的文件,其他項目里的都是/bin,但是那個不能提交jar的項 ...

  4. Ubuntu离线安装包制作(转载)

    From:http://blog.csdn.net/nupt123456789/article/details/11649603 1.应用场景 a.需要在多台电脑上安装同一软件,且软件很大,下载需要时 ...

  5. SQL SERVER 中的 object_id()函数

    在SQLServer数据库中,如果查询数据库中是否存在指定名称的索引或者外键约束等,经常会用到object_id('name','type')方法,做笔记如下: ? 语法:object_id('obj ...

  6. 区分DPI、分辨率(PPI)、图像的物理大小、像素宽度

    分辨率都知道,越高越清晰. 一.描述分辨率的单位有:    dpi(点每英寸).lpi(线每英寸)和ppi(像素每英寸).但只有lpi是描述光学分辨率的尺度的.虽然dpi和ppi也属于分辨率范畴内的单 ...

  7. Cocoa编程中视图控制器与视图类详解

    iPhone编程规则是:一个窗口,多个视图.UIView是iPhone屏幕上很多控件的基础类.每个iPhone用户界面都是由显示在UIWindow(这其实也是个特殊的UIView)内的众多UIView ...

  8. 各式 Web 前端開發工具整理

    程式碼編寫工具 (Coding Tools) 工作流程/建置/組合 (Workflow/Builds/Assemblers) lumbar brunch grunt lineman yeoman Ta ...

  9. Zabbix监控mysql配置及故障告警配置

    本文主要介绍zabbix监控mysql的配置,包含使用zabbix自带模板监控mysql相关信息及自定义key监控mysql同步情况.同时介绍了触发器的创建及zabbix通过邮件方式告警配置. 一.配 ...

  10. C++学习19 类的多继承

    在前面的例子中,派生类都只有一个基类,称为单继承.除此之外,C++也支持多继承,即一个派生类可以有两个或多个基类. 多继承容易让代码逻辑复杂.思路混乱,一直备受争议,中小型项目中较少使用,后来的 Ja ...