183 項目環(huán)境
項目環(huán)境說明
本項目是一個模仿小飯桌官網(wǎng)的項目實戰(zhàn)。具有前臺和CMS后臺管理系統(tǒng)楣铁。具有以下模塊：新聞、在線課程更扁、付費資訊盖腕、搜索等模塊。其中涉及到的技術(shù)要點有：Django浓镜、ajax溃列，Restful API，arttemplate.js膛薛、在線視頻播放听隐，支付，haystack搜索哄啄，UEditor富文本編輯器雅任，第
三方分享等风范。
前端方向
-
nvm：用來管理node.js的工具。 -
node.js：自帶有npm包管理工具沪么。 -
npm：類似于Python中的pip硼婿。可以非常方便的管理一些前端開發(fā)的包禽车。 -
gulp：用來自動化開發(fā)流程寇漫。比如sass轉(zhuǎn)css，css和js壓縮等哭当。
后端方向
Python 3.6：開發(fā)語言猪腕。
Django 2.0：開發(fā)框架。
MySQL 5.7：數(shù)據(jù)庫钦勘。
184
前端開發(fā)環(huán)境配置
nvm（Node Version Manager）是一個用來管理node版本的工具陋葡。我們之所以需要使用node，是因為我們需要使用node中的npm(Node Package Manager)彻采，使用npm的目的是為了能夠方便的管理一些前端開發(fā)的包腐缤！nvm的安裝非常簡單，步驟如下：
1.到這個鏈接下載nvm的安裝包：https://github.com/coreybutler/nvm-windows/releases肛响。
2.然后點擊一頓下一步岭粤，安裝即可！
3.安裝完成后特笋，還需要配置環(huán)境變量剃浇。在我的電腦->屬性->高級系統(tǒng)設(shè)置->環(huán)境變量->系統(tǒng)環(huán)境變量->Path下新建一個，把nvm所處的路徑填入進去即可猎物！
4.打開cmd虎囚，然后輸入nvm，如果沒有提示沒有找不到這個命令蔫磨。說明已經(jīng)安裝成功淘讥！
5.Mac或者Linux安裝nvm請看這里：https://github.com/creationix/nvm。也要記得配置環(huán)境變量堤如。
nvm常用命令：
1 nvm install node：安裝最新版的node.js蒲列。nvm i == nvm install。
2 nvm install [version]：安裝指定版本的node.js 搀罢。
3 nvm use [version]：使用某個版本的node蝗岖。
4 nvm list：列出當前安裝了哪些版本的node。
5 nvm uninstall [version]：卸載指定版本的node榔至。
6 nvm node_mirror [url]：設(shè)置nvm的鏡像剪侮。
7 nvm npm_mirror [url]：設(shè)置npm的鏡像。
node 安裝
安裝完nvm后，我們就可以通過nvm來安裝node了瓣俯。這里我們安裝6.4.0版本的的node.js就可以。因為最新版的node.js的npm是5.0的兵怯，上面還有很多坑彩匕。安裝命令如下：
nvm install 6.4.0
如果你的網(wǎng)絡(luò)夠快，那以上命令在稍等片刻之后會安裝成功媒区。如果你的網(wǎng)速很慢驼仪，那以上命令可能會發(fā)生超時。因為node的服務(wù)器地址是https://nodejs.org/dist/袜漩，這個域名的服務(wù)器是在國外绪爸。因此會比較慢。因此我們可以設(shè)置一下nvm的源
arch: 64 //64位系統(tǒng)
proxy: none
nvm node_mirror https://npm.taobao.org/mirrors/node/
nvm npm_mirror https://npm.taobao.org/mirrors/npm/
185
npm
npm(Node Package Manager)在安裝node的時候就會自動的安裝了宙攻。當時前提條件是你需要設(shè)置當前的node的版本：nvm use 6.4.0奠货。然后就可以使用npm了.
關(guān)于npm常用命令以及用法，請看下文座掘。
安裝包：
安裝包分為全局安裝和本地安裝递惋。全局安裝是安裝在當前node環(huán)境中，在可以在cmd中當作命令使用溢陪。而本地安裝是安裝在當前項目中萍虽，只有當前這個項目能使用，并且可以通過require引用形真。安裝的方式只有-g參數(shù)的區(qū)別：
npm install express # 本地安裝
npm install express -g # 全局安裝
本地安裝
- 將安裝包放在
./node_modules下（運行 npm 命令時所在的目錄）杉编，如果沒有node_modules目錄，會在當前執(zhí)行npm命令的目錄下生成node_modules目錄咆霜。 - 可以通過
require()來引入本地安裝的包邓馒。
全局安裝
- 將安裝包放在
/usr/local下或者你node的安裝目錄。 - 可以直接在命令行里使用裕便。
卸載包：
npm uninstall [package]
更新包：
npm update [package]
搜索包：
npm search [package]
使用淘寶鏡像：
npm install -g cnpm --registry=https://registry.npm.taobao.org 那么以后就可以使用cnpm來安裝包了绒净！
186
前端項目搭建
前端我們使用gulp來自動化開發(fā)流程。配置好gulp后偿衰，可以自動給我們處理好一些工作挂疆。比如寫完css后，要壓縮成 .min.css 下翎，寫完 js 后缤言，要做混淆和壓縮， 圖片壓縮等视事。這些工作都可以讓gulp幫我們完成
安裝gulp
1：創(chuàng)建本地包管理環(huán)境：
使用npm init 命令在本地生成一個 package.json 文件胆萧，package.json 是用來記錄你當前這個項目依賴了哪些包，以后別人拿到你得這個項目后，不需要你的node_modules文件夾 （因為node_modules中的包實在太龐大了）跌穗。只需要執(zhí)行 npm install 命令订晌，即會自動安裝 package.json 下 devDependencies中指定的依賴包。
2：安裝gulp
gulp的安裝非常簡單蚌吸，只要使用npm命令安裝即可锈拨。但是因為gulp需要作為命令行的方式運行，因此需要在安裝在系統(tǒng)級別的目錄中羹唠。
npm install gulp -g
因為在本地需要使用require的方式gulp奕枢。因此也需要在本地安裝一份
npm install gulp --save-dev
187
3 創(chuàng)建gulp任務(wù)
要使用gulp來流程化我們的開發(fā)工作。首先需要在項目的根目錄下創(chuàng)建一個gulpfile.js 文件中填寫一下代碼：
var gulp = require("gulp");
gulp.task("greet", function() {
console.log("hello world");
});
這里對代碼一一解釋：
1：通過require語句引用已經(jīng)按照的第三方依賴包佩微。這個require只能是引用當前項目的缝彬，不能引用全局下的。require語法是node.js獨有的哺眯，只能在node.js 環(huán)境下使用
2：gulp.task 是用來創(chuàng)建一個任務(wù)谷浅。gulp.task的第一參數(shù)是命令的名字，第二個參數(shù)是一個函數(shù)族购，就是執(zhí)行這個命令的時候會做什么事情壳贪，都是寫在這個里面的
3：寫完以上代碼后，以后如果想要執(zhí)行g(shù)reet命令寝杖，那么只需要進入項目所在路徑违施，然后終端使用gulp greet 即可執(zhí)行。
188
4：創(chuàng)建處理CSS文件的任務(wù)
gulp只是提供一個框架給我們瑟幕。如果我們想要實現(xiàn)一些更加復(fù)雜的功能磕蒲，比如css壓縮，那么我們還需要安裝一下 gulp-cssnano插件只盹。gulp相關(guān)的插件安裝也是通過npm命令安裝辣往，安裝方式跟其他包是一模一樣 (gulp插件本身就是一個普通的包)
對css文件的處理，需要做的事情就是壓縮殖卑，然后再將壓縮后的文件放在指定目錄下（不要和原來css文件重合了）站削！這里我們使用gulp-cssnano來處理這個工作
npm install gulp-cssnano --save-dev
然后在gulpfile.js中寫入代碼
var gulp = require("gulp");
var cssnano = require("gulp-cssnano");
gulp.task("greet", function() {
console.log("hello world");
});
gulp.task("css",function () {
gulp.src("./css/*.css")
.pipe(cssnano())
.pipe(gulp.dest("./dist/css/"))
});
以上代碼進行解釋：
1：gulp.task: 創(chuàng)建一個css處理任務(wù)
2：gulp.src：找到當前css目錄下所有以 .css 結(jié)尾的 css文件
3：pipe：管道方法。將上一個方法的返回結(jié)果傳給另外一個處理器孵稽。比如以上的 cssnano
4：gulp.dest ：將處理完后的文件许起，放在指定的目錄下。不要放在和原文件相同的目錄菩鲜，以免產(chǎn)生沖突园细，也不方便管理
189
5：修改文件名：
像以上任務(wù)，壓縮完css文件后接校，最好是給他添加一個 .min.css 的后綴猛频，這樣一眼就能知道這個是經(jīng)過壓縮后的文件。這時候我們就需要使用gulp-rename 來
修改了。當然首先也需要安裝npm install gulp-rename --save-dev鹿寻。示例代碼如下
var gulp = require("gulp");
var cssnano = require("gulp-cssnano");
var rename = require("gulp-rename");
gulp.task("greet", function() {
console.log("hello world");
});
gulp.task("css",function () {
gulp.src("./css/*.css")
.pipe(cssnano())//index.css -> index.min.css
.pipe(rename({"suffix":".min"}))
.pipe(gulp.dest("./dist/css/"))
});
在上述代碼中睦柴，我們班增加了一行 .pipe(rename({"suffix":".min"})) , 這個我們就是使用rename方法，并且傳遞一個對象參數(shù)烈和，指定修改名字的規(guī)制為添加一個爱只， .min后綴名，這個gulp-rename還有其他的指定文件名的方式招刹，比如可以在文件名前面加一個前綴等。更多的教程可以看這個: https://www.npmjs.com/package/gulp-rename
190 創(chuàng)建處理js文件的任務(wù)
處理js文件窝趣，我們需要使用到gulp-uglify插件疯暑。安裝命令如下：
npm install gulp-uglify --save-dev
安裝完后，我們就可以對js文件進行處理了哑舒。示例代碼如下：
var gulp = require("gulp")
var rename = require("gulp-rename")
var uglify = require('gulp-uglify');
gulp.task('script',function(){
gulp.src(path.js + '*.js')
.pipe(uglify())
.pipe(rename({suffix:'.min'}))
.pipe(gulp.dest('js/'));
});
這里就是增加了一個.pipe(uglify())的處理妇拯，對js文件進行壓縮和丑化（修改變量名）等處理。更多關(guān)于gulp-uglify的教程洗鸵。請看：https://github.com/mishoo/UglifyJS2#minify-options越锈。
191
合并多個文件
在網(wǎng)頁開發(fā)中，為了加快網(wǎng)頁的渲染速度甘凭，有時候我們會將多個文件壓縮成一個文件，從而減少請求的次數(shù)丹弱。要拼接文件铲咨，我們需要用到gulp-concat插件躲胳。安裝命令如下：
npm install gulp-concat --save-dev
比如我們現(xiàn)在有一個nav.js文件用來控制導(dǎo)航條的。有一個index.js文件用來控制首頁整體內(nèi)容的纤勒。那么我們可以使用以下代碼將這兩個文件合并成一個文件
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
gulp.task('vendorjs',done=>{
gulp.src([
'./js/nav.js',
'./js/index.js'
])
.pipe(concat('index.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/js/'));
done();
});
