django学习笔记-开始前端学习 183-

183 项目环境

项目环境说明

本项目是一个模仿小饭桌官网的项目实战。具有前台和CMS后台管理系统。具有以下模块：新闻、在线课程、付费资讯、搜索等模块。其中涉及到的技术要点有：Django、ajax，Restful API，arttemplate.js、在线视频播放，支付，haystack搜索，UEditor富文本编辑器，第
三方分享等。

前端方向

1. nvm：用来管理node.js的工具。
2. node.js：自带有npm包管理工具。
3. npm：类似于Python中的pip。可以非常方便的管理一些前端开发的包。
4. gulp：用来自动化开发流程。比如sass转css，css和js压缩等。

后端方向

Python 3.6：开发语言。
Django 2.0：开发框架。
MySQL 5.7：数据库。

---

184

前端开发环境配置

nvm（Node Version Manager）是一个用来管理node版本的工具。我们之所以需要使用node，是因为我们需要使用node中的npm(Node Package Manager)，使用npm的目的是为了能够方便的管理一些前端开发的包！nvm的安装非常简单，步骤如下：

1.到这个链接下载nvm的安装包：https://github.com/coreybutler/nvm-windows/releases。
2.然后点击一顿下一步，安装即可！
3.安装完成后，还需要配置环境变量。在我的电脑->属性->高级系统设置->环境变量->系统环境变量->Path下新建一个，把nvm所处的路径填入进去即可！
4.打开cmd，然后输入nvm，如果没有提示没有找不到这个命令。说明已经安装成功！
5.Mac或者Linux安装nvm请看这里：https://github.com/creationix/nvm。也要记得配置环境变量。
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]：设置nvm的镜像。
7 nvm npm_mirror [url]：设置npm的镜像。

node 安装

安装完nvm后，我们就可以通过nvm来安装node了。这里我们安装6.4.0版本的的node.js就可以。因为最新版的node.js的npm是5.0的，上面还有很多坑。安装命令如下：

nvm install 6.4.0

如果你的网络够快，那以上命令在稍等片刻之后会安装成功。如果你的网速很慢，那以上命令可能会发生超时。因为node的服务器地址是https://nodejs.org/dist/，这个域名的服务器是在国外。因此会比较慢。因此我们可以设置一下nvm的源

arch: 64  //64位系统
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的时候就会自动的安装了。当时前提条件是你需要设置当前的node的版本：nvm use 6.4.0。然后就可以使用npm了.
关于npm常用命令以及用法，请看下文。

安装包：

安装包分为全局安装和本地安装。全局安装是安装在当前node环境中，在可以在cmd中当作命令使用。而本地安装是安装在当前项目中，只有当前这个项目能使用，并且可以通过require引用。安装的方式只有-g参数的区别：

npm install express          # 本地安装
npm install express -g   # 全局安装

本地安装

1. 将安装包放在./node_modules下（运行 npm 命令时所在的目录），如果没有node_modules目录，会在当前执行npm命令的目录下生成node_modules目录。
2. 可以通过require()来引入本地安装的包。

全局安装

1. 将安装包放在/usr/local下或者你node的安装目录。
2. 可以直接在命令行里使用。

卸载包：

npm uninstall [package]

更新包：

npm update [package]

搜索包：

npm search [package]

使用淘宝镜像：

npm install -g cnpm --registry=https://registry.npm.taobao.org 那么以后就可以使用cnpm来安装包了！

186

前端项目搭建

前端我们使用gulp来自动化开发流程。配置好gulp后，可以自动给我们处理好一些工作。比如写完css后，要压缩成 .min.css ，写完 js 后，要做混淆和压缩， 图片压缩等。这些工作都可以让gulp帮我们完成

安装gulp

1：创建本地包管理环境：

使用npm init 命令在本地生成一个 package.json 文件，package.json 是用来记录你当前这个项目依赖了哪些包，以后别人拿到你得这个项目后，不需要你的node_modules文件夹 （因为node_modules中的包实在太庞大了）。只需要执行 npm install 命令，即会自动安装 package.json 下 devDependencies中指定的依赖包。

2：安装gulp

gulp的安装非常简单，只要使用npm命令安装即可。但是因为gulp需要作为命令行的方式运行，因此需要在安装在系统级别的目录中。

npm install gulp -g

因为在本地需要使用require的方式gulp。因此也需要在本地安装一份

npm install gulp --save-dev

187

3 创建gulp任务

要使用gulp来流程化我们的开发工作。首先需要在项目的根目录下创建一个gulpfile.js 文件中填写一下代码：

var gulp = require("gulp");
gulp.task("greet", function() {
    console.log("hello world");
});

这里对代码一一解释：

1：通过require语句引用已经按照的第三方依赖包。这个require只能是引用当前项目的，不能引用全局下的。require语法是node.js独有的，只能在node.js 环境下使用

2：gulp.task 是用来创建一个任务。gulp.task的第一参数是命令的名字，第二个参数是一个函数，就是执行这个命令的时候会做什么事情，都是写在这个里面的

3：写完以上代码后，以后如果想要执行greet命令，那么只需要进入项目所在路径，然后终端使用gulp greet 即可执行。

188

4：创建处理CSS文件的任务

gulp只是提供一个框架给我们。如果我们想要实现一些更加复杂的功能，比如css压缩，那么我们还需要安装一下 gulp-cssnano插件。gulp相关的插件安装也是通过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: 创建一个css处理任务

2：gulp.src：找到当前css目录下所有以 .css 结尾的 css文件

3：pipe：管道方法。将上一个方法的返回结果传给另外一个处理器。比如以上的 cssnano

4：gulp.dest ：将处理完后的文件，放在指定的目录下。不要放在和原文件相同的目录，以免产生冲突，也不方便管理

---

189

5：修改文件名：

像以上任务，压缩完css文件后，最好是给他添加一个 .min.css 的后缀，这样一眼就能知道这个是经过压缩后的文件。这时候我们就需要使用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方法，并且传递一个对象参数，指定修改名字的规制为添加一个， .min后缀名，这个gulp-rename还有其他的指定文件名的方式，比如可以在文件名前面加一个前缀等。更多的教程可以看这个: https://www.npmjs.com/package/gulp-rename

---

190 创建处理js文件的任务

处理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文件进行压缩和丑化（修改变量名）等处理。更多关于gulp-uglify的教程。请看：https://github.com/mishoo/UglifyJS2#minify-options。

191

合并多个文件

在网页开发中，为了加快网页的渲染速度，有时候我们会将多个文件压缩成一个文件，从而减少请求的次数。要拼接文件，我们需要用到gulp-concat插件。安装命令如下：

npm install gulp-concat --save-dev

比如我们现在有一个nav.js文件用来控制导航条的。有一个index.js文件用来控制首页整体内容的。那么我们可以使用以下代码将这两个文件合并成一个文件

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