摘要：前端自动化开发环境配置前端自动化开发环境，主要功能有浏览器自动刷新安装去官网下载最新稳定版本，即版本，环境下下载安装版，否则需要自己手动添加路径到环境变量中。
前端自动化开发环境
配置前端自动化开发环境，主要功能有：
浏览器自动刷新
1 安装nodejs去nodejs官网下载最新稳定版本，即LTS版本，Windows环境下下载安装版，否则需要自己手动添加路径到环境变量中。
安装成功打开cmd输入：
$ node -v $ npm -v
出现版本号即安装成功。
2 nodejs包管理器默认安装npm作为包管理器，但国内访问极度不友好，使用cnpm代替，解决不能下载问题。
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
推荐使用yarn，Facebook出品包管理器。
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 初始化项目
在项目文件夹打开cmd：
$ myweb && cd myweb && npm init
接下来一路回车，项目根目录下会生成package.json文件，以下是一个推荐的项目结构
myweb/ ├── src/ │ ├── css │ ├── js │ ├── html │ ├── images │ └── fonts ├── dist/ │ ├── css │ ├── js │ ├── images │ ├── fonts │ └── index.html ├── package.json └── gulpfile.js5 安装gulp和browser-sync
首先是gulp，官网定义：自动化构建工具，它可以极大地缩短开发时间，安装和检查：
$ cnpm install --global gulp $ cnpm install --save-dev gulp $ gulp -v
接下来安装browsersync：
$ cnpm install -g browser-sync
项目根目录下创建gulpfile.js，写入以下内容
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就监听了css、js、html文件，在编辑器中保存浏览器就会自动刷新页面了。
不定期更新，欢迎收藏，Enjoy it!
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/117010.html
摘要：基本逻辑如下图所示对此做了一个点赞的，逻辑不复杂，但达到了作为中间层实现前后端分离的目的。 零、用koa2实现前后端分离的点赞＋1的功能（欢迎clone和star） Github：https://github.com/pengxiaohua/praise-by-koa简书：http://www.jianshu.com/p/c3215333655a 一、前后端不分离存在什么问题 之前做一...
摘要：年底了，开源一套我们的大前端架构，小伙伴们都用得很爽的。听说的人明年会发财文档是一套正式上线的大前端解决方案。是一套前端端彼此相亲相爱不分离，你中有我，我中有你的大前端解决方案。 年底了，开源一套我们的大前端架构aotoo-hub，小伙伴们都用得很爽的。 GITHUB -- 听说star的人明年会发财 文档 aotoo-hub是一套正式上线的大前端解决方案。迭代的这2年多的时间，...
摘要：当一个应用启动时，会自动加载这些库，为应用提供了一个基础环境。也就是说，模板文件只能包含以这三种标签为顶层标签的片段。在中，我们需要判断当前的具体运行环境，以便执行相应的代码。 一、全栈开发平台 - 不仅仅是前端 Meteor和那些名声如雷贯耳的前端框架，比如Angular, React等都不一样，它是一个 采用单一开发语言的全栈开发的平台：开发者可以使用JavaScript同时 进...
阅读 2040·2023-04-25 15:11
阅读 3460·2021-09-23 11:57
阅读 1371·2021-07-26 23:38
阅读 1318·2019-08-30 15:54
阅读 634·2019-08-30 15:53
阅读 3244·2019-08-26 13:36
阅读 985·2019-08-26 12:01
阅读 2861·2019-08-23 16:21
