寫作初衷
筆者是一名大四的本科畢業生，自學前端已經有一陣子了，期間也去公司實習，在秋招和春招的摸爬滾打中，也算塵埃落定，去了一家感覺還不錯的公司，過段時間就要去實習了。由于一直忙于找工作的事情，畢業設計就遲遲沒有開展起來，這不到今天才開始搭建前端環境么。現學現寫，也是為了怕學過了就忘，當做備忘錄來寫得這篇博客。不足之處，歡迎指點補充
前期工具準備：
- git：筆者習慣用git bush鍵入命令行，如果你喜歡系統自帶的cmd也可以或者其他插件，這里以git為例 下載鏈接： git for windows 根據自己的系統選擇下載的版本
- Node.js: node官網 默認安裝即可；命令行檢查node是否安裝成功
node -v - npm：安裝node時會帶有npm，但并不是最新的可使用
npm -v檢測版本，執行下面這行命令可將npm更新好最新版本，同樣用npm -v檢測是否更新成功
npm install npm -g - cnpm：如果你在墻內 聽君一句勸 使用淘寶鏡像吧，如果是你到了墻外，自動忽略這條
npm install cnpm -g
cnpm -v檢測是否更新成功
使用angular-quickstart ：
- 這是一個已經搭建好架構的簡易項目，遵循業內項目架構規范，如果你和我一樣是新手，推薦使用，如果你已經有了一定的水平，可以指出我這篇文章的不足之處，畢竟，這是我第一次寫博客。
- 復制項目鏈接，在桌面創建一個文件夾，文件名自取，打開git命令行，用
git clone （項目鏈接）將項目克隆下來。當然你也可以直接下載壓縮包然后解壓。但是作為一名合格的碼農，推薦還是多使用命令行操作，這是程序員的自我修養
開始安裝gulp和bower
- 不熟悉這兩個工具的同學建議到gulp和bower了解一下這兩個工具是干嘛用的
-
cd angular-quickstart-master進入目標文件夾 -
cnpm install安裝項目需要用到的包 -
cnpm install -g bower全局安裝bower -
cnpm install -g gulp全局安裝gulp -
bower install下載需要用到的依賴庫
按照以上步驟一步步執行，項目的基本架構就已經完成了，這個時候你如果是使用的webstorm編輯器，把項目拉進webstorm打開，雙擊根目錄下的index.html右上角Chrome預覽你就可以看到如下的頁面
Paste_Image.png
點擊左上角的鏈接就可以實現無需刷新整個頁面的路由方式的切換，這時候你就可以開始在這個簡單項目上開發你自己要開發的項目了
使用browser-sync
在實習過程中，做的項目是導師他們搭好，各種工具直接使用，從來沒了解過或者自己根據需求去搭對應的工具
這里要介紹一項利用browser-sync和gulp配合實現監聽文件的改變從而刷新瀏覽器的工具，不用手動F5，提高開發效率，只要按了Crtl+S自動更新視圖
- 安裝browser-sync插件
cnpm install browser - 第二步 打開
angular-quickstart-master下的gulpfile.js文件 文件末尾加入以下代碼段
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
// static server
gulp.task('sync', function () {
// 要監聽的目錄文件 你可以設置為你自己想要監聽的目錄結構
var files = [
'./view/*.html',
'./style/**/*.css',
'./js/**/*.js'
];//這里是你想要監聽的文件目錄，根據自己項目的實際情況來修改
browserSync.init(files, {
server: {
baseDir: './'
}
})
});
// scss
gulp.task('sass', function () {
return gulp.src('src/sass/*.scss')
.pipe(sass())
.pipe(gulp.dest('dist/css'))
});
//watch
gulp.task('watch', function () {
gulp.watch('src/sass/*.scss', ['sass']);
});
gulp.task('default', function () {
gulp.run('server', 'sass', 'watch')
});
- 然后運行
gulp sync指令
這時候你會收到類似找不到gulp-sass module的錯誤提示，這是因為我們上面的代碼有一句var sass=require('gulp-sass')，這句代碼表明我們需要用到一個名稱為'gulp-sass'的插件，而我們沒有裝，所以有錯誤提示。解決方案：
cnpm install gulp-sass
如果，你在墻內，而且沒有采取我上文提到的安裝淘寶鏡像cnpm的建議，那么很不幸，在這個地方，你可能由于網速的原因，安裝不了gulp-sass，你可以在網上尋求其他的解決方案，筆者也試過，不過還是一開始就下cnpm較為方便，安裝插件正常網速，效率高一些。
然后再重新運行gulp sync指令 這時候就會跳出你系統默認的瀏覽器直接打開你的項目，這時候你可以嘗試修改你的頁面內容，然后看瀏覽器是否成功自動刷新。
結語
到這里這次搭建前端環境的分享也結束了，這也是我初次接觸前端自動化構建工具的使用，gulp還有很多自動化管理文件的工具需要去探索，不過就做畢業項目的我來說這樣已經夠用了，以后再不斷學習吧，共勉
