資訊專欄INFORMATION COLUMN
摘要：前端自動(dòng)化開發(fā)環(huán)境配置前端自動(dòng)化開發(fā)環(huán)境，主要功能有瀏覽器自動(dòng)刷新安裝去官網(wǎng)下載最新穩(wěn)定版本，即版本，環(huán)境下下載安裝版，否則需要自己手動(dòng)添加路徑到環(huán)境變量中。
前端自動(dòng)化開發(fā)環(huán)境
配置前端自動(dòng)化開發(fā)環(huán)境，主要功能有：
瀏覽器自動(dòng)刷新
1 安裝nodejs去nodejs官網(wǎng)下載最新穩(wěn)定版本，即LTS版本，Windows環(huán)境下下載安裝版，否則需要自己手動(dòng)添加路徑到環(huán)境變量中。
安裝成功打開cmd輸入：
$ node -v $ npm -v
出現(xiàn)版本號(hào)即安裝成功。
2 nodejs包管理器默認(rèn)安裝npm作為包管理器，但國內(nèi)訪問極度不友好，使用cnpm代替，解決不能下載問題。
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
推薦使用yarn，F(xiàn)acebook出品包管理器。
3 包管理器換源npm，打開cmd輸入:
$ npm config set registry https://registry.npm.taobao.org $ npm config get registry
yarn，打開cmd輸入:
$ yarn config set registry https://registry.npm.taobao.org $ yarn config get registry4 初始化項(xiàng)目
在項(xiàng)目文件夾打開cmd：
$ myweb && cd myweb && npm init
接下來一路回車，項(xiàng)目根目錄下會(huì)生成package.json文件，以下是一個(gè)推薦的項(xiàng)目結(jié)構(gòu)
myweb/ ├── src/ │ ├── css │ ├── js │ ├── html │ ├── images │ └── fonts ├── dist/ │ ├── css │ ├── js │ ├── images │ ├── fonts │ └── index.html ├── package.json └── gulpfile.js5 安裝gulp和browser-sync
首先是gulp，官網(wǎng)定義：自動(dòng)化構(gòu)建工具，它可以極大地縮短開發(fā)時(shí)間，安裝和檢查：
$ cnpm install --global gulp $ cnpm install --save-dev gulp $ gulp -v
接下來安裝browsersync：
$ cnpm install -g browser-sync
項(xiàng)目根目錄下創(chuàng)建gulpfile.js，寫入以下內(nèi)容
var gulp = require("gulp");
var browserSync = require("browser-sync").create();
var reload = browserSync.reload;
gulp.task("serve", function() {
browserSync.init({
server: {
baseDir: "./dist"
}
});
gulp.watch("./src/html/**/*.html").on("change", reload);
gulp.watch("./src/html/**/*.css").on("change", reload);
gulp.watch("./src/html/**/*.js").on("change", reload);
});
之后去命令行輸入：
$ gulp serve
這時(shí)gulp就監(jiān)聽了css、js、html文件，在編輯器中保存瀏覽器就會(huì)自動(dòng)刷新頁面了。
不定期更新，歡迎收藏，Enjoy it!
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/98102.html
摘要：前端自動(dòng)化開發(fā)環(huán)境配置前端自動(dòng)化開發(fā)環(huán)境，主要功能有瀏覽器自動(dòng)刷新安裝去官網(wǎng)下載最新穩(wěn)定版本，即版本，環(huán)境下下載安裝版，否則需要自己手動(dòng)添加路徑到環(huán)境變量中。 前端自動(dòng)化開發(fā)環(huán)境 配置前端自動(dòng)化開發(fā)環(huán)境，主要功能有： 瀏覽器自動(dòng)刷新 1 安裝nodejs 去nodejs官網(wǎng)下載最新穩(wěn)定版本，即LTS版本，Windows環(huán)境下下載安裝版，否則需要自己手動(dòng)添加路徑到環(huán)境變量中。安裝成功打開...
摘要：基本邏輯如下圖所示對(duì)此做了一個(gè)點(diǎn)贊的，邏輯不復(fù)雜，但達(dá)到了作為中間層實(shí)現(xiàn)前后端分離的目的。 零、用koa2實(shí)現(xiàn)前后端分離的點(diǎn)贊＋1的功能（歡迎clone和star） Github：https://github.com/pengxiaohua/praise-by-koa簡書：http://www.jianshu.com/p/c3215333655a 一、前后端不分離存在什么問題 之前做一...
摘要：年底了，開源一套我們的大前端架構(gòu)，小伙伴們都用得很爽的。聽說的人明年會(huì)發(fā)財(cái)文檔是一套正式上線的大前端解決方案。是一套前端端彼此相親相愛不分離，你中有我，我中有你的大前端解決方案。 年底了，開源一套我們的大前端架構(gòu)aotoo-hub，小伙伴們都用得很爽的。 GITHUB -- 聽說star的人明年會(huì)發(fā)財(cái) 文檔 aotoo-hub是一套正式上線的大前端解決方案。迭代的這2年多的時(shí)間，...
摘要：當(dāng)一個(gè)應(yīng)用啟動(dòng)時(shí)，會(huì)自動(dòng)加載這些庫，為應(yīng)用提供了一個(gè)基礎(chǔ)環(huán)境。也就是說，模板文件只能包含以這三種標(biāo)簽為頂層標(biāo)簽的片段。在中，我們需要判斷當(dāng)前的具體運(yùn)行環(huán)境，以便執(zhí)行相應(yīng)的代碼。 一、全棧開發(fā)平臺(tái) - 不僅僅是前端 Meteor和那些名聲如雷貫耳的前端框架，比如Angular, React等都不一樣，它是一個(gè) 采用單一開發(fā)語言的全棧開發(fā)的平臺(tái)：開發(fā)者可以使用JavaScript同時(shí) 進(jìn)...
閱讀 3795·2021-09-29 09:34
閱讀 3770·2021-09-27 13:34
閱讀 566·2021-09-24 09:47
閱讀 3037·2019-08-30 15:53
閱讀 1808·2019-08-26 13:54
閱讀 2086·2019-08-26 13:43
閱讀 531·2019-08-23 14:47
閱讀 1740·2019-08-23 14:28
