C# Cơ bản .NET Core §1 Cài đặt, chương trình C# đầu tiên §2 Biến, kiểu dữ liệu và nhập/xuất §3 Toán tử số học và gán §4 So sánh, logic và lệnh if, switch §5 Vòng lặp for, while §6 Phương thức - Method §7 Phương thức - Delegate §8 Lớp - Class §9 Namespace §10 Partial, Nested §11 Kiểu giá trị, tham chiếu §12 Kiểu vô danh và dynamic §13 Biểu thức lambda §14 Event §15 Hàm hủy - Quá tải toán tử - thành viên tĩnh - indexer §16 null và nullable §17 Mảng §18 Chuỗi ký tự §19 Tính kế thừa §20 Phương thức khởi tạo §21 Tính đa hình - abstract - interface §22 Struct và Enum §23 Ngoại lệ Exeption §24 IDisposable - using §25 File cơ bản §26 FileStream §27 Generic §28 Collection - List §29 SortedList §30 Queue / Stack §31 Linkedlist §32 Dictionary - HashSet §33 Phương thức mở rộng §34 ObservableCollection §35 LINQ §36 (Multithreading) async - bất đồng bộ §37 Type §38 Attribute Annotation §39 DI Dependency Injection §40 (Multithreading) Parallel §41 Thư viện lớp §42 (Networking) HttpClient §43 (Networking) HttpMessageHandler §44 (Networking) HttpListener §45 (Networking) Tcp TcpListenerr/TcpClient §46 (ADO.NET) SqlConnection §47 (ADO.NET) SqlCommand §48 (EF Core) Tổng quan §49 (EF Core) Tạo Model §50 (EF Core) Fluent API §51 (EF Core) Query §52 (EF Core) Scaffold §53 (EF Core) Migration §54 (ASP.NET CORE) Hello World! §55 (ASP.NET CORE) Middleware §56 (ASP.NET CORE) Map - Request - Response §57 (ASP.NET CORE) IServiceCollection - MapWhen §58 (ASP.NET CORE) Session - ISession §59 (ASP.NET CORE) Configuration §60 (ASP.NET CORE) Gửi Mail §61 (ASP.NET CORE) SASS/SCSS §62 (ASP.NET CORE) LibMan §63 (ASP.NET RAZOR) Khởi tạo và Route §64 (ASP.NET RAZOR) Cú pháp Razor §65 (ASP.NET RAZOR) Layout trong ASP.NET Core §66 (ASP.NET RAZOR) Partial §67 (ASP.NET RAZOR) ViewComponent §68 (ASP.NET RAZOR) TagHelper §69 (ASP.NET RAZOR) PageModel §70 (ASP.NET RAZOR) Model Binding §71 (ASP.NET RAZOR) HTML Form, Validation §72 (ASP.NET RAZOR) Upload File §73 (ASP.NET RAZOR) HtmlHelper §74 (ASP.NET RAZOR) Entity Framework §75 (ASP.NET RAZOR) Paging §76 (ASP.NET RAZOR) Identity (1) - Register, Login, Logout §77 (ASP.NET RAZOR) Identity (2) Lockout, Reset Password §78 (ASP.NET RAZOR) Identity (3) Google Login §79 (ASP.NET RAZOR) Identity (4) Facebook Login §80 (ASP.NET RAZOR) Identity (5) profile, password, email ... §81 (ASP.NET RAZOR) Identity (6) Role §82 (ASP.NET RAZOR) Identity (7) Role-based Authorization §83 (ASP.NET RAZOR) Identity (8) RoleClaim §84 (ASP.NET RAZOR) Identity (9) Authorization Handler §85 (ASP.NET RAZOR) IAuthorizationService §86 (ASP.NET MVC) Controller - View §87 (ASP.NET MVC) Route §88 (ASP.NET MVC) EF, Identity §89 (ASP.NET MVC) Binding, Validation §90 (ASP.NET MVC) Xây dựng Website(1) §91 (ASP.NET MVC) Xây dựng Website(2) §92 (ASP.NET MVC) Xây dựng Website(3) §93 (ASP.NET MVC) Xây dựng Website(4) §94 (ASP.NET MVC) Giỏ hàng - Cart (5) §95 (ASP.NET MVC) elFinder (5) §96 (ASP.NET MVC) SB Admin (6)

gulp.js trong Asp.net Core

gulp.js là một Task runner, giúp thi hành các tác vụ, để sử dụng gulp.js cần đảm bảo hệ thống có cài node.js rồi (nếu chưa có cần tải về và cài đặt theo hướng dẫn download nodejs ), hoặc cài đặt nhanh bằng package manager tùy thuộc hệ thống package-manager

Phần này sẽ sử dụng gulp trong ASP.NET với các tác vụ để biên dịch file SASS (.SCSS) thành .CSS

Đầu tiên cần tạo ra ở thư mục gốc của dự án file package.json nếu chưa có

package.json

{
}

Thực hiện cài đặt các package sau:

npm install gulp
npm install node-sass postcss

npm install gulp-sass gulp-less gulp-concat gulp-cssmin gulp-uglify rimraf gulp-postcss

Vắn tắt ý nghĩa của các gói trên

  • gulp Task Runner
  • node-sass biên dịch sass (.scss)
  • rimraf sử dụng để thi hành tác vụ xóa file
  • gulp-concat nối các file thành 1
  • gulp-cssmin tối ưu cơ file .CSS (xóa bỏ các thành phần thừa)
  • gulp-uglify tối ưu cơ file .JS (không dùng phần này)
  • gulp-postcss

gulpfile.js tác vụ build SCSS

Tạo ra ở thư mục gốc dự án file gulpfile.js biên tập nội dung như sau:

var gulp = require('gulp');
var sass = require('gulp-sass');
var cssmin = require("gulp-cssmin");
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var concat = require("gulp-concat");

var paths = {
  scss :"./wwwroot/scss/**/*.scss",
  css  : "./wwwroot/css/",
  minCss : "./wwwroot/css/min/",
  concatCssDest : "./wwwroot/css/site.min.css",


  // js : "./wwwroot/js/**/*.js",
  // minJs : "./wwwroot/js/**/*.min.js",
  // concatJsDest : "./wwwroot/js/site.min.js",
  // concatCssDest : "./wwwroot/css/site.min.css",
};


gulp.task('sass', function(cb) {
  gulp
    .src(paths.scss)
    .pipe(sass())
    .pipe(gulp.dest(paths.css))
    .pipe(cssmin())
    .pipe(gulp.dest(paths.minCss));
  cb();
});

gulp.task(
  'default',
  gulp.series('sass', function(cb) {
    gulp.watch(paths.scss, gulp.series('sass'));
    cb();
  })
);

Với định nghĩa như trên, bạn tạo ra hai loại tác vụ có tên là sassdefault

Để thi hành tác vụ sass chỉ cần gõ lệnh:

gulp sass

Tác vụ này thực hiện build các file SCSS ở đường dẫn wwwroot/scss/**/*.scss thành css lưu kết quả tại wwwroot/css/, sau đó tối ưu hóa lưu tại wwwroot/css/min/

Còn tác vụ mặc định default chỉ cần gõ gulp là hoạt động, tác vụ này giám sát thay đổi file scss, nếu có thay đổi thì chạy ngay tác vụ sass

Như vậy từ đây, chỉ cần biên tập mã nguồn SCSS - lập tức có kết quả CSS trong dự án

Đăng ký theo dõi ủng hộ kênh