寫作初衷
筆者是一名大四的本科畢業(yè)生，自學前端已經(jīng)有一陣子了播揪，期間也去公司實習，在秋招和春招的摸爬滾打中筒狠，也算塵埃落定猪狈，去了一家感覺還不錯的公司，過段時間就要去實習了辩恼。由于一直忙于找工作的事情雇庙，畢業(yè)設計就遲遲沒有開展起來，這不到今天才開始搭建前端環(huán)境么≡钜粒現(xiàn)學現(xiàn)寫状共，也是為了怕學過了就忘，當做備忘錄來寫得這篇博客谁帕。不足之處峡继，歡迎指點補充
前期工具準備：
- git：筆者習慣用git bush鍵入命令行，如果你喜歡系統(tǒng)自帶的cmd也可以或者其他插件匈挖，這里以git為例 下載鏈接： git for windows 根據(jù)自己的系統(tǒng)選擇下載的版本
- Node.js: node官網(wǎng) 默認安裝即可碾牌；命令行檢查node是否安裝成功
node -v - npm：安裝node時會帶有npm，但并不是最新的可使用
npm -v檢測版本儡循，執(zhí)行下面這行命令可將npm更新好最新版本舶吗，同樣用npm -v檢測是否更新成功
npm install npm -g - cnpm：如果你在墻內(nèi) 聽君一句勸 使用淘寶鏡像吧，如果是你到了墻外择膝，自動忽略這條
npm install cnpm -g
cnpm -v檢測是否更新成功
使用angular-quickstart ：
- 這是一個已經(jīng)搭建好架構(gòu)的簡易項目誓琼，遵循業(yè)內(nèi)項目架構(gòu)規(guī)范，如果你和我一樣是新手肴捉，推薦使用腹侣，如果你已經(jīng)有了一定的水平，可以指出我這篇文章的不足之處齿穗，畢竟傲隶，這是我第一次寫博客。
- 復制項目鏈接窃页，在桌面創(chuàng)建一個文件夾跺株，文件名自取复濒，打開git命令行，用
git clone （項目鏈接）將項目克隆下來乒省。當然你也可以直接下載壓縮包然后解壓巧颈。但是作為一名合格的碼農(nóng)，推薦還是多使用命令行操作袖扛，這是程序員的自我修養(yǎng)
開始安裝gulp和bower
- 不熟悉這兩個工具的同學建議到gulp和bower了解一下這兩個工具是干嘛用的
-
cd angular-quickstart-master進入目標文件夾 -
cnpm install安裝項目需要用到的包 -
cnpm install -g bower全局安裝bower -
cnpm install -g gulp全局安裝gulp -
bower install下載需要用到的依賴庫
按照以上步驟一步步執(zhí)行砸泛，項目的基本架構(gòu)就已經(jīng)完成了，這個時候你如果是使用的webstorm編輯器攻锰，把項目拉進webstorm打開晾嘶，雙擊根目錄下的index.html右上角Chrome預覽你就可以看到如下的頁面
Paste_Image.png
點擊左上角的鏈接就可以實現(xiàn)無需刷新整個頁面的路由方式的切換妓雾，這時候你就可以開始在這個簡單項目上開發(fā)你自己要開發(fā)的項目了
使用browser-sync
在實習過程中娶吞，做的項目是導師他們搭好，各種工具直接使用械姻，從來沒了解過或者自己根據(jù)需求去搭對應的工具
這里要介紹一項利用browser-sync和gulp配合實現(xiàn)監(jiān)聽文件的改變從而刷新瀏覽器的工具妒蛇，不用手動F5，提高開發(fā)效率楷拳，只要按了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 () {
// 要監(jiān)聽的目錄文件 你可以設置為你自己想要監(jiān)聽的目錄結(jié)構(gòu)
var files = [
'./view/*.html',
'./style/**/*.css',
'./js/**/*.js'
];//這里是你想要監(jiān)聽的文件目錄绣夺，根據(jù)自己項目的實際情況來修改
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
如果烈钞，你在墻內(nèi)，而且沒有采取我上文提到的安裝淘寶鏡像cnpm的建議坤按，那么很不幸毯欣，在這個地方，你可能由于網(wǎng)速的原因臭脓，安裝不了gulp-sass酗钞，你可以在網(wǎng)上尋求其他的解決方案，筆者也試過来累，不過還是一開始就下cnpm較為方便砚作，安裝插件正常網(wǎng)速，效率高一些嘹锁。
然后再重新運行gulp sync指令 這時候就會跳出你系統(tǒng)默認的瀏覽器直接打開你的項目偎巢，這時候你可以嘗試修改你的頁面內(nèi)容，然后看瀏覽器是否成功自動刷新兼耀。
結(jié)語
到這里這次搭建前端環(huán)境的分享也結(jié)束了压昼，這也是我初次接觸前端自動化構(gòu)建工具的使用求冷，gulp還有很多自動化管理文件的工具需要去探索，不過就做畢業(yè)項目的我來說這樣已經(jīng)夠用了窍霞，以后再不斷學習吧匠题，共勉
