Tự động hóa luồng xây dựng ưa thích của bạn với Gulp


Đỗ Bá Thành
2 năm trước
Hữu ích 5 Chia sẻ Viết bình luận 0
Đã xem 8415

Xin chào, nhà phát triển full-stack. Nếu bạn không sử dụng bất kỳ hệ thống xây dựng nào, thì bạn đang mất rất nhiều năng suất.

Trong nhiều trường hợp, bạn sẽ phát triển mã của mình với ý tưởng về khả năng duy trì và tối ưu hóa. JavaScript và mã Markup khác của chúng tôi phải được đặt ở một vị trí thích hợp trong khi phục vụ từ máy chủ web. Nếu bạn chưa bao giờ nghe về Gulp hoặc Grunt thì bạn không may mắn. Nhưng nếu bạn có, bài viết này sẽ củng cố kiến ​​thức của bạn. Chủ đề này khá phổ biến trong lĩnh vực phát triển front-end. Nhưng đối với các nhà phát triển full-stack, không quá nhiều. Tôi đã thấy rất nhiều trong số họ đánh giá thấp sức mạnh của các công cụ phát trực tuyến quy trình như Gulp, Grunt hoặc WebPack.

Gần đây tôi đã sử dụng Gulp một cách hiệu quả trong công việc của mình để tự động hóa rất nhiều thứ nhàm chán. Tôi hy vọng bạn cũng có thể từ bây giờ.

Tại sao chúng ta cần một hệ thống xây dựng?

Trong kỷ nguyên băng của phát triển giao diện người dùng, các nhà phát triển đã sử dụng để viết mã và cập nhật thủ công các tệp ở bất cứ nơi nào cần thiết. Họ đã học hỏi đều đặn từ Mạng lưới nhà phát triển của Google và các nơi khác về cách kết hợp và thu nhỏ HTML, CSS và JS có thể cải thiện tốc độ trang và từ đó mang lại trải nghiệm của khách hàng. Mặc dù tốc độ tải trang và thời gian tải tài nguyên (hình ảnh) có thể phụ thuộc vào nhiều yếu tố khác nhau (DB, Độ trễ, v.v.), bạn có trách nhiệm là nhà phát triển ngăn xếp đầy đủ để tối ưu hóa tất cả các phần nhạy cảm của ứng dụng web phức tạp. Vì vậy, ở đây, phần nhạy cảm là trình duyệt.

Khi bạn phục vụ tài nguyên web (HTML, CSS, JS) từ máy chủ web (Apache hoặc Nginx), tốc độ trang chủ yếu đặt cược vào băng thông. Nếu các tệp của bạn rất lớn (với hàng ngàn dòng mã và hàng trăm KB), thì trang web của bạn có thể không có giá tốt. Trong một trường hợp khác, nếu bạn đang tải quá nhiều tệp, nó cũng có thể gây ra sự cố trong trải nghiệm của người dùng (UX).

Làm gì để cải thiện trải nghiệm web?

Những thứ chúng tôi đang xây dựng ở đây:

  • Giảm thiểu các tập tin của bạn để giảm kích thước

  • Gói hoặc bó các tệp của bạn thành một tệp duy nhất và phục vụ nó

Đối với các nhà phát triển, làm những việc này bằng tay là một nhiệm vụ đau đớn. May mắn thay, chúng tôi đã có một công cụ tự động hóa dòng xây dựng tuyệt vời như Gulp. Chúng tôi có thể xác định bất kỳ nhiệm vụ và có thể yêu cầu gulp thực hiện chúng.

Nhìn thấy là tin tưởng

Ở đây, tôi sẽ cho bạn thấy một ứng dụng hoạt động của Gulp. Tôi đã tạo một dự án gọi là không gian làm việc với hai thư mục trong đó.

  • src /: nơi tất cả các tệp nguồn nằm trong dự án
  • build / : nơi xuất hiện tất cả các tệp được rút gọn và ghép

Trước khi lao vào, chúng ta nên biết những điều kiện tiên quyết cần thiết để Gulp hoạt động. Bạn nên có một bản sao hoạt động của Node và npm trên máy tính của bạn. Nếu bạn không có chúng, hãy làm theo các hướng dẫn sau: 

Cách cài đặt Node.js trên Ubuntu 16.04 | DigitalOcean .

Nếu bạn đang sử dụng máy Mac OS X, bạn có thể cài đặt nút bằng HomeBrew:

Cài đặt Node.js và npm bằng Homebrew trên OS X và macOS

Node sử dụng thư viện C ++ của động cơ V6 để thực thi. Nếu bạn đã cài đặt trình duyệt Google Chrome trên máy tính của mình, bạn đã có thư viện đó. Nếu không, bạn có thể dễ dàng tải xuống tất cả các phụ thuộc cho nút. Sau khi cài đặt nút và NPM, bạn cần cài đặt Gulp bằng lệnh này.

$ npm install --global gulp-cli

Bây giờ dự án của tôi là thư mục không gian làm việc.

Ở đây chúng tôi có một cấu trúc thư mục tốt đẹp (sở thích cá nhân). Tất cả các tệp nguồn sẽ nằm trong thư mục src / . Tất cả các tệp được rút gọn và các tệp được nối sẽ nằm trong thư mục bản dựng / . index.html cũng có thể được thu nhỏ.

Bây giờ trong thư mục dự án cài đặt Gulp:

$ npm install --save-dev gulp


Bây giờ chúng ta có Gulp. Tiếp theo, chúng ta nên đưa ra một vài hướng dẫn cho Gulp. Chúng tôi tạo một tệp Gulp để làm điều đó. Nó là một tệp JavaScript với các tác vụ được xác định trong đó. Gulp hiểu những nhiệm vụ đó và thực hiện chúng.

node_modules được tạo bởi lệnh trên.

Bắt đầu tối ưu hóa

Bây giờ, hãy để tôi thêm một số HTML đơn giản vào index.html

<html>  
  <head>     
    <title> 
      The simplest HTML example      
    </title>  
  </head>  
  <body>   
    <h1> 
      This is  an HTML Page 
    </h1>   
  </body>
</html>


Tập tin này chỉ là một ví dụ đơn giản. Nhưng trong dự án của bạn, tệp này có thể đạt tới vài nghìn dòng mã đánh dấu. Vì vậy, giữ cho bản gốc (có dấu cách & tab) là không tốt.

Thói quen tốt đầu tiên là giữ nguồn trong src / thư mục thay vì rắc nó ở đây và kia. Vì vậy, tôi sao chép index.html sang src /

$ cp index.html src/


Bây giờ tôi nên gán một nhiệm vụ cho Gulp để thu nhỏ index.html này trong src / cho index.html trong thư mục dự án. Đối với điều đó, tôi nên tạo ra một gulpfile. Để cung cấp logic thu nhỏ của HTML, chúng ta nên cài đặt một plugin có tên là gulp-minify-html. Gulp là một trình giải mã và thực thi nhiệm vụ, nhưng bạn nên giúp Gulp bằng cách cho biết cách thu nhỏ HTML. Đây là một plugin như vậy mà logic đó đã được viết. Bạn có thể viết logic tùy chỉnh của bạn quá.

Bây giờ thêm nội dung vào tập tin gulp.

// gulpfile.js
var gulp = require("gulp");
var minifyHtml = require("gulp-minify-html");
gulp.task("minify-html", function(){
   gulp.src("src/index.html")
   .pipe(minifyHtml())
   .pipe(gulp.dest('.'));
});


Trong tệp gulp ở trên, các hành động này được xác định:

  • Nhập khẩu để tạo nhiệm vụ.

  • Nhập gulp-minify-html để thu nhỏ tệp HTML

  • Tạo một tác vụ gọi là minify-html

Chuyện gì đang xảy ra ở đây?

Một tác vụ gulp đầu vào hai đối số. task_namefunction_handler

Tên tác vụ được sử dụng cho gulp để xác định tác vụ thực thi trong khi trình xử lý hàm là danh sách lệnh thực thi thực tế. Nếu bạn thấy, chúng tôi đang đặt một bộ hướng dẫn lần lượt. Bản chất của Gulp là trong chuỗi đó. Hãy viết những hướng dẫn bằng tiếng Anh đơn giản:

  • Tải tập tin nguồn từ đường dẫn đã cho. Đây là từ src / index.html

  • Áp dụng hàm minifyHtml cho nội dung được tải đó

  • Xuất tệp được rút gọn thành index.html trong thư mục gốc của dự án

Bây giờ lưu tệp và chạy lệnh này từ dự án gốc (tức là Workspace).

$ gulp minify-html


Nó thu nhỏ HTML từ src / index.html và đặt nó vào thư mục gốc của dự án.

Bây giờ nếu chúng ta nhìn vào tệp index.html được rút gọn , nó sẽ trông như sau:

<html>
  <head>
  <title>The simplest HTML example</title>
  </head>
  <body>
  <h1>This is an HTML Page</h1>
  </body>
  </html>


Chúng tôi đã ra lệnh cho Gulp làm một cái gì đó và nó đã làm chính xác những gì chúng tôi muốn. Tương tự, chúng ta có thể thu nhỏ CSS, thu nhỏ JS, nối các tệp JS thành một tệp duy nhất, các tệp thụt lề và nhiều hơn nữa.

Ở đây tôi cài đặt các plugin cần thiết cho Gulp để thực hiện các tác vụ trên.

$ npm install --save-dev gulp-minify-html
$ npm install --save-dev gulp-minify-css
$ npm install --save-dev gulp-uglify
$ npm install --save-dev gulp-concat


Tất cả các plugin này sẽ được lưu trong thư mục node_modules của bạn trong thư mục gốc của dự án.

Trước khi thu nhỏ tài nguyên web (JS, CSS) tôi sẽ tạo một vài tập lệnh giả. Đầu tiên là tệp JavaScript:

// src/js/script1.js
var foo = 10;
console.log("foo is", foo)


Bây giờ tạo một tệp JS khác trong src / js. Các tệp này đơn giản ở đây nhưng trong dự án của bạn, chúng có thể trải rộng đến hàng ngàn dòng mã.

// src/js/script2.js
var bar = 20;
console.log("bar is", bar);


Tạo một tệp CSS giả trong thư mục src / css

/* src/css/custom.css   */
body {
      background-color: red;
} 

.myDiv {
    margin-left: 10%;
    margin-top: 15%;
}


Cấu trúc thư mục trông như thế này.

Bây giờ, tôi sửa đổi gulpfile của mình để thêm các mục nhập và tác vụ để thu nhỏ, nối các tệp CSS và JS.

var gulp = require("gulp");
var minifyHtml = require("gulp-minify-html");
var minifyCss = require("gulp-minify-css");
var uglify = require("gulp-uglify");
var concat = require("gulp-concat");

gulp.task("minify-html", function(){

     gulp.src("src/*.html")
    .pipe(minifyHtml())
    .pipe(gulp.dest('.'));
});

gulp.task("merge-minify-js-css", function(){
      gulp.src("src/js/*.js")
     .pipe(concat("main.min.js"))
     .pipe(uglify())
     .pipe(gulp.dest("build/js"));

      gulp.src("src/css/*.css")
     .pipe(concat("custom.min.css"))
     .pipe(minifyCss())
     .pipe(gulp.dest("build/css"));
});


Các mã trên nên rõ ràng cho bạn bây giờ. * .js có nghĩa là cho tất cả các tệp js trong thư mục.

Một lần nữa bằng tiếng Anh đơn giản:

  • Nhập tất cả các chức năng cần thiết

  • Tạo nhiệm vụ với các nhiệm vụ trong đó

  • Một nhiệm vụ con là Ghép nhiều tệp JS và thu nhỏ. Sau đó xuất main.min.js để xây dựng / js

  • Một nhiệm vụ con khác là ghép các tệp CSS thành một tệp duy nhất và thu nhỏ. Nó cũng tạo ra một custom.min.css để xây dựng / css /

Bây giờ, hãy lưu và chạy gulpfile này với các tác vụ.

Gulp đã hoàn thành cả hai nhiệm vụ và bây giờ bạn sẽ có thể thấy các tệp được rút gọn mới được tạo trong cây.

Và các tập tin rút gọn trông như:

Vì việc thu nhỏ là một quá trình loại bỏ các ký tự khoảng trắng và các dòng mới, nó có thể giảm kích thước tệp đến một mức độ lớn, từ đó giúp tăng tốc độ tải trang web.

Tôi không thể thực thi tất cả các nhiệm vụ trong một lần?

Vâng, bạn có thể. Vì vậy, gulp cung cấp một tác vụ có tên là mặc định là vụn . Nếu bạn cảm thấy nên thực hiện một danh sách các tác vụ bằng một lệnh đơn giản thì hãy thêm các dòng này vào tệp gulp ở trên.

// append to gulpfile.js
gulp.task("default", ["minify-html", "merge-minify-js-css"]);


Bây giờ, bạn có thể thực hiện tất cả các tác vụ trong một lần duy nhất chỉ bằng một lệnh gulp.

$ gulp

Tôi có cần chạy lệnh Gulp mỗi khi tôi thay đổi tệp nguồn của mình không?

Để chạy mã, bạn không thể chỉnh sửa trực tiếp các tệp được thu nhỏ. Thay vào đó, bạn sửa đổi các tệp nguồn sau đó sẽ chạy lệnh gulp. Nhưng nó là một điều khá đơn giản. Đối với mỗi sửa đổi nhỏ, bạn cần chạy gulp. Để thực hiện quy trình này tự động, Gulp cung cấp cho bạn người theo dõi các tệp nguồn của bạn. Chỉ cần chạy một người theo dõi, sau đó sửa đổi mã nguồn. Gulp sẽ đảm nhiệm việc xây dựng các tệp một cách nhanh chóng bất cứ khi nào có thay đổi để xem các tệp.

var gulp = require("gulp");
var minifyHtml = require("gulp-minify-html");
var minifyCss = require("gulp-minify-css");
var uglify = require("gulp-uglify");
var concat = require("gulp-concat");

var paths = {
    scripts: "src/js/*.js",
    styles: "src/css/*.css",
    html: "src/*.html"
}

gulp.task("minify-html", function(){

     gulp.src(paths.html)
    .pipe(minifyHtml())
    .pipe(gulp.dest('.'));
});

gulp.task("merge-minify-js", function(){
      gulp.src(paths.scripts)
     .pipe(concat("main.min.js"))
     .pipe(uglify())
     .pipe(gulp.dest("build/js"));

});

gulp.task("merge-minify-css", function(){
      gulp.src(paths.styles)
     .pipe(concat("custom.min.css"))
     .pipe(minifyCss())
     .pipe(gulp.dest("build/css"));
});

// Rerun the task when a file changes
gulp.task('watch', function() {

  gulp.watch(paths.scripts, ['merge-minify-js']);
  gulp.watch(paths.styles, ['merge-minify-css']);
  gulp.watch(paths.html, ['minify-html']);

});


gulp.task("default", ["watch", "minify-html", "merge-minify-js", "merge-minify-css"]);


Ở đây chúng tôi phân mảnh các nhiệm vụ HTML, CSS và JS. Sau đó bắt đầu xem các tệp đó và đính kèm một tác vụ vào một thay đổi thư mục cụ thể.

// Rerun the task when a file changes
gulp.task('watch', function() {

    gulp.watch(paths.scripts, ['merge-minify-js']);
    gulp.watch(paths.styles, ['merge-minify-css']);
    gulp.watch(paths.html, ['minify-html']);
});
// Add watch to the default tasks
gulp.task("default", ["watch", "minify-html", "merge-minify-js", "merge-minify-css"]);


Bây giờ, khi bạn chạy lệnh gulp, nó bắt đầu một trình theo dõi không bao giờ kết thúc nằm ở đó và âm thầm tìm kiếm các thay đổi. Khi một tệp cụ thể được thay đổi, nó sẽ thực thi tác vụ liên quan đến nó.

Điều đó có nghĩa là khi chúng tôi sửa đổi các tệp CSS, tác vụ thu nhỏ CSS sẽ tự động chạy. Điều này thực sự hữu ích nếu các nhà phát triển đang thêm các thay đổi liên tục và bản dựng được tạo tự động.

Điểm nói chuyện khác

Ở đây chúng tôi chỉ sử dụng Gulp cho các tác vụ UI cơ bản. Vì nó chạy trên Node , bạn có thể đưa ra các lệnh hệ điều hành và các chức năng tiện ích tùy chỉnh cho Gulp. Đối với công việc vệ sinh và các nhiệm vụ định kỳ, xem các nhiệm vụ bạn có thể sử dụng Gulp. Bạn cũng có thể xây dựng một luồng công việc để phát hành git và xây dựng các tệp với nó.

Dù sao, tôi nghĩ bây giờ bạn đã có một ý tưởng cơ bản về Gulp là gì và cách nó tăng năng suất của bạn bằng cách tạo các luồng xây dựng tự động từ một tệp cấu hình đơn giản.

Hữu ích 5 Chia sẻ Viết bình luận 0
Đã xem 8415