sass mapsource --->gulp
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的更多相关文章
- 設定 Bootstrap/SASS/Bower/gulp (Windows平台)
請注意:在進行以下步驟前,你會需要先安裝git,可以參考這篇 git安裝教學 前言 時至今日,幾乎每個人都在討論bootstrap.less 或 sass.我們知道它們是比較新的前端技術,而且有開始愈 ...
- Sass和gulp的简单了解
一.sass less css预处理器 sass里面有2种语法 第一种语法是sass 后缀名必须是sass 第二种语法是scss 后缀名必须是scss ...
- sass sublime text 2 gulp ionic
sass 安装1.全局安装 sass 我的Mac 所以不用再安装Ruby ,直接在终端输入 gem install sass 然后在终端中输入 sass -v 出现 Sass 3.4.8 (selec ...
- gulp sass使用
var gulp = require("gulp");var sass = require("gulp-sass-china");var dgbl = requ ...
- 极其简单的使用基于gulp和sass前端工作流
简单的记录自己如何在实际工作中使用gulp和sass的.我的原则是,小而美! gulp与sass介绍 gulp 什么是gulp?和Grunt一样,是一种任务管理工具:和Grunt又不一样,gulp是一 ...
- 使用gulp编译sass
之前写了一篇在ruby环境下如何编译sass的文章:<css预处理器sass使用教程(多图预警)>,随着现在前端构建工具的兴起,也学着使用这些工具来编译sass.webpack存在一个CS ...
- 前端-如何用gulp快速搭建项目(sass预编译,代码压缩,css前缀,浏览器自动刷新,雪碧图合成)
一:gulp优点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速 利用 Node ...
- 使用 gulp 编译 Sass
无论是 node-sass 还是 ruby-sass 使用 npm 安装都非常的慢,甚至会装不上.及其不利于团队协作.建议使用 less 作为 css 预处理器. 如果因为 less 不支持自定义函数 ...
- 《移动Web前端高效开发实战》笔记2——使用Gulp构建一个ECMAScript 6和Sass应用
8.3.1 安装和配置 运行Gulp需要Node.js环境,请参看第二章内容搭建Node.js环境.使用NPM全局安装Gulp,命令如下: npm install gulp-cli –g 然后,在项目 ...
随机推荐
- 黄聪:wordpress自动选择上一篇文章选择的分类目录
有时候,我们需要连续发布同一个分类下的文章,每篇文章都要重新选择分类非常麻烦.下面,我们就用程序来搞定这个问题. add_action('publish_post', 'save_fl' ); add ...
- [Bug-IOS] - linker command failed with exit code 1 (use -v to see invocation)
Ld /Users/Rubert/Library/Developer/Xcode/DerivedData/OC_Language-emftyzftyvhdpuaxipddjmpnpvox/Build/ ...
- OAF_架构MVC系列2 - Model的概述(概念)
2014-06-22 Created By BaoXinjian
- py继续
这个正则里面有引号,我外面在一个引号就出问题了,应该怎么处理 用双引号
- 关于this指向思考
事情起因为<js函数式编程指南>里面看到这段话: 上例DB对象中的save方法作为参数传入到fs的readFile,按道理this指向DB,为啥作者的意思是存在this指针可能会指向其他地 ...
- log4net日志信息 插入 mysql数据库?
log4net配置文件如下: <!--插入数据库--> <appender name="AdoNetAppender_MySql" type="log4 ...
- Git中的文件状态和使用
(暂存区 即Index In Git) commit 到 local respository的内容,不想push,则使用git reset 将文件状态回转到staged|modified|unstag ...
- dede织梦列表页如何调用全站子栏目
网站原代码:{dede:channel type='son'} <a href="[field:typelink/]">[field:typename/]</a& ...
- 解决 aspx 页面 TextBox 不支持 type="number"
安装 framework 4 并且打上补丁 Microsoft .NET Framework 4 可靠性更新 1 (KB2533523) https://www.microsoft.com/zh-cn ...
- try-catch中的finally块
finally块定义在catch的最后,只能出现一次. 无论程序是否出错都会执行的快板!无条件执行