前言 之前写了一篇《Asp-Net-Core开发笔记：使用NPM和gulp管理前端静态文件》，现在又来用Django开发项目了，之前我搞了一个Django的快速开发脚手架「DjangoStarter」，正好给升级一下~ 关于
之前写了一篇《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
在项目根目录下创建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 move
之前的gulp配置里还配了很多其他任务，不过感觉必要性不大，毕竟我们这是后端项目，只用一个move命令就行了
关于其他的命令可以看上一篇有具体讲到。
在项目中引用这部分其实不在本文范畴，不过既然提到就写一下吧。
在模板文件中，首先加载static标签，在模板代码的开头写上：
{% load static %}
然后需要引用静态文件的地方：
<link ref="stylesheet" href="{% static 'lib/bootstrap/dist/css/bootstrap.css' %}">
因为我们之前配置gulp的时候，把所有npm包都复制到了/static/lib目录下，所以引用的时候是lib/开头。