前端自动化开发环境-白红宇

前端自动化开发环境

阅读量：6201 次

发布时间：2019-06-21

本文共 1470 字，大约阅读时间需要 4 分钟。

前端自动化开发环境

配置前端自动化开发环境，主要功能有：

浏览器自动刷新

1 安装nodejs

去官网下载最新稳定版本，即LTS版本，Windows环境下下载安装版，否则需要自己手动添加路径到环境变量中。

安装成功打开cmd输入：

$ node -v$ npm -v

出现版本号即安装成功。

2 nodejs包管理器

默认安装npm作为包管理器，但国内访问极度不友好，使用代替，解决不能下载问题。

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

推荐使用，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 registry

4 初始化项目

在项目文件夹打开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.js

5 安装`gulp`和`browser-sync`

首先是，官网定义：自动化构建工具，它可以极大地缩短开发时间，安装和检查：


    $ cnpm install --global gulp
    $ cnpm install --save-dev gulp
    $ gulp -v

接下来安装：

$ 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);});

之后去命令行输入：