ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
>Browser-sync插件能让浏览器实时、快速响应您的文件更改并自动刷新页面。 >gulp用自动化构建工具增强你的工作流程,使用它,我们主要是为了进行css或者js的压缩或者打包等工作 ### gulp的安装 #### 全局安装 ~~~ npm install -g gulp ~~~ #### 局部安装 ~~~ npm install --save-dev gulp ~~~ ### browser-sync与gulp的配合使用 #### 安装插件 ~~~ npm install --save-dev gulp npm install --save-dev browser-sync npm install --save-dev gulp-sass ~~~ #### 编写脚本(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']); ~~~ >解析: 脚本中监测sass文件,发现sass文件改动,会自动生成对应的css文件,并自动刷新页面 > 项目目录下的任意html文件改变,也会自动刷新 #### 添加运行脚本到package.json文件 ~~~ "script" : { "start": "gulp" } ~~~ >解析: 运行"npm run start"命令启动gulp