大渡口网站建设哪家好,wordpress 删除小工具,怀化网站优化哪个好,网络游戏电脑版排行榜Python微信订餐小程序课程视频
https://edu.csdn.net/course/detail/36074
Python实战量化交易理财系统
https://edu.csdn.net/course/detail/35475
前言
之前写了一篇《Asp-Net-Core开发笔记#xff1a;使用NPM和gulp管理前端静态文件》#xff0c;现在又来用Django开发…Python微信订餐小程序课程视频
https://edu.csdn.net/course/detail/36074
Python实战量化交易理财系统
https://edu.csdn.net/course/detail/35475
前言
之前写了一篇《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文件
直接上配置文件
///
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 %}
然后需要引用静态文件的地方 因为我们之前配置gulp的时候把所有npm包都复制到了/static/lib目录下所以引用的时候是lib/开头。 前言 安装依赖 gulp配置 执行gulp任务 在项目中引用 __EOF__ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-foHbMHil-1648961275490)(https://blog.csdn.net/deali)]程序设计实验室 - 本文链接 https://blog.csdn.net/deali/p/16094743.html
关于博主 来自全干工程师的互联网热门新技术探索与团队敏捷开发实践探讨欢迎一起交流技术分享学习实践经验~版权声明 本博客所有文章除特别声明外均采用 BY-NC-SA 许可协议。转载请注明出处声援博主 如果您觉得文章对您有帮助可以点击文章右下角**【[推荐](javascript:void(0)】**一下。
