gulp+browser-sync實(shí)現(xiàn)前端自動(dòng)化刷新

Java3y 發(fā)布于2019-08-29 12:57 / 1302人閱讀

寫在前面

安裝環(huán)境前，默認(rèn)安裝了node環(huán)境

會(huì)使用基本的命令行操作

步驟 初始化環(huán)境

新建一個(gè)文件夾

在文件夾打開命令行

npm init

一直回車默認(rèn)選項(xiàng)就可以啦，也可以自己設(shè)置

最后一次回車結(jié)束后，會(huì)生成一個(gè)package.json文件

安裝gulp

若是第一次使用gulp，則需要先全局安裝gulp

npm install --global gulp

若已經(jīng)全局安裝gulp,則直接在工程根目錄下：

npm install gulp --save-dev

輸入gulp -v,顯示版本說明安裝成功

安裝browser-sync

npm install browser-sync --save-dev

配置gulpfile文件

var gulp        = require("gulp");
var browserSync = require("browser-sync").create();

// Static server
gulp.task("browser-sync", function() {
    var files = [
    "**/*.html",   // 監(jiān)聽html
    "**/*.css", // 監(jiān)聽css
    "**/*.js" // 監(jiān)聽js
    ];
    browserSync.init(files,{
        server: {
            baseDir: "./"
        }
    });
});

gulp.task("default",["browser-sync"]);

測試

在工程根目錄下打開命令行運(yùn)行：

gulp

若上述無錯(cuò)誤，將會(huì)在瀏覽器打開3000端口，這時(shí)輸入相應(yīng)的文件名.html就可以訪問頁面并實(shí)時(shí)刷新。比如有一個(gè)文件名叫主頁.html，在瀏覽器地址欄輸入http://localhost:3000/主頁.html即可。

云服務(wù)器 GPU云服務(wù)器自動(dòng)刷新代碼 html自動(dòng)刷新 cdn自動(dòng)刷新自動(dòng)刷新設(shè)置教程

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112259.html

相關(guān)文章

gulp+browser-sync實(shí)現(xiàn)前端自動(dòng)化刷新

寫在前面安裝環(huán)境前，默認(rèn)安裝了node環(huán)境會(huì)使用基本的命令行操作步驟初始化環(huán)境新建一個(gè)文件夾在文件夾打開命令行 npm init 一直回車默認(rèn)選項(xiàng)就可以啦，也可以自己設(shè)置最后一次回車結(jié)束后，會(huì)生成一個(gè)package.json文件安裝gulp 若是第一次使用gulp，則需要先全局安裝gulp npm install --global gulp 若已經(jīng)全局安裝gu...

stackfing 2019-08-20 18:08 評論0 收藏0
gulp+browser-sync實(shí)現(xiàn)前端自動(dòng)化刷新

寫在前面安裝環(huán)境前，默認(rèn)安裝了node環(huán)境會(huì)使用基本的命令行操作步驟初始化環(huán)境新建一個(gè)文件夾在文件夾打開命令行 npm init 一直回車默認(rèn)選項(xiàng)就可以啦，也可以自己設(shè)置最后一次回車結(jié)束后，會(huì)生成一個(gè)package.json文件安裝gulp 若是第一次使用gulp，則需要先全局安裝gulp npm install --global gulp 若已經(jīng)全局安裝gu...

cikenerd 2019-08-01 17:11 評論0 收藏0
前端開發(fā)：實(shí)時(shí)刷新（及時(shí)預(yù)覽）工具小匯總，兼有gulp+browser-sync設(shè)置方法

摘要：打開您的命令行工具，進(jìn)入到目錄下，運(yùn)行以下其中一條命令。將創(chuàng)建一個(gè)本地服務(wù)器并自動(dòng)打開你的瀏覽器后訪問地址，這一切都會(huì)在命令行工具里顯示。自己寫標(biāo)簽：實(shí)時(shí)刷新、免F5、 gulp + browser-sync 開門見山，首先講明一下本文的定位吧：寫這篇文章是因?yàn)樽约涸谄綍r(shí)的學(xué)習(xí)中，一次次試驗(yàn)了很多的前端實(shí)時(shí)刷新工具，有順手的，有蹩腳的，有簡單的，有麻煩的，安裝完又折騰，折騰完又卸...

villainhr 2019-08-21 10:47 評論0 收藏0
基于 Express+Gulp+BrowserSync 搭建一套高性能的前端開發(fā)環(huán)境

摘要：首先在下面，定義好模版文件，然后開始新加頁面關(guān)系依賴這個(gè)環(huán)境，主要基于以及一系列的插件搭建，這個(gè)是開發(fā)環(huán)境的依賴關(guān)系其中，主要用來渲染模版引擎以及提供路由功能，同時(shí)起一個(gè)本地的服務(wù)器。同時(shí)附上全文，以供參考原文發(fā)布于我的博客 www.kisnows.com 為什么要搭這么一套開發(fā)環(huán)境公司 Pc 端以前遺留的項(xiàng)目，都是基于 jekyll+ruby-sass 這一套比較老的技術(shù)搭建的。...

xioqua 2019-08-19 17:54 評論0 收藏0
基于 Gulp 的簡易前端自動(dòng)化工程搭建

摘要：生成的文件如下由于給文件添加了哈希值，所以每次編譯出來的和都是不一樣的，這會(huì)導(dǎo)致有很多冗余文件，所以我們可以每次在生成文件之前，先將原來的文件全部清空。中也有做這個(gè)工作的插件，因此我們可以在編譯壓縮添加哈希值之前先將原文將清空。原文鏈接：http://mrzhang123.github.io/2016/09/07/gulpUse/項(xiàng)目鏈接：https://github.com/MrZ...

Blackjun 2019-08-22 10:36 評論0 收藏0