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 ------- 文件初始化,初始 ...
随机推荐
- VIM中简化删除,光标移动和查找操作
# 一.命令行模式下简化删除 1. 向后删除单个字符:[x] 2. 向前删除单个字符:[X] 3. 删除从光标开始到单词结尾:[dw] 删除从光标后的2个单词:[d2w] 4. 删除整个单词:[daw ...
- 【人才】亚马逊数据科学家JD
Sr. Data Scientist - Amazon Homepage US, WA, Seattle • Job ID 271528 • Amazon Corporate LLC Job Desc ...
- call、apply 和 bind
call().apply().bind() 都是用来重定义 this 这个对象的! var obj1 = { username: "HuiTaiLang", fn: functio ...
- 2022最新IntellJ IDEA的mall开发部署文档
目录 版本说明 一.概述 二.基本构建 三.Git 导入编译器 四.模块描述浅析 五.配置文档 application.yml修改,涉及模块 application-dev.yml修改,涉及模块 ge ...
- 堆优化Dijkstra算法
但是,我们会发现刚刚讲的朴素Dijkstra算法(高情商:朴素 : 低情商: 低效)的套路不适用于稀疏图,很容易会爆时间: 所以,我们要对其中的一些操作进行优化,首先我们发现找到里起始点最近的点去更新 ...
- Java案例——日期工具类
需求:定义一个日期工具类,包含两个方法,按日期转化成指定格式的字符串,把字符串解析为指定格式的日期 然后定义一个测试类测试 分析: 1.定义一个日期工具类 2.定义一个方法dateToString,用 ...
- vue学习过程总结(04) - 菜鸟教程归纳
1.组件 组件(component)是vue.js最强大的功能之一.组件可以扩展html元素,封装可重用的代码.组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象 ...
- React优点?
声明式, 组件化, 一次学习, 随处编写. 灵活, 丰富, 轻巧, 高效
- 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 - ...
- Java如何声明变量?JS如何声明变量?
Java采用强类型变量检查,像C语言一样.所有变量在编译之前必须声明,而且不能使用没有赋值的变量.例如:int x;x=1234;char y='F';其中X=1234说明是一个整数,Y='F'说明是 ...