-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy patharticle-20237.htm
209 lines (197 loc) · 21.1 KB
/
article-20237.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<!DOCTYPE html>
<html xml:lang="zh-CN" lang="zh-CN">
<head>
<link rel="canonical" href="https://windowsv2ray.github.io/news/article-20237.htm" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Django项目引入NPM和gulp管理前端资源</title>
<meta name="description" content="前言 之前写了一篇《Asp-Net-Core开发笔记：使用NPM和gulp管理前端静态文件》，现在又来用Django开发项目了，之前我搞了一个Django的快速开发脚手架「DjangoStarter」" />
<link rel="icon" href="/assets/website/img/windowsv2ray/favicon.ico" type="image/x-icon"/>
<meta name="author" content="Windows V2ray分享订阅站">
<meta property="og:type" content="article" />
<meta property="og:url" content="https://windowsv2ray.github.io/news/article-20237.htm" />
<meta property="og:site_name" content="Windows V2ray分享订阅站" />
<meta property="og:title" content="Django项目引入NPM和gulp管理前端资源" />
<meta property="og:image" content="https://windowsv2ray.github.io/uploads/20240604/7ba49a372e844b1797b30b0ebfd83329.webp" />
<meta property="og:release_date" content="2024-12-02T07:58:13" />
<meta property="og:updated_time" content="2024-12-02T07:58:13" />
<meta property="og:description" content="前言 之前写了一篇《Asp-Net-Core开发笔记：使用NPM和gulp管理前端静态文件》，现在又来用Django开发项目了，之前我搞了一个Django的快速开发脚手架「DjangoStarter」" />
<meta name="applicable-device" content="pc,mobile" />
<meta name="renderer" content="webkit" />
<meta name="force-rendering" content="webkit" />
<meta http-equiv="Cache-Control" content="no-transform" />
<meta name="robots" content="max-image-preview:large" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Django项目引入NPM和gulp管理前端资源">
<meta name="format-detection" content="telephone=no">
<link rel="dns-prefetch" href="https:/www.googletagmanager.com">
<link rel="dns-prefetch" href="https://www.googleadservices.com">
<link rel="dns-prefetch" href="https://www.google-analytics.com">
<link rel="dns-prefetch" href="https://pagead2.googlesyndication.com">
<link rel="dns-prefetch" href="https://cm.g.doubleclick.net">
<link rel="stylesheet" href="/assets/website/js/frontend/windowsv2ray/animate/animate.css">
<link rel="stylesheet" href="/assets/website/css/windowsv2ray/bootstrap.css">
<link rel="stylesheet" href="/assets/website/css/windowsv2ray/maicons.css">
<link rel="stylesheet" href="/assets/website/js/frontend/windowsv2ray/owl-carousel/css/owl.carousel.css">
<link rel="stylesheet" href="/assets/website/css/windowsv2ray/theme.css">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-JN82W0GJX5"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-JN82W0GJX5');
</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3332997411212854"
crossorigin="anonymous"></script>
</head>
<body data-page="detail">
<!-- Back to top button -->
<div class="back-to-top"></div>
<header>
<nav class="navbar navbar-expand-lg navbar-light navbar-float">
<div class="container">
<a href="/" class="navbar-brand">Windows V2ray</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarContent">
<ul class="navbar-nav ml-lg-4 pt-3 pt-lg-0">
<li class="nav-item">
<a href="/" class="nav-link">首页</a>
</li>
<li class="nav-item">
<a href="/free-nodes/" class="nav-link">免费节点</a>
</li>
<li class="nav-item">
<a href="/paid-subscribe/" class="nav-link">推荐机场</a>
</li>
<li class="nav-item">
<a href="/news/" class="nav-link">新闻资讯</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">关于</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">联系</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container mt-5">
<div class="page-banner">
<div class="row justify-content-center align-items-center h-100">
<div class="col-md-10">
<h1 class="text-center">Django项目引入NPM和gulp管理前端资源</h1>
<nav aria-label="Breadcrumb">
<ul class="breadcrumb justify-content-center py-0 bg-transparent">
<li class="breadcrumb-item"><a href="/">首页</a></li>
<li class="breadcrumb-item"><a href="/news/">新闻资讯</a></li>
<li class="breadcrumb-item active">正文</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header>
<main>
<div class="page-section">
<div class="container">
<div class="row">
<div class="col-md-9">
<input type="hidden" id="share-website-info" data-name="" data-url="">
<h2 id="前言">前言</h2> <p>之前写了一篇<a href="http://www.m6000.cn/wp-content/themes/begin%20lts/inc/go.php?url=https://www.cnblogs.com/deali/p/15905760.html" target="_blank" rel="nofollow">《Asp-Net-Core开发笔记：使用NPM和gulp管理前端静态文件》</a>，现在又来用Django开发项目了，之前我搞了一个Django的快速开发脚手架<a href="http://www.m6000.cn/wp-content/themes/begin%20lts/inc/go.php?url=https://github.com/Deali-Axy/DjangoStarter" target="_blank" rel="nofollow">「DjangoStarter」</a>，正好给升级一下~</p> <p>关于npm和gulp我就不多重复了，之前那篇文章都写了，直接上操作</p> <h2 id="安装依赖">安装依赖</h2> <p>安装依赖的操作跟上一篇文章是一样的，不过我这里直接提供<code>package.json</code>文件，复制到项目根目录里面，然后直接执行命令安装依赖。</p> <p><code>package.json</code>文件如下：</p> <pre><code class="language-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" } }</code></pre> <p>执行命令：</p> <pre><code class="language-bash">npm install # 或者有安装yarn的话可以 yarn</code></pre> <h2 id="gulp配置">gulp配置</h2> <p>在项目根目录下创建<code>gulpfile.js</code>文件</p> <p>直接上配置文件：</p> <pre><code class="language-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"])); });</code></pre> <p>无脑复制粘贴就行，真正使用的时候，只需要关注这两段代码</p> <pre><code class="language-js">//使用 npm 下载的前端组件包 const libs = [ {name: "bootstrap", dist: "./node_modules/bootstrap/dist/**/*.*"}, ]; // 使用 npm 下载的前端组件，自定义存放位置 const customLibs = [ // {name: 'font-awesome', dist: './node_modules/@fortawesome/fontawesome-free/**/*.*'}, ]</code></pre> <p>第一段是针对比较规范的npm包，资源文件都在<code>dist</code>目录下的，配置规则就比较简单，原样复制到我们项目的<code>/static/lib</code>目录下就行。（一般比较新的npm包都是这种结构）</p> <p>第二段是针对不按规范的npm包，按照习惯，我们把它包下的css和js文件分开放到<code>/static/lib</code>目录下，当然具体怎么放可以自己决定，这些规则配置很自由的。</p> <p>举个例子：</p> <pre><code class="language-js">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'}, ]</code></pre> <p>这样就可以把<code>example-lib</code>包里面，<code>a/b</code>目录下的css文件，和<code>a/c</code>目录下的js文件，分别复制到我们项目目录的<code>/static/lib/example-lib/css</code>和<code>/static/lib/example-lib/js</code>目录，到时我们项目中引用会比较方便。</p> <h2 id="执行gulp任务">执行gulp任务</h2> <p>配置完了之后，直接执行这个命令就行：</p> <pre><code class="language-bash">gulp move</code></pre> <p>之前的gulp配置里还配了很多其他任务，不过感觉必要性不大，毕竟我们这是后端项目，只用一个move命令就行了</p> <p>关于其他的命令可以看<a href="http://www.m6000.cn/wp-content/themes/begin%20lts/inc/go.php?url=https://www.cnblogs.com/deali/p/15905760.html" target="_blank" rel="nofollow">上一篇</a>有具体讲到。</p> <h2 id="在项目中引用">在项目中引用</h2> <p>这部分其实不在本文范畴，不过既然提到就写一下吧。</p> <p>在模板文件中，首先加载<code>static</code>标签，在模板代码的开头写上：</p> <pre><code class="language-jinja2">{% load static %}</code></pre> <p>然后需要引用静态文件的地方：</p> <pre><code class="language-jinja2"><link ref="stylesheet" href="{% static 'lib/bootstrap/dist/css/bootstrap.css' %}"></code></pre> <p>因为我们之前配置gulp的时候，把所有npm包都复制到了<code>/static/lib</code>目录下，所以引用的时候是<code>lib/</code>开头。</p> <div class="clearfix"></div>
<div class="col-md-12 mt-5">
<p>上一个：<a href="/news/article-20234.htm">Spring Security认证_认证（成功和失败）后的处理方式</a></p>
<p>下一个：<a href="/news/article-20695.htm">动物疫苗属于疫苗分类吗为什么没有营养（动物疫苗包括哪些）</a></p>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">热门文章</h3>
</div>
<div class="panel-body">
<ul class="p-0 x-0" style="list-style: none;margin: 0;padding: 0;">
<li class="py-2"><a href="/news/article-49517.htm" title="springboot项目中Timestamp的使用方法">springboot项目中Timestamp的使用方法</a></li>
<li class="py-2"><a href="/free-nodes/2024-12-21-free-ssr-node.htm" title="「12月21日」最高速度19.7M/S，2024年V2ray/Clash/Shadowrocket/SSR每天更新免费节点订阅链接">「12月21日」最高速度19.7M/S，2024年V2ray/Clash/Shadowrocket/SSR每天更新免费节点订阅链接</a></li>
<li class="py-2"><a href="/free-nodes/2024-11-20-free-ssr-node.htm" title="「11月20日」最高速度21.5M/S，2024年V2ray/SSR/Clash/Shadowrocket每天更新免费节点订阅链接">「11月20日」最高速度21.5M/S，2024年V2ray/SSR/Clash/Shadowrocket每天更新免费节点订阅链接</a></li>
<li class="py-2"><a href="/news/article-24837.htm" title="南京哪里领养宠物比较好一点（南京领养宠物都要做什么条件）">南京哪里领养宠物比较好一点（南京领养宠物都要做什么条件）</a></li>
<li class="py-2"><a href="/free-nodes/2024-11-12-free-v2ray.htm" title="「11月12日」最高速度19.1M/S，2024年Clash/V2ray/Shadowrocket/SSR每天更新免费节点订阅链接">「11月12日」最高速度19.1M/S，2024年Clash/V2ray/Shadowrocket/SSR每天更新免费节点订阅链接</a></li>
<li class="py-2"><a href="/free-nodes/2024-12-2-shadowrocket-node.htm" title="「12月2日」最高速度19.7M/S，2024年SSR/Shadowrocket/Clash/V2ray每天更新免费节点订阅链接">「12月2日」最高速度19.7M/S，2024年SSR/Shadowrocket/Clash/V2ray每天更新免费节点订阅链接</a></li>
<li class="py-2"><a href="/news/article-22071.htm" title="动物防疫法的重要性（动物防疫法的目的是什么）">动物防疫法的重要性（动物防疫法的目的是什么）</a></li>
<li class="py-2"><a href="/news/article-20234.htm" title="Spring Security认证_认证（成功和失败）后的处理方式">Spring Security认证_认证（成功和失败）后的处理方式</a></li>
<li class="py-2"><a href="/free-nodes/2025-1-18-clash-node-daily-updates.htm" title="「1月18日」最高速度18.5M/S，2025年V2ray/Shadowrocket/SSR/Clash每天更新免费节点订阅链接">「1月18日」最高速度18.5M/S，2025年V2ray/Shadowrocket/SSR/Clash每天更新免费节点订阅链接</a></li>
<li class="py-2"><a href="/news/article-25304.htm" title="宠物家庭寄养协议书范本下载（宠物寄养协议有法律效力吗）">宠物家庭寄养协议书范本下载（宠物寄养协议有法律效力吗）</a></li>
</ul>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">归纳</h3>
</div>
<div class="panel-body">
<ul class="p-0 x-0" style="list-style: none;margin: 0;padding: 0;">
<li class="py-2">
<h4><span class="badge" style="float: right;">6</span> <a href="/date/2025-02/" title="2025-02 归档">2025-02</a></h4>
</li>
<li class="py-2">
<h4><span class="badge" style="float: right;">92</span> <a href="/date/2025-01/" title="2025-01 归档">2025-01</a></h4>
</li>
<li class="py-2">
<h4><span class="badge" style="float: right;">93</span> <a href="/date/2024-12/" title="2024-12 归档">2024-12</a></h4>
</li>
<li class="py-2">
<h4><span class="badge" style="float: right;">30</span> <a href="/date/2024-11/" title="2024-11 归档">2024-11</a></h4>
</li>
</ul>
</div>
</div>
</div>
</div>
</div> <!-- .container -->
</div> <!-- .page-section -->
</main>
<footer class="page-footer">
<div class="container">
<div class="row">
<div class="col-sm-6 py-2">
<p id="copyright">
<p>
<a href="/">首页</a> |
<a href="/free-node/">免费节点</a> |
<a href="/news/">新闻资讯</a> |
<a href="/about-us.htm">关于我们</a> |
<a href="/disclaimer.htm">免责申明</a> |
<a href="/privacy.htm">隐私申明</a> |
<a href="/sitemap.xml">网站地图</a>
</p>
Windows V2ray分享订阅站 版权所有 Powered by WordPress
</p>
</div>
<div class="col-sm-6 py-2 text-right">
<div class="d-inline-block px-3">
<a href="#">Privacy</a>
</div>
<div class="d-inline-block px-3">
<a href="#">Contact Us</a>
</div>
</div>
</div>
</div> <!-- .container -->
</footer> <!-- .page-footer -->
<script src="/assets/website/js/frontend/windowsv2ray/jquery-3.5.1.min.js"></script>
<script src="/assets/website/js/frontend/windowsv2ray/bootstrap.bundle.min.js"></script>
<script src="/assets/website/js/frontend/windowsv2ray/wow/wow.min.js"></script>
<script src="/assets/website/js/frontend/windowsv2ray/owl-carousel/js/owl.carousel.min.js"></script>
<script src="/assets/website/js/frontend/windowsv2ray/waypoints/jquery.waypoints.min.js"></script>
<script src="/assets/website/js/frontend/windowsv2ray/animateNumber/jquery.animateNumber.min.js"></script>
<script src="/assets/website/js/frontend/windowsv2ray/theme.js"></script>
<script src="https://www.freeclashnode.com/assets/js/frontend/invite-url.js"></script>
<script src="/assets/website/js/frontend/G.js"></script>
</body>
</html>