前端自動化開發環境

前端自動化開發環境

配置前端自動化開發環境，主要功能有：

• 瀏覽器自動刷新

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 包管理器換源

1. npm，打開cmd輸入:

$ npm config set registry https://registry.npm.taobao.org
$ npm config get registry

1. 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

首先是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! 😉