寫在前面
安裝環(huán)境前,默認(rèn)安裝了node環(huán)境
會使用基本的命令行操作
步驟 初始化環(huán)境新建一個文件夾
在文件夾打開命令行
npm init
一直回車默認(rèn)選項就可以啦,也可以自己設(shè)置
最后一次回車結(jié)束后,會生成一個package.json文件
安裝gulp
若是第一次使用gulp,則需要先全局安裝gulp
npm install --global gulp
若已經(jīng)全局安裝gulp,則直接在工程根目錄下:
npm install gulp --save-dev
輸入gulp -v,顯示版本說明安裝成功
安裝browser-syncnpm 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端口,這時輸入相應(yīng)的文件名.html就可以訪問頁面并實時刷新。比如有一個文件名叫主頁.html,在瀏覽器地址欄輸入http://localhost:3000/主頁.html即可。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/84115.html
寫在前面 安裝環(huán)境前,默認(rèn)安裝了node環(huán)境 會使用基本的命令行操作 步驟 初始化環(huán)境 新建一個文件夾 在文件夾打開命令行 npm init 一直回車默認(rèn)選項就可以啦,也可以自己設(shè)置 最后一次回車結(jié)束后,會生成一個package.json文件 安裝gulp 若是第一次使用gulp,則需要先全局安裝gulp npm install --global gulp 若已經(jīng)全局安裝gu...
寫在前面 安裝環(huán)境前,默認(rèn)安裝了node環(huán)境 會使用基本的命令行操作 步驟 初始化環(huán)境 新建一個文件夾 在文件夾打開命令行 npm init 一直回車默認(rèn)選項就可以啦,也可以自己設(shè)置 最后一次回車結(jié)束后,會生成一個package.json文件 安裝gulp 若是第一次使用gulp,則需要先全局安裝gulp npm install --global gulp 若已經(jīng)全局安裝gu...
摘要:打開您的命令行工具,進(jìn)入到目錄下,運行以下其中一條命令。將創(chuàng)建一個本地服務(wù)器并自動打開你的瀏覽器后訪問地址,這一切都會在命令行工具里顯示。 自己寫標(biāo)簽: 實時刷新、 免F5、 gulp + browser-sync 開門見山,首先講明一下本文的定位吧:寫這篇文章是因為自己在平時的學(xué)習(xí)中,一次次試驗了很多的前端實時刷新工具,有順手的,有蹩腳的,有簡單的,有麻煩的,安裝完又折騰,折騰完又卸...
摘要:首先在下面,定義好模版文件,然后開始新加頁面關(guān)系依賴這個環(huán)境,主要基于以及一系列的插件搭建,這個是開發(fā)環(huán)境的依賴關(guān)系其中,主要用來渲染模版引擎以及提供路由功能,同時起一個本地的服務(wù)器。同時附上全文,以供參考 原文發(fā)布于我的博客 www.kisnows.com 為什么要搭這么一套開發(fā)環(huán)境 公司 Pc 端以前遺留的項目,都是基于 jekyll+ruby-sass 這一套比較老的技術(shù)搭建的。...
摘要:生成的文件如下由于給文件添加了哈希值,所以每次編譯出來的和都是不一樣的,這會導(dǎo)致有很多冗余文件,所以我們可以每次在生成文件之前,先將原來的文件全部清空。中也有做這個工作的插件,因此我們可以在編譯壓縮添加哈希值之前先將原文將清空。 原文鏈接:http://mrzhang123.github.io/2016/09/07/gulpUse/項目鏈接:https://github.com/MrZ...
閱讀 713·2023-04-25 17:54
閱讀 2972·2021-11-18 10:02
閱讀 1132·2021-09-28 09:35
閱讀 649·2021-09-22 15:18
閱讀 2847·2021-09-03 10:49
閱讀 3051·2021-08-10 09:42
閱讀 2573·2019-08-29 16:24
閱讀 1255·2019-08-29 15:08