使用gulp-sass 和 gulp-livereload 自动编译sass文件

吐槽

前面我也说过了，出来实习几个月，被前端磨得快没脾气了，特别是写css 时 不停的F5 -> 切换.. 循环 W(￣_￣)W，使用 gulp 前端自动化很好的解决了这个问题。

在这篇blog中不止介绍 gulp-sass 还有一款 gulp-livereload ，两个插件配合使用，简直爽爆了 (≧▽≦)/。

gulp-sass

简介： gulp-sass 是一款编译sass 的插件，只需要一行命令行 就能自动编译sass文件 :-) 够简短吧~

gulp-livereload

简介：gulp-livereload 当监听的文件变化时自动刷新。

搭建简单的环境以及初始化项目

第一步当然是构建项目,为了不让博客冗长，不易阅读，我分步骤的将博客划分开

查看：初始化项目博客

接着在 根目录下创建文件夹以及scss文件



然后下载 gulp-sass 和 gulp-livereload 插件

npm install gulp-sass --save-dev

npm install gulp-livereload  --save-dev

http-server 服务器

自动刷新功能需要配合服务器，所以在这里我使用http-server 作为服务器

npm install http-server -g

运行http-server

关键：gulpfile.js 配置文件

顾名思义，gulpfile.js文件就是 gulp 的配置文件拉，

第一步，先创建gulpfile.js 配置文件



第二部，打开文本编辑器

输入一下代码

'use strict'
var gulp=require('gulp'),  //引入 gulp 插件
sass=require('gulp-sass'), //引入 gulp-sass 插件
livereload=require('gulp-livereload'); //引入gulp-livereload 插件

gulp.task('sass',function(){ //创建一个任务 名叫 cass ,定义一个匿名函数
console.log("编译sass");
return gulp.src('src/**/*.scss') //定义源文件
.pipe(sass()) //调用sass 插件的方法，预编译sass文件
.pipe(gulp.dest('dist/css')) //输出到dist文件夹下的css文件夹中
});

gulp.task('watch',function(){  //创建一个任务 名叫 watch,定义一个匿名函数
livereload.listen(); //关联服务器
gulp.watch('src/**/*.scss',['sass']); //监察sass src文件夹中的scss 格式的文件是否被改动，是的话执行sass 任务编译他
});

接着在git中输入命令行：

gulp watch

安装 谷歌流浪器的 livereload 插件

需要翻墙的 livereload 插件

下载完成后，浏览器有上角会有一个图标


接着只要ctrl+s 保存 sass 文件就会自动刷新页面了。