1.添加gulp、gulp-sass、browser-sync组件
npm install --save-dev gulp gulp-sass browser-sync
会在package.json中添加如下内容:
"devDependencies": {
"browser-sync": "^2.10.1",
"gulp": "^3.9.0",
"gulp-sass": "^2.1.1"
}
2.新建gulpfile.js文件
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {
browserSync.init({
server: "./src"
});
gulp.watch("src/scss/*.scss", ['sass']);
// gulp.watch("src/*.html" ,browserSync.reload);
gulp.watch("src/*.html").on('change', browserSync.reload);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
return gulp.src("src/scss/*.scss")
.pipe(sass())
.pipe(gulp.dest("src/css"))
.pipe(browserSync.stream());
});
gulp.task('default', ['serve']);
3.命令行运行gulp
gulp
4.浏览器打开页面
http://localhost:3000/
它会自动增加如下代码到html
<script async="" src="/browser-sync/browser-sync-client.2.10.1.js"></script>