前言

之前写了一篇《Asp-Net-Core开发笔记:使用NPM和gulp管理前端静态文件》,现在又来用Django开发项目了,之前我搞了一个Django的快速开发脚手架「DjangoStarter」,正好给升级一下~

关于npm和gulp我就不多重复了,之前那篇文章都写了,直接上操作

安装依赖

安装依赖的操作跟上一篇文章是一样的,不过我这里直接提供package.json文件,复制到项目根目录里面,然后直接执行命令安装依赖。

package.json文件如下:

  1. {
  2. "name": "django_starter",
  3. "version": "1.0.0",
  4. "description": "",
  5. "main": "index.js",
  6. "repository": "https://github.com/Deali-Axy/DjangoStarter",
  7. "author": "DealiAxy",
  8. "license": "Apache License 2.0",
  9. "dependencies": {
  10. "bootstrap": "^5.1.3",
  11. },
  12. "devDependencies": {
  13. "gulp": "^4.0.2",
  14. "gulp-changed": "^4.0.3",
  15. "gulp-clean-css": "^4.3.0",
  16. "gulp-concat": "^2.6.1",
  17. "gulp-rename": "^2.0.0",
  18. "gulp-uglify": "^3.0.2",
  19. "rimraf": "^3.0.2"
  20. }
  21. }

执行命令:

  1. npm install
  2. # 或者有安装yarn的话可以
  3. yarn

gulp配置

在项目根目录下创建gulpfile.js文件

直接上配置文件:

  1. /// <binding BeforeBuild='min' Clean='clean' ProjectOpened='auto' />
  2. "use strict";
  3. //加载使用到的 gulp 插件
  4. const gulp = require("gulp"),
  5. rimraf = require("rimraf"),
  6. concat = require("gulp-concat"),
  7. cssmin = require("gulp-clean-css"),
  8. rename = require("gulp-rename"),
  9. uglify = require("gulp-uglify"),
  10. changed = require("gulp-changed");
  11. //定义 static 下的各文件存放路径
  12. const paths = {
  13. root: "./static/",
  14. css: './static/css/',
  15. js: './static/js/',
  16. lib: './static/lib/'
  17. };
  18. //css
  19. paths.cssDist = paths.css + "**/*.css";//匹配所有 css 的文件所在路径
  20. paths.minCssDist = paths.css + "**/*.min.css";//匹配所有 css 对应压缩后的文件所在路径
  21. paths.concatCssDist = paths.css + "app.min.css";//将所有的 css 压缩到一个 css 文件后的路径
  22. //js
  23. paths.jsDist = paths.js + "**/*.js";//匹配所有 js 的文件所在路径
  24. paths.minJsDist = paths.js + "**/*.min.js";//匹配所有 js 对应压缩后的文件所在路径
  25. paths.concatJsDist = paths.js + "app.min.js";//将所有的 js 压缩到一个 js 文件后的路径
  26. //使用 npm 下载的前端组件包
  27. const libs = [
  28. {name: "bootstrap", dist: "./node_modules/bootstrap/dist/**/*.*"},
  29. ];
  30. // 使用 npm 下载的前端组件,自定义存放位置
  31. const customLibs = [
  32. // {name: 'font-awesome', dist: './node_modules/@fortawesome/fontawesome-free/**/*.*'},
  33. ]
  34. //清除压缩后的文件
  35. gulp.task("clean:css", done => rimraf(paths.minCssDist, done));
  36. gulp.task("clean:js", done => rimraf(paths.minJsDist, done));
  37. gulp.task("clean", gulp.series(["clean:js", "clean:css"]));
  38. //移动 npm 下载的前端组件包到 wwwroot 路径下
  39. gulp.task("move:dist", done => {
  40. libs.forEach(item => {
  41. gulp.src(item.dist)
  42. .pipe(gulp.dest(paths.lib + item.name + "/dist"));
  43. });
  44. done()
  45. })
  46. gulp.task("move:custom", done => {
  47. customLibs.forEach(item => {
  48. gulp.src(item.dist)
  49. .pipe(gulp.dest(paths.lib + item.name))
  50. })
  51. done()
  52. })
  53. //每一个 css 文件压缩到对应的 min.css
  54. gulp.task("min:css", () => {
  55. return gulp.src([paths.cssDist, "!" + paths.minCssDist], {base: "."})
  56. .pipe(rename({suffix: '.min'}))
  57. .pipe(changed('.'))
  58. .pipe(cssmin())
  59. .pipe(gulp.dest('.'));
  60. });
  61. //将所有的 css 文件合并打包压缩到 app.min.css 中
  62. gulp.task("concat:css", () => {
  63. return gulp.src([paths.cssDist, "!" + paths.minCssDist], {base: "."})
  64. .pipe(concat(paths.concatCssDist))
  65. .pipe(changed('.'))
  66. .pipe(cssmin())
  67. .pipe(gulp.dest("."));
  68. });
  69. //每一个 js 文件压缩到对应的 min.js
  70. gulp.task("min:js", () => {
  71. return gulp.src([paths.jsDist, "!" + paths.minJsDist], {base: "."})
  72. .pipe(rename({suffix: '.min'}))
  73. .pipe(changed('.'))
  74. .pipe(uglify())
  75. .pipe(gulp.dest('.'));
  76. });
  77. //将所有的 js 文件合并打包压缩到 app.min.js 中
  78. gulp.task("concat:js", () => {
  79. return gulp.src([paths.jsDist, "!" + paths.minJsDist], {base: "."})
  80. .pipe(concat(paths.concatJsDist))
  81. .pipe(changed('.'))
  82. .pipe(uglify())
  83. .pipe(gulp.dest("."));
  84. });
  85. gulp.task('move', gulp.series(['move:dist', 'move:custom']))
  86. gulp.task("min", gulp.series(["min:js", "min:css"]))
  87. gulp.task("concat", gulp.series(["concat:js", "concat:css"]))
  88. //监听文件变化后自动执行
  89. gulp.task("auto", () => {
  90. gulp.watch(paths.css, gulp.series(["min:css", "concat:css"]));
  91. gulp.watch(paths.js, gulp.series(["min:js", "concat:js"]));
  92. });

无脑复制粘贴就行,真正使用的时候,只需要关注这两段代码

  1. //使用 npm 下载的前端组件包
  2. const libs = [
  3. {name: "bootstrap", dist: "./node_modules/bootstrap/dist/**/*.*"},
  4. ];
  5. // 使用 npm 下载的前端组件,自定义存放位置
  6. const customLibs = [
  7. // {name: 'font-awesome', dist: './node_modules/@fortawesome/fontawesome-free/**/*.*'},
  8. ]

第一段是针对比较规范的npm包,资源文件都在dist目录下的,配置规则就比较简单,原样复制到我们项目的/static/lib目录下就行。(一般比较新的npm包都是这种结构)

第二段是针对不按规范的npm包,按照习惯,我们把它包下的css和js文件分开放到/static/lib目录下,当然具体怎么放可以自己决定,这些规则配置很自由的。

举个例子:

  1. const customLibs = [
  2. {name: 'example-lib/css', dist: './node_modules/example-lib/a/b/*.css'},
  3. {name: 'example-lib/js', dist: './node_modules/example-lib/a/c/*.js'},
  4. ]

这样就可以把example-lib包里面,a/b目录下的css文件,和a/c目录下的js文件,分别复制到我们项目目录的/static/lib/example-lib/css/static/lib/example-lib/js目录,到时我们项目中引用会比较方便。

执行gulp任务

配置完了之后,直接执行这个命令就行:

  1. gulp move

之前的gulp配置里还配了很多其他任务,不过感觉必要性不大,毕竟我们这是后端项目,只用一个move命令就行了

关于其他的命令可以看上一篇有具体讲到。

在项目中引用

这部分其实不在本文范畴,不过既然提到就写一下吧。

在模板文件中,首先加载static标签,在模板代码的开头写上:

  1. {% load static %}

然后需要引用静态文件的地方:

  1. <link ref="stylesheet" href="{% static 'lib/bootstrap/dist/css/bootstrap.css' %}">

因为我们之前配置gulp的时候,把所有npm包都复制到了/static/lib目录下,所以引用的时候是lib/开头。

Django项目引入NPM和gulp管理前端资源的更多相关文章

  1. Asp-Net-Core开发笔记:使用NPM和gulp管理前端静态文件

    前言 本文介绍的是AspNetCore的MVC项目,WebApi+独立前端这种前后端分离的项目就不需要多此一举了~默认前端小伙伴是懂得使用前端工具链的. 为啥要用MVC这种服务端渲染技术呢? 简单项目 ...

  2. 创建Django项目(三)——站点管理

    2013-08-05 21:01:34|         1.激活管理界面         (1) 修改"mysite\mysite\settings.py"文件,将'django ...

  3. Bower和Gulp集成前端资源

    在我们开始前先介绍下流程: 安装node.js. 安装npm. 全局安装bower. 根目录创建 .bowerrc (可选) 在项目中安装bower 并创建 bower.json 文件,运行 bowe ...

  4. 基于Laravel开发博客应用系列 —— 使用Bower+Gulp集成前端资源

    本节我们将讨论如何将前端资源集成到项目中,包括前端资源的发布和引入.本项目将使用 Bower 和 Gulp 下载和集成jQuery.Bootstrap.Font Awesome 以及 DataTabl ...

  5. gulp管理静态资源缓存

    前端项目在版本迭代的时候,难免会遇到静态缓存的问题,明明开发的是ok的,但是一部署到服务器上,发现页面变得乱七八糟,这是由于静态缓存引起的. 从上面这张图片可以看出,浏览器加载css,js等资源时,s ...

  6. Django项目开发,XSS攻击,图片防盗链,图片验证码,kindeditor编辑器

    目录 一.Django项目开发 1. 项目开发流程 2. auth模块的补充 (1)django的admin可视化管理页面 (2)将admin可视化管理页面的模型表显示成中文 (3)auth模块的用户 ...

  7. 在windows上用apache+mod_wsgi服务部署django项目

    之前一直在本地跑django项目,最近尝试在服务器上部署项目,目前已经成功部署,也花了好多时间,这里跟大家交流一下,希望对像我一样的新手有帮助. 一.配置环境: 1.Python版本3.7 2.服务器 ...

  8. 前端资源多个产品整站一键打包&包版本管理(一)

    来新公司工作的第五个月.整站资源打包管理也提上了日程. 问题: 首先.什么是整站的打包管理呢? 我们公司的几个重要产品都在同一个webapp里面,但是,不同的开发部门独立开发不同的产品,长期以来,我们 ...

  9. 代码管理工具 (含git、npm、gulp)

    1 Git 分布式代码管理工具(基于Linux,可在本地进行提交)代码同时储存在本地和服务器中 ① Git基本操作命令 (1)初始化,创建初始化仓库 git init ------- 文件初始化,初始 ...

随机推荐

  1. VIM中简化删除,光标移动和查找操作

    # 一.命令行模式下简化删除 1. 向后删除单个字符:[x] 2. 向前删除单个字符:[X] 3. 删除从光标开始到单词结尾:[dw] 删除从光标后的2个单词:[d2w] 4. 删除整个单词:[daw ...

  2. 【人才】亚马逊数据科学家JD

    Sr. Data Scientist - Amazon Homepage US, WA, Seattle • Job ID 271528 • Amazon Corporate LLC Job Desc ...

  3. call、apply 和 bind

    call().apply().bind() 都是用来重定义 this 这个对象的! var obj1 = { username: "HuiTaiLang", fn: functio ...

  4. 2022最新IntellJ IDEA的mall开发部署文档

    目录 版本说明 一.概述 二.基本构建 三.Git 导入编译器 四.模块描述浅析 五.配置文档 application.yml修改,涉及模块 application-dev.yml修改,涉及模块 ge ...

  5. 堆优化Dijkstra算法

    但是,我们会发现刚刚讲的朴素Dijkstra算法(高情商:朴素 : 低情商: 低效)的套路不适用于稀疏图,很容易会爆时间: 所以,我们要对其中的一些操作进行优化,首先我们发现找到里起始点最近的点去更新 ...

  6. Java案例——日期工具类

    需求:定义一个日期工具类,包含两个方法,按日期转化成指定格式的字符串,把字符串解析为指定格式的日期 然后定义一个测试类测试 分析: 1.定义一个日期工具类 2.定义一个方法dateToString,用 ...

  7. vue学习过程总结(04) - 菜鸟教程归纳

    1.组件 组件(component)是vue.js最强大的功能之一.组件可以扩展html元素,封装可重用的代码.组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象 ...

  8. React优点?

    声明式, 组件化, 一次学习, 随处编写. 灵活, 丰富, 轻巧, 高效

  9. Python使用pip安装No matching distribution found for PyYaml==5.3.1

    ERROR: Command errored out with exit status 1: command: /usr/local/dmahz/p_book_data/bin/python3.9 - ...

  10. Java如何声明变量?JS如何声明变量?

    Java采用强类型变量检查,像C语言一样.所有变量在编译之前必须声明,而且不能使用没有赋值的变量.例如:int x;x=1234;char y='F';其中X=1234说明是一个整数,Y='F'说明是 ...