Django專案引入NPM和gulp管理前端資源

程式設計實驗室發表於2022-04-02
DjangoNPM前端

前言

之前寫了一篇《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/開頭。

相關文章