1,创建新项目
cnpm init
2,安装用到的包
cnpm install gulp gulp-sass node-sass gulp-connect --save-dev
3,在项目根目录创建页面
index.html
<!--Created by Sukla on 2018/3/2.-->
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<link rel="stylesheet" href="./dest/styles/style.css"/>
</head>
<body>
</body>
</html>
4,在根目录创建目录和文件
src/styles/style.scss
5,创建gulp配置文件gulpfile.js
/**
* Created by Sukla on 2018/3/2.
*/
var gulp=require('gulp')
var sass=require('gulp-sass')
var connect=require('gulp-connect')
gulp.task('buildcss',function(){
gulp.src('./src/styles/*.scss')
.pipe(sass().on('error',sass.logError))
.pipe(gulp.dest('./dest/styles/'))
})
gulp.task('buildhtml',function(){
gulp.src('./*.html')
.pipe(connect.reload())
})
gulp.task('watch',function(){
connect.server({
livereload:true
});
gulp.watch('./src/styles/*.scss',['buildcss','buildhtml']);
gulp.watch('./*.html',['buildhtml'])
})
6,启动gulp监听任务
7,浏览器访问localhost:8080