gulp+browser-sync實現(xiàn)前端自動化刷新

cikenerd 發(fā)布于2019-08-01 17:11 / 3468人閱讀

寫在前面

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

會使用基本的命令行操作

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

新建一個文件夾

在文件夾打開命令行

npm init

一直回車默認選項就可以啦，也可以自己設置

最后一次回車結束后，會生成一個package.json文件

安裝gulp

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

npm install --global gulp

若已經全局安裝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"]);

測試

在工程根目錄下打開命令行運行：

gulp

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

GPU云服務器云服務器自動刷新代碼 html自動刷新 cdn自動刷新自動刷新設置教程

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50998.html

gulp+browser-sync實現(xiàn)前端自動化刷新

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

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

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

Java3y 2019-08-29 12:57 評論0 收藏0
前端開發(fā)：實時刷新（及時預覽）工具小匯總，兼有gulp+browser-sync設置方法

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

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

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

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

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

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