【Django】关于前端配置

今天在网上课程了学了一下前端配置,感觉搭这个环境安装了不少东西,自己都有点混乱,现在整理一下思路:

1.nvm

即Note Version Manager用来管理node版本的工具;

windows版本地址https://github.com/coreybutler/nvm-windows/releases (我今天装的版本是1.1.7)
Linux 或 mac版本地址https://github.com/creationix/nvm#installation
安装后要添加到环境变量,通过nvm -v或者nvm version检查是否安装成功(我只安装了window版,而且我下载的window版自动添加到环境变量了)

nvm常用命令:(这些命令来自于视频课程中的课件,我自己记录一下吧,日后可能用到)
nvm install node:安装最新版本的node.js nvm!==nvm install
nvm install [版本号]:安装指定版本的node.js
nvm use [版本号]:使用指定版本的node.js
nvm list:列出当前安装的所有版本node.js
nvm uninstall [版本号]:卸载指定版本node.js
nvm node_mirror [url]:设置nvm的镜像
nvm npm_mirror [url]:设置npm的镜像

直接用上面命令安装的话,可能会因为外网速度较慢。可以采用镜像:(反正我没有用过,是直接nvm install 6.4.0(node.js版本)安装的)
https://npm.taobao.org/mirrors/note
https://npm.taobao.org/mirrors/npm

即输入命令 nvm node_mirror https://npm.taobao.org/mirrors/note
nvm npm_mirror https://npm.taobao.org/mirrors/npm

据说如果用了镜像之后,在你自己的nvm安装目录下的setting.txt会看到那两个镜像路径(我自己因为没用镜像就没有了)

我的D:\nvm\nvm\setting.txt就只有两句:

root: D:\nvm\nvm
path: D:\nodejs

我猜意思就是指nvm自己的目录,以及安装的时候我指定了的nodejs的目录(毕竟这个nvm是用来管理node.js的版本的工具);

由于要匹配npm的版本,所以node.js版本采6.4.0(不是最新)因为视频中的老师说高版本的npm有坑,3.x版本比较稳定,所以我作为小白还是听老师话~~

反正我输入了安装命令后是这样的:

2.安装node.js命令:nvm install 6.4.0

Downloading node.js version 6.4.0 (64-bit)...   #node版本
Complete
Creating D:\nvm\nvm\temp

Downloading npm version 3.10.3... Complete    #npm版本(因为它的高版本有坑)
Installing npm v3.10.3...

Installation complete. If you want to use this version, type

nvm use 6.4.0

相信不难看出来,安装node.js的时候它自动帮我们安装了对应版本的npm(这个后面安装包经常用)

3.npm的使用:note package manager (包管理工具)
安装 包
方式1:全局安装在当前node环境中,可以在cmd当作命令使用
方式2:本地安装就是安装在当前目录中,只有当前能使用,并且可以通过require引用

require()类似python import
express包:是基于node的网站开发包,类似python的Django

注意安装express前要通过nvm use切换到对应版本,再来安装

本例安装在项目中(即本地安装)

安装区别只是是否带-g
npm install express #本地安装
npm install express -g#全局安装

gulp:注意全局和本地两种方式都要安装,因为后续要用到cmd,也要用到require()方法

gulp项目结构:
gulp项目下新建html,css,js文件夹分别存放对应的文件
本地安装时,注意带上--sava-dev这样以后,所有依赖包才会自动添加到package.json中

gulp其实也只是一个框架,如果要使用相应的包还是需要分别安装npm install 包名字 --save-dev

到这里,我自己已经有点晕~~~

我整理一下自己对这几个东西的理解:nvm是管理node的(通过下载exe安装)---->node.js(通过nvm install [版本号]安装不同版本)---->而安装node.js的过程中又会自动安装对应版本的npm(这是一个包管理工具,经常用来安装不同的包!所以感觉它性质和nvm差不多)---》然后gulp就是通过这个npm安装的(分别使用全局安装和本地安装,因为后面gulpfile.js需要用在cmd中执行gulp来启动gulpfile.js里的任务,而且gulpfile.js需要使用require方法导入其他包来实现相关功能!

在一个Django项目中搭建前端开发环境:

1.新建Django项目

2.新建front文件夹,目录结构如下:

(默认的templates删了,改为在front下新建文件夹)package.json是通过在front目录下执行npm init 之后自动生成的,然后将部分之前列子中安装的包放到了package.js的

devDependencies这个字典下面,注意:配置文件里package.json的devDependencies字典里,最后一项不要多添加了,否则在执行npm install的时候会报错,然后
npm install可以自动安装在这个devDependencies下面的包。当然也可以通过npm install 【包名】直接安装。所有安装的包都放在自动生成的node_modules文件夹下面。

注意!!!安装包的时候要使用--sava-dev参数,即:npm install 【包名字】 --save-dev  否则不能自动添加到package.js里(在pycharm里node_modules文件夹,如果没有添加进devDependencies里的包,是橙色的,添加进去以后就是灰色的
然后在新建gulpfiles.js在里面写代码:这里贴一个今天刚刚学写的gulpfile.js:
var gulp=require("gulp");var rename=require("gulp-rename");  //更名用var cache=require("gulp-cache"); var concat=require("gulp-concat");var cssnano=require("gulp-cssnano");//压缩用var imagemin=require("gulp-imagemin");var uglify=require("gulp-uglify");//压缩javascript文件var browser=require("browser-sync").create();

//以上就是通过require方法导入包
//这就是集中管理一些目录路径,后面任务使用的时候就通过path.xx来使用var path={    ‘css‘:‘./src/css/‘,    ‘js‘:‘./src/js/‘,    ‘images‘:‘./src/images/‘,    ‘html‘:‘./templates/**/‘,//这里**代表中间有任意多个目录    ‘css_dest‘:‘./dest/css/‘,    ‘js_dest‘:‘./dest/js/‘,    ‘image_dest‘:‘./dest/images/‘,}

//注意:1.必须具备一个default任务Task ‘default‘ is not in your gulpfile//     2.创建任务都是用这种格式
//     gulp.task("[任务名称]",function () {//    //     })      3.注意任务里添加.pipe(browser.stream())  这里browser就是上面定义的,添加了这个才会在保存了修改后自动刷新。
      4.如要单独执行某个任务,在cmd执行任务时输入:gulp [任务名称]

//这个默认任务必须有,否则cmd里输入gulp无法启动会报错gulp.task("default",function () {    gulp.run([‘brower‘,‘watch‘,‘css‘,"js","images"]
]);//运行任务,把需要执行的任务放在run方法里,后面在cmd里执行gulp就可以执行这里所有任务
视频中老师只写了‘brower‘,‘watch‘结果发现没有自动生成index.min.css文件,后来他用gulp css直接执行了,先生成了index.min.css文件,然后来测试改变css参数有没有监听到。我原以为老师只写两个可能是因为watch已经去监听了其他几个任务的更改,所以他没有写进去,后来,自己试着把dest下的index.min.css文件删了,然后在run这里添加‘css’然后去cmd运行gulp,发现就自动生成了index.min.css了。所以个人猜测可能watch只能监听到文件的变更,并不会去执行其他任务(css,js,images)所以我把其他任务都添加进去变成这样:
gulp.run([‘brower‘,‘watch‘,‘css‘,"js","images"]);

//压缩css gulp.task("css",function () {    gulp.src(path.css+‘*.css‘)        .pipe(cssnano())//压缩css的方法        .pipe(rename({‘suffix‘:‘.min‘}))//表示在后缀加.min        .pipe(gulp.dest(path.css_dest))//不要忘记,使用gulp.dest这个方法来指定目标地址        .pipe(browser.stream())

})

//压缩javascript文件gulp.task("js",function () {    gulp.src(path.js+‘*.js‘)        .pipe(uglify())        .pipe(rename({‘suffix‘:‘.min‘}))        .pipe(gulp.dest(path.js_dest))        .pipe(browser.stream())})

//压缩图片gulp.task("images",function () {    gulp.src(path.images+‘*.*‘)        .pipe(cache(imagemin()))//这里只压缩更改了的图片        .pipe(rename({‘suffix‘:‘.min‘}))        .pipe(gulp.dest(path.image_dest))        .pipe(browser.stream())})

关于压缩图片找到疑问网友的博客有详细解释https://blog.csdn.net/zhongguohaoshaonian/article/details/53213657,原本不明白为啥不要加cache方法,这里解释很清楚了:压缩图片时比较耗时,在很多情况下我们只修改了某些图片,没有必要压缩所有图片,使用”gulp-cache”只压缩修改的图片,没有修改的图片直接从缓存文件读取(C:\Users\Administrator\AppData\Local\Temp\gulp-cache)

//定义监听任务,监听文件的变化。gulp.task("watch",function (){    gulp.watch(path.css+‘*.css‘,[‘css‘])    gulp.watch(path.js+‘*.js‘,[‘js‘])    gulp.watch(path.images+‘*.*‘,[‘image‘])    gulp.watch(path.html+‘*.html‘,[‘html‘])

})

//初始化browser-syncgulp.task("brower",function () {    browser.init(        {            ‘server‘:{                ‘baseDir‘:‘./‘            }        });});

//处理htmlgulp.task("html",function () {    gulp.src(path.html+‘*.html‘)        .pipe(browser.stream())})

当然了,我这里只是简单测试了一下css的修改和html里文字修改有没有及时刷新。下面贴一下其他相关文件的代码:front\templates\news\index.html:
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>index</title>    <link rel="stylesheet" href="../../dest/css/index.min.css"></head><body class="body"><p>my pages</p>

</body></html>
这里就简单加了文字以及css文件链接(注意一个东西就是运行gulp以后自动打开的http://localhost:3000是显示找不到的,要输入http://localhost:3000/templates/news/index.html才显示)还有就是这里不像我前面学Django那样需要写viwes返回一个渲染好的模板,需要在urls添加路径这些,这些都不需要做。我这里就是做好了目录结构,配置好环境(安装好需要的包),然后就是新建并编辑gulpfile.js,index.html,index.css这样。


 

原文地址:https://www.cnblogs.com/HAHACHANGEFROMNOW/p/9532382.html

时间: 2024-11-10 10:41:02

【Django】关于前端配置的相关文章

测试开发之Django——No4.Django中前端框架的配置与添加

我们在开发一个web项目的时候,虽然我们不是专业开发,但是我们也想要做出来一个美美的前端页面. 这种时候,百度上铺天盖地的前端框架就是我们的最好选择了. 当然,在网上直接下载的框架,我们是不能直接用的,所以本篇介绍一下我们怎么样来修改这个模板 首先,我们先下载一个免费的模板. 我们可以看到他的目录结构,用浏览器打开index.html文件之后可以看到模板的样式. 这样我们就可以想要哪个地方,复制哪个地方,到我们的代码里面了.给我们节省了很多编写前端的时间. 那么我们来看一下这个模板我们要怎么去做

django 实现前端 进度条

django 实现前端 进度条 后端 安装模块 channels==2.1.5 channels-redis==2.3.1 anyjson==0.3.3 asgi-redis==1.4.3 asgiref==2.3.0 asn1crypto==0.24.0 async-timeout==2.0.1 Twisted==18.9.0 启动一个redis 新建django程序 quan 目录结构 quan quan asgi.py consumers.py routing.py settings.py

Django Setting文件配置和简单的创建数据库字段

Django Settings文件配置 静态文件配置 STATIC_URL = '/static/' # 静态文件配置 STATICFILES_DIRS = [ os.path.join(BASE_DIR,'static') ] # 暴露给外界能够访问服务器静态文件夹下面所有的资源 STATIC_URL = '/xxx/' # 接口前缀 跟你的静态文件夹的名字一点关系都没有 # 默认情况下这个前缀跟静态文件夹名字一样!!! # 静态文件配置 STATICFILES_DIRS = [ os.pat

Django静态文件配置、request方法、ORM简介、字段的增删改查

app的创建注意事项: 在Django新创建的app要在seetings.py中添加注册,才会生效 创建app:django-adminapp an startapp app名称 或者 python3 mansge.py startpp名称 手动创建的app不会自带存放html的templates文件夹,需要手动创建 Django静态文件配置 对于前端已经写好了的文件,我们只是拿过来使用,那么这些文件都可以称之为"静态文件"; 静态文件可以是:boostrap一类的前端框架,已经写好了

Django基本环境配置

Django是一个开放源代码的Web应用框架,它源自一个在线新闻 Web 站点,于2005 年以开源的形式被释放出来.Django 框架的核心组件有: 1)用于创建模型的对象关系映射 2)为最终用户设计的完美管理界面 3)一流的 URL 设计 4)设计者友好的模板语言 5)缓存系统. 一.系统环境:RHEL6.0 +Python 2.6.5 + Django 1.6.4 [[email protected] ~]# uname -a Linux rhel6 2.6.32-71.el6.i686

Django html相关配置

本文和大家分享的主要是django中 html配置相关内容,一起来看看吧,希望对大家学习django有所帮助. html文件头要加上下面代码,意思要预加载配置文件中的staticfiles文件 {% load staticfiles %} css,js,img文件配置 其中,static为配置文件目录 <script scr={% static 'js/example.js' %}></script> <link rel="staticsheet" typ

网站建设之Django搭建与配置

总是忘记一些问题解决的细节,终于发现做笔记的必要了.一步一步慢慢写,慢慢积累吧.从开始接触计算机,从硬件到系统到软件,遇到的问题真心不算少了,都记下来的话也得有本书厚了. Linux Version:kali linux 3.14-kali1-686-pae Django网站:https://www.djangoproject.com/ 进入后点击下方按钮会进入安装向导,使用pip安装, 但是,不知时我这边网络问题还是怎样,pip官网打开特别慢,这个时候可以去百度或者Google pip,可以很

Python基础之 Django安装和配置

Django是Python用来开发web应用程序常用的一种流行框架,它集成有后台权限管理.模型.表单.数据库.模板功能. Django安装和配置过程如下. 1.下载Django.从Django官网下载Django包到本地,然后进行解压,根据自己需求拷贝到相应目录,我本地是放在D:\Program Files (x86)目录. 2.安装和配置Django. (1)以管理员身份打开cmd命令,进入Django解压目录,通过python安装Django,命令如下:python setup.py ins

利用django admin后台配置celery定时任务

1.安装djcelery pip install django-celery 2.在Django项目setting配置 A.配置djcelery # CELERY STUFF import djcelery djcelery.setup_loader() BROKER_URL = 'redis://localhost:6379' CELERYBEAT_SCHEDULER = 'djcelery.schedulers.DatabaseScheduler' # 定时任务 CELERY_RESULT_