前端自动化之sass实时编译及自动刷新浏览器

gulp livereload实现sass实时编译及浏览器自动刷新

首先gulp是基于Node的，所以确保你已经安装 node.js，在Nodejs官方网站下载跟自己操作系统相对应的安装包。

先说一下gulp安装流程：

1：全局安装gulp，操作为： npm install gulp -g;
2:在根目录下创建 package.json文件，操作为：npm init，之后根据操作输入“名字，版本号，描述”等内容，直接按回车则使用默认值，最后根据提示输入YES即可；输完后根目录下多了个package.json文件；
3:本地安装gulp,先进入你的项目所在，如d盘下的myproject/app

d: 进入D盘；
cd myproject/app 进入myproject下面的app文件夹;

然后在当前项目根目录下输入：
npm install --save-dev gulp；

可以发现我们安装了2次，全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能。

4.根目录下创建 gulpfile.js，此为配置文件，有关gulp的任务都写在里面，后面再讲。

至此,gulp的基本安装就已经结束，下面来安装gulp插件，有关的常用插件像代码压缩，图片压缩，重命名等还是比较多的，可以去npm上找，再次就不举例了，本文只用简单介绍自动刷新相关插件，（本想sass实时编译成css再自动刷新的）

先按照服务器插件：
livereload需要在服务器上运行，可以先npm install http-server -g；装一个插件，如果你有自己的本地服务器也行；
如果系统是win10或者8, 可能会出错，退出Node再以管理员的身份打开，重新安装即可；
安装完然后输入http-server，出现此图片代表启用服务成功；由于启用后就没法进行其他操作了（难道是我的问题？），所以再打开一个 node(反正又不要钱)
装完后以服务器环境打开文件，默认地址为 http://192.168.0.110:8080 （要找到html文件位置)

接着安装sass编译插件，npm install --save-dev gulp-ruby-sass （电脑必须已安装Ruby环境，如果没有可以则安装gulp-sass插件，64位系统下安装可能会出错，据我查资料说是2进制的问题，表示一脸懵逼）

再安装livereload插件：
npm install gulp gulp-livereload -g

安装完后cd进入项目所在位置输入livereload

需要的文件都装好后，就可以来写上面的 gulpfile.js配置文件了；

//引入插件
var gulp = require("gulp");
var livereload = require("gulp-livereload");
var sass = require("gulp-ruby-sass");

//执行任务，意思为监听src下的所有文件，发现有变动即刷新浏览器，根据自己的文件目录写监听的位置
gulp.task("sass", function() {

return sass("src/sass/*.scss")
.pipe(gulp.dest("src/css2"))
.pipe(livereload());
})

gulp.task('sasswatch', function() {

gulp.watch('src/sass/*.scss',["sass"]

);
});

gulp.task('default', function() {

livereload.listen();
gulp.watch('src/**/*.*',function(file) {
livereload.changed(file.path);
}
);
});

为了让浏览器自动刷新还需要装一个chrome的插件，但由于要FQ就算了，以下面的方案代替：
在index.html中引入一下script标签

<script>
document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] +
':35729/livereload.js?snipver=1"></' + 'script>')
</script>

至此就可以正常搞起，亲测可用。 有双屏的写起来爽很多，只要ctrl+s保存就你懂得！！！！呵呵呵呵。

gulp.task是gulp的api之一，作用为定义任务，有关其他的api像src watch pipe dest什么的就大家自己研究了。

研究了3个多小时，大家要是能用了就点个赞。有什么问题可以咨询一下我，我要是懂得就帮你解答一下，不懂得我也没办法，本人也就刚工作一个月的水平，还是比较水的，哪里写错了大家见谅一下。