(ASP.NET Core) Sử dụng gulp.js build SCSS (SASS) thành CSS

• gulp.js trong ASP.NET Core
• gulpfile.js - build SCSS
• gulpfile.js - site.scss -> css

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 --global gulp-cli

npm install gulp
npm install node-sass postcss sass

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

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à sass và default

Để 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

gulp.js site.scss -> site.css

Đây là ví dụ gulp biên dịch scss từ file assets/scss/site.scss thành CSS lưu tại wwwroot/css/site.css, nếu muốn có hậu tố min thì bỏ commet suffix

var gulp = require('gulp'),
    cssmin = require("gulp-cssmin")
    rename = require("gulp-rename");
const sass = require('gulp-sass')(require('sass'));

gulp.task('default', function () {
    return gulp.src('assets/scss/site.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(cssmin())
        .pipe(rename({
            // suffix: ".min"
        }))
        .pipe(gulp.dest('wwwroot/css/'));
    });