吐槽
前面我也说过了,出来实习几个月,被前端磨得快没脾气了,特别是写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 插件
下载完成后,浏览器有上角会有一个图标
接着只要ctrl+s 保存 sass 文件就会自动刷新页面了。