Asp-Net-Core開發(fā)筆記:使用NPM和gulp管理前端靜態(tài)文件
前言
本文介紹的是AspNetCore的MVC項目，WebApi+獨立前端這種前后端分離的項目就不需要多此一舉了~默認前端小伙伴是懂得使用前端工具鏈的。
為啥要用MVC這種服務端渲染技術呢？
- 簡單項目不需要強行分離增加復雜度（如：我正在開發(fā)的博客項目）
- 后端渲染利于SEO，對博客網站友好
OK，雖然MVC的技術老了點，但依然可以結合現(xiàn)代前端工具鏈來提高效率
本文的食用需要先安裝好Node.js環(huán)境，下載地址：https://nodejs.org/en/download
在開始前，先看看我們的項目文件結構
- Blog/
- Program.cs
- Blog.Web.csproj
- Blog.Web/
- Blog.Data/
- Blog.sln
使用NPM安裝依賴
首先在項目根目錄（也就是Blog/Blog.Web）執(zhí)行
npm?init
生成package.json文件
完成之后項目結構應該類似這樣
- Blog/
- Program.cs
- Blog.Web.csproj
- package.json （npm init 命令創(chuàng)建的文件）
- Blog.Web/
然后編輯package.json或者使用命令行npm install bootstrap來添加需要的前端庫
安裝的前端庫會保存在Blog/Blog.Web/node_modules這個目錄下，但我們的靜態(tài)文件需要放在Blog/Blog.Web/wwwroot里才行，也就是說，我們需要將使用到的 npm 包移動到 wwwroot 文件下。
怎么搞？手動移動或復制是不可能的，太麻煩了。
這時候就要借助自動化工具，這里選擇了gulp.js，用于實現(xiàn)自動移動文件，打包壓縮 js、css、image、刪除文件等操作。提高生產力~
安裝gulp
首先安裝gulp全局工具
npm?install?--global?gulp-cli
然后在項目中安裝gulp以及幾個插件作為開發(fā)依賴（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
//監(jiān)聽文件變化
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
繼續(xù)在根目錄（和package.json同級目錄）下新建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");
//定義?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"]));
//監(jiān)聽文件變化后自動執(zhí)行
gulp.task("auto",?()?=>?{
????gulp.watch(paths.css,?gulp.series(["min:css",?"concatmin:css"]));
????gulp.watch(paths.js,?gulp.series(["min:js",?"concatmin:js"]));
});
執(zhí)行任務
上面定義這幾個任務：
- move：把在
libs常量里配置的node_modules包的dist文件夾移動到wwwroot/lib里 - min：把我們在
wwwroot/css和wwwroot/js里寫的css和js，每一個都壓縮成xxx.min.css/xxx.min.js - concatmin：把上面
min壓縮的所有css和js，合成一個app.min.css和app.min.js - auto：自動監(jiān)聽文件變化后自動執(zhí)行上面的
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]?│?└─┬?
[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]?│?└─┬?
[17:37:44]?│???├──?min:js
[17:37:44]?│???└──?min:css
[17:37:44]?├─┬?concatmin
[17:37:44]?│?└─┬?
[17:37:44]?│???├──?concatmin:js
[17:37:44]?│???└──?concatmin:css
[17:37:44]?└──?auto
使用gulp task-name的命令可以執(zhí)行任務，例如：
>?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做開發(fā)的，所以只介紹一下rider的
很簡單，打開 Run/Debug Configuration，在添加配置里面選擇 JavaScript Build Tools 里的 Gulp.js
然后選擇項目里的GulpFile，Tasks欄下拉可以看到我們定義好的任務，直接添加就完事了
image-20220217174557405添加完就像C#項目一樣，可以直接執(zhí)行
razor里使用
使用Gulp.js收集靜態(tài)文件到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
閱讀推薦
爬蟲筆記：提高數(shù)據(jù)采集效率！代理池和線程池的使用教程
Asp-Net-Core開發(fā)筆記：接口返回json對象出現(xiàn)套娃遞歸問題
Asp.Net Core部署：早知道，還是docker!以及一點碎碎念
評論
圖片
表情