成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端自動化開發(fā)環(huán)境

DoINsiSt / 2303人閱讀

摘要：前端自動化開發(fā)環(huán)境配置前端自動化開發(fā)環(huán)境，主要功能有瀏覽器自動刷新安裝去官網(wǎng)下載最新穩(wěn)定版本，即版本，環(huán)境下下載安裝版，否則需要自己手動添加路徑到環(huán)境變量中。

前端自動化開發(fā)環(huán)境

配置前端自動化開發(fā)環(huán)境，主要功能有：

瀏覽器自動刷新

1 安裝nodejs

去nodejs官網(wǎng)下載最新穩(wěn)定版本，即LTS版本，Windows環(huán)境下下載安裝版，否則需要自己手動添加路徑到環(huán)境變量中。
安裝成功打開cmd輸入：

$ node -v
$ npm -v

出現(xiàn)版本號即安裝成功。

2 nodejs包管理器

默認安裝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 registry
4 初始化項目

在項目文件夾打開cmd：

$ myweb && cd myweb && npm init

接下來一路回車，項目根目錄下會生成package.json文件，以下是一個推薦的項目結(jié)構(gòu)

myweb/
├── src/
│   ├── css
│   ├── js
│   ├── html
│   ├── images
│   └── fonts
├── dist/
│   ├── css
│   ├── js
│   ├── images
│   ├── fonts
│   └── index.html
├── package.json
└── gulpfile.js
5 安裝gulp和browser-sync

首先是gulp，官網(wǎng)定義：自動化構(gòu)建工具，它可以極大地縮短開發(fā)時間，安裝和檢查：


$ cnpm install --global gulp

$ cnpm install --save-dev gulp

$ gulp -v

接下來安裝browsersync：

$ cnpm install -g browser-sync

項目根目錄下創(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

這時gulp就監(jiān)聽了css、js、html文件，在編輯器中保存瀏覽器就會自動刷新頁面了。

不定期更新，歡迎收藏，Enjoy it!

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

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

相關(guān)文章

  • 前端自動化開發(fā)環(huán)境

    摘要：前端自動化開發(fā)環(huán)境配置前端自動化開發(fā)環(huán)境，主要功能有瀏覽器自動刷新安裝去官網(wǎng)下載最新穩(wěn)定版本，即版本，環(huán)境下下載安裝版，否則需要自己手動添加路徑到環(huán)境變量中。 前端自動化開發(fā)環(huán)境 配置前端自動化開發(fā)環(huán)境，主要功能有： 瀏覽器自動刷新 1 安裝nodejs 去nodejs官網(wǎng)下載最新穩(wěn)定版本，即LTS版本，Windows環(huán)境下下載安裝版，否則需要自己手動添加路徑到環(huán)境變量中。安裝成功打開...

    wow_worktile 評論0 收藏0

  • Node.js作為中間層實現(xiàn)簡單的前后端分離

    摘要：基本邏輯如下圖所示對此做了一個點贊的，邏輯不復(fù)雜，但達到了作為中間層實現(xiàn)前后端分離的目的。 零、用koa2實現(xiàn)前后端分離的點贊＋1的功能（歡迎clone和star） Github：https://github.com/pengxiaohua/praise-by-koa簡書：http://www.jianshu.com/p/c3215333655a 一、前后端不分離存在什么問題 之前做一...

    moven_j 評論0 收藏0

  • aotoo-hub，一體式大前端架構(gòu)

    摘要：年底了，開源一套我們的大前端架構(gòu)，小伙伴們都用得很爽的。聽說的人明年會發(fā)財文檔是一套正式上線的大前端解決方案。是一套前端端彼此相親相愛不分離，你中有我，我中有你的大前端解決方案。 年底了，開源一套我們的大前端架構(gòu)aotoo-hub，小伙伴們都用得很爽的。 GITHUB -- 聽說star的人明年會發(fā)財 文檔 aotoo-hub是一套正式上線的大前端解決方案。迭代的這2年多的時間，...

    raoyi 評論0 收藏0

  • Meteor——以NodeJS為基礎(chǔ)環(huán)境，MongoDB為數(shù)據(jù)環(huán)境的全棧開發(fā)平臺！

    摘要：當(dāng)一個應(yīng)用啟動時，會自動加載這些庫，為應(yīng)用提供了一個基礎(chǔ)環(huán)境。也就是說，模板文件只能包含以這三種標(biāo)簽為頂層標(biāo)簽的片段。在中，我們需要判斷當(dāng)前的具體運行環(huán)境，以便執(zhí)行相應(yīng)的代碼。 一、全棧開發(fā)平臺 - 不僅僅是前端 Meteor和那些名聲如雷貫耳的前端框架，比如Angular, React等都不一樣，它是一個 采用單一開發(fā)語言的全棧開發(fā)的平臺：開發(fā)者可以使用JavaScript同時 進...

    chenatu 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<