gulp構建專案(二):啟本地服務
阿新 • • 發佈:2018-12-01
一、安裝browser-sync模組
npm i -D browser-sync
二、引入browser-sync模組,並初始化
var browserSync = require('browser-sync').create();
gulp.task('browser', function(){
browserSync.init({
server: './dist' // 訪問目錄
// proxy: "你的域名或IP" // 設定代理
});
});
gulp.task( 'default', ['clean'], function() {
gulp.start(['html', 'js_libs', 'js_main','css_main','images', 'browser'])
});
三、執行gulp命令,完成後會自動開啟瀏覽器
會發現報錯:找不到圖片。
原因是:執行browser任務時,images任務還沒有執行完畢,所以找不到dist/images檔案。
臨時解決方案:重新重新整理頁面就可以了。
最終解決方案:是讓說有的任務按照指定順序執行,請參照後續文章
四、伺服器地址說明
[ Browsersync] Access URLs:
----------------------------------------
Local: http://localhost:3000
External: http://169.254.109.182:3000
1、Local: http://localhost:3000(預設開啟此伺服器地址)
2、External: http://169.254.109.182:3000(可用手機訪問)
注意:需要手機除錯的時候可以訪問這個地址,但手機和電腦要在同一網路
相關文章