gulp: 使用browser-sync 搭建服務器及頁面自動刷新

gulp: 使用browser-sync 搭建服務器及頁面自動刷新功能

Browser-sycn官網

iTerm

npm i -D browser-sync

gulpfile.js

var browserSync = require('browser-sync');

/* 在執行任務前先執行 ['build','sass'] 這二個任務 */
gulp.task('browser-sync', ['build','sass'], function() {
    browserSync({
        server: {
            baseDir: ".."  /*browser-sync在本地建立基礎開啟的目錄位置*/
        }
    });
});

gulp.task('sass', function(){
	gulp.src('styles/main.scss')  /*來源檔案*/
		.pipe(sass()).on('error', handleError)
		.pipe(prefix())
		.pipe(gulp.dest('../styles')) /*要輸出的檔案,讓它輸出到source文件夾的上層*/
		.pipe(browserSync.reload({stream:true})); /*使用browserSync監聽 sass檔案 */
});

// 用browserSync來監聽 html的改變
gulp.task('rebuild',['build'], function(){
	browserSync.reload();
});

gulp.task('watch', function(){
	/*監聽 html的改變 */
	// gulp.watch(['**/*.html'],['build']);  
	
	gulp.watch(['**/*.html'],['rebuild']);	
	gulp.watch(['styles/*.scss'],['sass']);
});




// 使用browser-sync 後將 sass , build的任務加到 browser-sync內 , default任務改為 browser-sync即可
// gulp.task('default', ['sass', 'build', 'watch']);
gulp.task('default', ['browser-sync', 'watch']);

在 localhost:3000 即可查看當前browser-sync的檔案

 

在iTerm下使用 ifconfig|grep 192 可查看當前網路的ip資訊，在手機瀏覽器上輸入ip+3000端口（例192.168.1.105:3000），即可同步桌面和手機的檔案操作