browser-sync插件与gulp的简单配合使用

# browser-sync插件与gulp的简单配合使用

Browser-sync插件能让浏览器实时、快速响应您的文件更改并自动刷新页面。gulp用自动化构建工具增强你的工作流程,使用它，我们主要是为了进行css或者js的压缩或者打包等工作

# 一、gulp的安装

# 全局安装

npm install -g gulp

# 局部安装

npm install --save-dev gulp

# 二、browser-sync与gulp的配合使用

# 2.1 安装插件

npm install --save-dev gulp
npm install --save-dev browser-sync
npm install --save-dev gulp-sass

1
2
3

# 2.2 编写脚本(gulpfile.js)

// 加载插件
var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');
var reload      = browserSync.reload;
// 定义文件路径
var src = {
    scss: 'app/scss/*.scss',
    css:  'app/css',
    html: 'app/*.html'
};
// 监视静态资源
gulp.task('serve', ['sass'], function() {

    browserSync.init({
        server: "./app"
    });
    gulp.watch(src.scss, ['sass']);
    gulp.watch(src.html).on('change', reload);
});
// 编写sass文件转换的任何
gulp.task('sass', function() {
    return gulp.src(src.scss)
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(src.css))
        .pipe(reload({stream: true}));
});
// 启动后，执行默认的serve任务
gulp.task('default', ['serve']);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

解析：脚本中监测sass文件，发现sass文件改动，会自动生成对应的css文件，并自动刷新页面
项目目录下的任意html文件改变，也会自动刷新

# 2.3 添加脚本到package.json

"script" : {
  "start": "gulp"
}

1
2
3

解析: 运行"npm run start"命令启动gulp

#前端工程化

← browser-sync的安装与使用前端电子书→