Django项目引入NPM和gulp管理前端资源
前言
之前写了一篇《Asp-Net-Core开发笔记:使用NPM和gulp管理前端静态文件》,现在又来用Django开发项目了,之前我搞了一个Django的快速开发脚手架「DjangoStarter」,正好给升级一下~
关于npm和gulp我就不多重复了,之前那篇文章都写了,直接上操作
安装依赖
安装依赖的操作跟上一篇文章是一样的,不过我这里直接提供package.json
文件,复制到项目根目录里面,然后直接执行命令安装依赖。
package.json
文件如下:
{
"name": "django_starter",
"version": "1.0.0",
"description": "",
"main": "index.js",
"repository": "https://github.com/Deali-Axy/DjangoStarter",
"author": "DealiAxy",
"license": "Apache License 2.0",
"dependencies": {
"bootstrap": "^5.1.3",
},
"devDependencies": {
"gulp": "^4.0.2",
"gulp-changed": "^4.0.3",
"gulp-clean-css": "^4.3.0",
"gulp-concat": "^2.6.1",
"gulp-rename": "^2.0.0",
"gulp-uglify": "^3.0.2",
"rimraf": "^3.0.2"
}
}
执行命令:
npm install
# 或者有安装yarn的话可以
yarn
gulp配置
在项目根目录下创建gulpfile.js
文件
直接上配置文件:
/// <binding BeforeBuild='min' Clean='clean' ProjectOpened='auto' />
"use strict";
//加载使用到的 gulp 插件
const gulp = require("gulp"),
rimraf = require("rimraf"),
concat = require("gulp-concat"),
cssmin = require("gulp-clean-css"),
rename = require("gulp-rename"),
uglify = require("gulp-uglify"),
changed = require("gulp-changed");
//定义 static 下的各文件存放路径
const paths = {
root: "./static/",
css: './static/css/',
js: './static/js/',
lib: './static/lib/'
};
//css
paths.cssDist = paths.css + "**/*.css";//匹配所有 css 的文件所在路径
paths.minCssDist = paths.css + "**/*.min.css";//匹配所有 css 对应压缩后的文件所在路径
paths.concatCssDist = paths.css + "app.min.css";//将所有的 css 压缩到一个 css 文件后的路径
//js
paths.jsDist = paths.js + "**/*.js";//匹配所有 js 的文件所在路径
paths.minJsDist = paths.js + "**/*.min.js";//匹配所有 js 对应压缩后的文件所在路径
paths.concatJsDist = paths.js + "app.min.js";//将所有的 js 压缩到一个 js 文件后的路径
//使用 npm 下载的前端组件包
const libs = [
{name: "bootstrap", dist: "./node_modules/bootstrap/dist/**/*.*"},
];
// 使用 npm 下载的前端组件,自定义存放位置
const customLibs = [
// {name: 'font-awesome', dist: './node_modules/@fortawesome/fontawesome-free/**/*.*'},
]
//清除压缩后的文件
gulp.task("clean:css", done => rimraf(paths.minCssDist, done));
gulp.task("clean:js", done => rimraf(paths.minJsDist, done));
gulp.task("clean", gulp.series(["clean:js", "clean:css"]));
//移动 npm 下载的前端组件包到 wwwroot 路径下
gulp.task("move:dist", done => {
libs.forEach(item => {
gulp.src(item.dist)
.pipe(gulp.dest(paths.lib + item.name + "/dist"));
});
done()
})
gulp.task("move:custom", done => {
customLibs.forEach(item => {
gulp.src(item.dist)
.pipe(gulp.dest(paths.lib + item.name))
})
done()
})
//每一个 css 文件压缩到对应的 min.css
gulp.task("min:css", () => {
return gulp.src([paths.cssDist, "!" + paths.minCssDist], {base: "."})
.pipe(rename({suffix: '.min'}))
.pipe(changed('.'))
.pipe(cssmin())
.pipe(gulp.dest('.'));
});
//将所有的 css 文件合并打包压缩到 app.min.css 中
gulp.task("concat:css", () => {
return gulp.src([paths.cssDist, "!" + paths.minCssDist], {base: "."})
.pipe(concat(paths.concatCssDist))
.pipe(changed('.'))
.pipe(cssmin())
.pipe(gulp.dest("."));
});
//每一个 js 文件压缩到对应的 min.js
gulp.task("min:js", () => {
return gulp.src([paths.jsDist, "!" + paths.minJsDist], {base: "."})
.pipe(rename({suffix: '.min'}))
.pipe(changed('.'))
.pipe(uglify())
.pipe(gulp.dest('.'));
});
//将所有的 js 文件合并打包压缩到 app.min.js 中
gulp.task("concat:js", () => {
return gulp.src([paths.jsDist, "!" + paths.minJsDist], {base: "."})
.pipe(concat(paths.concatJsDist))
.pipe(changed('.'))
.pipe(uglify())
.pipe(gulp.dest("."));
});
gulp.task('move', gulp.series(['move:dist', 'move:custom']))
gulp.task("min", gulp.series(["min:js", "min:css"]))
gulp.task("concat", gulp.series(["concat:js", "concat:css"]))
//监听文件变化后自动执行
gulp.task("auto", () => {
gulp.watch(paths.css, gulp.series(["min:css", "concat:css"]));
gulp.watch(paths.js, gulp.series(["min:js", "concat:js"]));
});
无脑复制粘贴就行,真正使用的时候,只需要关注这两段代码
//使用 npm 下载的前端组件包
const libs = [
{name: "bootstrap", dist: "./node_modules/bootstrap/dist/**/*.*"},
];
// 使用 npm 下载的前端组件,自定义存放位置
const customLibs = [
// {name: 'font-awesome', dist: './node_modules/@fortawesome/fontawesome-free/**/*.*'},
]
第一段是针对比较规范的npm包,资源文件都在dist
目录下的,配置规则就比较简单,原样复制到我们项目的/static/lib
目录下就行。(一般比较新的npm包都是这种结构)
第二段是针对不按规范的npm包,按照习惯,我们把它包下的css和js文件分开放到/static/lib
目录下,当然具体怎么放可以自己决定,这些规则配置很自由的。
举个例子:
const customLibs = [
{name: 'example-lib/css', dist: './node_modules/example-lib/a/b/*.css'},
{name: 'example-lib/js', dist: './node_modules/example-lib/a/c/*.js'},
]
这样就可以把example-lib
包里面,a/b
目录下的css文件,和a/c
目录下的js文件,分别复制到我们项目目录的/static/lib/example-lib/css
和/static/lib/example-lib/js
目录,到时我们项目中引用会比较方便。
执行gulp任务
配置完了之后,直接执行这个命令就行:
gulp move
之前的gulp配置里还配了很多其他任务,不过感觉必要性不大,毕竟我们这是后端项目,只用一个move命令就行了
关于其他的命令可以看上一篇有具体讲到。
在项目中引用
这部分其实不在本文范畴,不过既然提到就写一下吧。
在模板文件中,首先加载static
标签,在模板代码的开头写上:
{% load static %}
然后需要引用静态文件的地方:
<link ref="stylesheet" href="{% static 'lib/bootstrap/dist/css/bootstrap.css' %}">
因为我们之前配置gulp的时候,把所有npm包都复制到了/static/lib
目录下,所以引用的时候是lib/
开头。
Django项目引入NPM和gulp管理前端资源的更多相关文章
- Asp-Net-Core开发笔记:使用NPM和gulp管理前端静态文件
前言 本文介绍的是AspNetCore的MVC项目,WebApi+独立前端这种前后端分离的项目就不需要多此一举了~默认前端小伙伴是懂得使用前端工具链的. 为啥要用MVC这种服务端渲染技术呢? 简单项目 ...
- 创建Django项目(三)——站点管理
2013-08-05 21:01:34| 1.激活管理界面 (1) 修改"mysite\mysite\settings.py"文件,将'django ...
- Bower和Gulp集成前端资源
在我们开始前先介绍下流程: 安装node.js. 安装npm. 全局安装bower. 根目录创建 .bowerrc (可选) 在项目中安装bower 并创建 bower.json 文件,运行 bowe ...
- 基于Laravel开发博客应用系列 —— 使用Bower+Gulp集成前端资源
本节我们将讨论如何将前端资源集成到项目中,包括前端资源的发布和引入.本项目将使用 Bower 和 Gulp 下载和集成jQuery.Bootstrap.Font Awesome 以及 DataTabl ...
- gulp管理静态资源缓存
前端项目在版本迭代的时候,难免会遇到静态缓存的问题,明明开发的是ok的,但是一部署到服务器上,发现页面变得乱七八糟,这是由于静态缓存引起的. 从上面这张图片可以看出,浏览器加载css,js等资源时,s ...
- Django项目开发,XSS攻击,图片防盗链,图片验证码,kindeditor编辑器
目录 一.Django项目开发 1. 项目开发流程 2. auth模块的补充 (1)django的admin可视化管理页面 (2)将admin可视化管理页面的模型表显示成中文 (3)auth模块的用户 ...
- 在windows上用apache+mod_wsgi服务部署django项目
之前一直在本地跑django项目,最近尝试在服务器上部署项目,目前已经成功部署,也花了好多时间,这里跟大家交流一下,希望对像我一样的新手有帮助. 一.配置环境: 1.Python版本3.7 2.服务器 ...
- 前端资源多个产品整站一键打包&包版本管理(一)
来新公司工作的第五个月.整站资源打包管理也提上了日程. 问题: 首先.什么是整站的打包管理呢? 我们公司的几个重要产品都在同一个webapp里面,但是,不同的开发部门独立开发不同的产品,长期以来,我们 ...
- 代码管理工具 (含git、npm、gulp)
1 Git 分布式代码管理工具(基于Linux,可在本地进行提交)代码同时储存在本地和服务器中 ① Git基本操作命令 (1)初始化,创建初始化仓库 git init ------- 文件初始化,初始 ...
随机推荐
- Azure DevOps (四) 创建第一条流水线
前几篇文章,我们记录了一下azure代码仓库的使用,这篇开始,我们来搞一下azure的流水线. 流水线这个东西我觉得是devops中对于开发人员的灵魂组件,只要我们配置好了一次,剩下的所有部署都是自动 ...
- 工程师计划3 -> 项目管理2 | 项目组织与团队管理
前几天才收到这门课的教材,发现网课的周和课本的章节不完全对应,我以教材的章节为单位进行总结和思考.这篇就是对于第二章的梳理. 0317附:这篇压了很久了,已经落后课程进度了.整理下来觉得有些偏理论,后 ...
- Intellij IDEA远程debug线上项目记录
远程调试,特别是当你在本地开发的时候,你需要调试服务器上的程序时,远程调试就显得非常有用. JAVA 支持调试功能,本身提供了一个简单的调试工具JDB,支持设置断点及线程级的调试同时,不同的JVM通过 ...
- 搭建Loki、Promtail、Grafana轻量级日志系统(centos7)
搭建Loki.Promtail.Grafana轻量级日志系统(centos7)--简称PLG 需求 公司项目采用微服务的架构,服务很多,每个服务都有自己的日志,分别存放在不同的服务器上.当查找日志时需 ...
- pygame坦克大战前夕
最近想自己写pygame版的坦克大战,今晚已经完成如下功能: 1,我方坦克,可手动移动:敌方坦克,自动转方向与移动 2,坦克颜色随机,坦克形态大小可调. 3,双方坦克速度可调. 4,刷新坦克的位置随机 ...
- 内网穿透工具--NPS
一.简介 NPS是一款轻量级,高性能,强大功能的内网穿透代理服务器.目前支持TCP,UDP流量转发,可支持任何TCP,UDP上层协议(访问内网网站,本地支付接口调试,SSH访问,远程桌面,内网dns解 ...
- 浅析Java反射--Java
前言 上篇文章我们提到了可以使用反射机制破解单例模式.这篇文章我们就来谈一谈什么是反射,反射有什么用,怎么用,怎么实现反射. 概述 Java的反射(reflection)机制:是指在程序的运行状态中, ...
- Rabbit MQ 怎么保证可靠性、幂等性、消费顺序?
RabbitMQ如何保证消息的可靠性 RabbitMQ消息丢失的三种情况 生产者弄丢消息时的解决方法 方法一:生产者在发送数据之前开启RabbitMQ的事务(采用该种方法由于事务机制,会导致吞吐量下降 ...
- overflow原理?
overflow: hidden能清除块内子元素的浮动影响. 因为该属性进行超出隐藏时需要计算盒子内所有元素的高度, 所以会隐式清除浮动 创建BFC条件(满足一个): float的值不为none: o ...
- Filter是什么?有什么作用?
Filter是过滤器,在请求到达Servlet之前或者响应到达客户端之前截获请求或者响应,对之进行相应的处理.Struts2的控制器就是使用一个Filter实现的.