前言
本文介紹的是AspNetCore的MVC項目,WebApi+獨立前端這種前後端分離的項目就不需要多此一舉了~預設前端小夥伴是懂得使用前端工具鍊的。
為啥要用MVC這種服務端渲染技術呢?
- 簡單項目不需要強行分離增加複雜度(如:我正在開發的部落格項目)
- 後端渲染利于SEO,對部落格網站友好
OK,雖然MVC的技術老了點,但依然可以結合現代前端工具鍊來提高效率
本文的食用需要先安裝好Node.js環境,下載下傳位址:https://nodejs.org/en/download
在開始前,先看看我們的項目檔案結構
- Blog/
- Blog.Web/
- Program.cs
- Blog.Web.csproj
- Blog.Data/
- Blog.sln
- Blog.Web/
使用NPM安裝依賴
首先在項目根目錄(也就是
Blog/Blog.Web
)執行
npm init
生成
package.json
檔案
完成之後項目結構應該類似這樣
- Blog/
- Blog.Web/
- Program.cs
- Blog.Web.csproj
- package.json (npm init 指令建立的檔案)
- Blog.Web/
然後編輯
package.json
或者使用指令行
npm install bootstrap
來添加需要的前端庫
安裝的前端庫會儲存在
Blog/Blog.Web/node_modules
這個目錄下,但我們的靜态檔案需要放在
Blog/Blog.Web/wwwroot
裡才行,也就是說,我們需要将使用到的 npm 包移動到 wwwroot 檔案下。
怎麼搞?手動移動或複制是不可能的,太麻煩了。
這時候就要借助自動化工具,這裡選擇了
gulp.js
,用于實作自動移動檔案,打包壓縮 js、css、image、删除檔案等操作。提高生産力~
安裝gulp
首先安裝gulp全局工具
npm install --global gulp-cli
然後在項目中安裝gulp以及幾個插件作為開發依賴(devDependencies)
//gulp.js
npm install gulp --save-dev
//壓縮 css
npm install gulp-clean-css --save-dev
//合并檔案
npm install gulp-concat --save-dev
//壓縮 js
npm install gulp-uglify --save-dev
//重命名
npm install gulp-rename --save-dev
//删除檔案、檔案夾
npm install rimraf --save-dev
//監聽檔案變化
npm install gulp-changed --save-dev
安裝完了之後,項目的
package.json
檔案應該類似下面這樣:
{
"name": "star-blog",
"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"
},
"dependencies": {
...
}
}
配置gulp
繼續在根目錄(和
package.json
同級目錄)下建立
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");
//定義 wwwroot 下的各檔案存放路徑
const paths = {
root: "./wwwroot/",
css: './wwwroot/css/',
js: './wwwroot/js/',
lib: './wwwroot/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: "jquery", dist: "./node_modules/jquery/dist/**/*.*"},
{name: "popper", dist: "./node_modules/popper.js/dist/**/*.*"},
{name: "bootstrap", dist: "./node_modules/bootstrap/dist/**/*.*"},
{name:"bootswatch",dist: "./node_modules/bootswatch/dist/**/*.*"}
];
//清除壓縮後的檔案
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", done => {
libs.forEach(function (item) {
gulp.src(item.dist)
.pipe(gulp.dest(paths.lib + item.name + "/dist"));
});
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("concatmin: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("concatmin:js", () => {
return gulp.src([paths.jsDist, "!" + paths.minJsDist], {base: "."})
.pipe(concat(paths.concatJsDist))
.pipe(changed('.'))
.pipe(uglify())
.pipe(gulp.dest("."));
});
gulp.task("min", gulp.series(["min:js", "min:css"]));
gulp.task("concatmin", gulp.series(["concatmin:js", "concatmin:css"]));
//監聽檔案變化後自動執行
gulp.task("auto", () => {
gulp.watch(paths.css, gulp.series(["min:css", "concatmin:css"]));
gulp.watch(paths.js, gulp.series(["min:js", "concatmin:js"]));
});
執行任務
上面定義這幾個任務:
- move:把在
常量裡配置的libs
包的dist檔案夾移動到node_modules
裡wwwroot/lib
- min:把我們在
和wwwroot/css
裡寫的css和js,每一個都壓縮成wwwroot/js
/xxx.min.css
xxx.min.js
- concatmin:把上面
壓縮的所有css和js,合成一個min
和app.min.css
app.min.js
- auto:自動監聽檔案變化後自動執行上面的
和min
任務concatmin
在終端中輸入
gulp --tasks
,可以檢視我們定義的這些任務
> gulp --tasks
[17:37:44] Tasks for /home/da/Code/StarBlog/StarBlog.Web/gulpfile.js
[17:37:44] ├── clean:css
[17:37:44] ├── clean:js
[17:37:44] ├─┬ clean
[17:37:44] │ └─┬ <series>
[17:37:44] │ ├── clean:js
[17:37:44] │ └── clean:css
[17:37:44] ├── move
[17:37:44] ├── min:css
[17:37:44] ├── concatmin:css
[17:37:44] ├── min:js
[17:37:44] ├── concatmin:js
[17:37:44] ├─┬ min
[17:37:44] │ └─┬ <series>
[17:37:44] │ ├── min:js
[17:37:44] │ └── min:css
[17:37:44] ├─┬ concatmin
[17:37:44] │ └─┬ <series>
[17:37:44] │ ├── concatmin:js
[17:37:44] │ └── concatmin:css
[17:37:44] └── auto
使用
gulp task-name
的指令可以執行任務,例如:
> gulp min
[17:41:41] Using gulpfile /home/da/Code/StarBlog/StarBlog.Web/gulpfile.js
[17:41:41] Starting 'min'...
[17:41:41] Starting 'min:js'...
[17:41:41] Finished 'min:js' after 19 ms
[17:41:41] Starting 'min:css'...
[17:41:41] Finished 'min:css' after 21 ms
[17:41:41] Finished 'min' after 44 ms
這就完成了把我們在
wwwroot/css
和
wwwroot/js
裡寫的css和js,每一個都壓縮成
xxx.min.css
/
xxx.min.js
的任務。友善!
結合IDE
VS我沒有用過,我是用Rider做開發的,是以隻介紹一下rider的
很簡單,打開 Run/Debug Configuration,在添加配置裡面選擇 JavaScript Build Tools 裡的 Gulp.js
然後選擇項目裡的
GulpFile
,Tasks欄下拉可以看到我們定義好的任務,直接添加就完事了
添加完就像C#項目一樣,可以直接執行
razor裡使用
使用
Gulp.js
收集靜态檔案到
wwwroot
目錄後,razor檔案裡的引用需要小小的改一下,如下:
引用CSS檔案
<link rel="stylesheet" href="~/lib/fontawesome-free-6.0.0-web/css/all.css">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="~/lib/bootswatch/dist/united/bootstrap.min.css">
<link rel="stylesheet" href="~/css/app.min.css">
引用JS檔案
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/app.min.js"></script>
大功告成!
參考資料
- 官網:https://gulpjs.com/
- https://stackoverflow.com/questions/37935524/how-to-use-npm-with-asp-net-core
- https://www.cnblogs.com/danvic712/p/10841579.html
微信公衆号:「程式設計實驗室」
專注于網際網路熱門新技術探索與團隊靈活開發實踐,包括架構設計、機器學習與資料分析算法、移動端開發、Linux、Web前後端開發等,歡迎一起探讨技術,分享學習實踐經驗。