Gói postcss css

Đã có một quan điểm ngày càng tăng (ví dụ) rằng việc sử dụng trực tiếp các gói nút, với các giao diện dòng lệnh mà chúng cung cấp, là một cách tốt để thực hiện. Trái ngược với việc trừu tượng hóa chức năng đằng sau một trình chạy tác vụ. Từng phần. dù sao thì bạn cũng sử dụng npm, npm cung cấp chức năng viết kịch bản, tại sao không sử dụng nó? . Hãy xem qua cách suy nghĩ cũng như chính xác cách hoàn thành nhiều nhiệm vụ quan trọng nhất trong quy trình xây dựng phát triển giao diện người dùng

Tôi đã bắt đầu sử dụng các tập lệnh npm trong các dự án của mình trong khoảng sáu tháng qua. Trước đó, tôi đã sử dụng Gulp và trước đó là Grunt. Họ đã phục vụ tôi rất tốt và giúp tôi thực hiện công việc của mình nhanh hơn và hiệu quả hơn bằng cách tự động hóa nhiều công việc mà tôi từng làm thủ công. Tuy nhiên, tôi bắt đầu cảm thấy rằng mình đang chống lại các công cụ hơn là tập trung vào mã của riêng mình

Grunt, Gulp, Broccoli, Brunch và những thứ tương tự đều yêu cầu bạn điều chỉnh nhiệm vụ của mình theo mô hình và cấu hình của chúng. Mỗi cái có cú pháp, quirks và gotchas riêng mà bạn cần học. Điều này làm tăng thêm độ phức tạp của mã, độ phức tạp của bản dựng và khiến bạn tập trung vào sửa chữa công cụ hơn là viết mã

Các công cụ xây dựng này dựa trên các plugin bao bọc một công cụ dòng lệnh cốt lõi. Điều này tạo ra một lớp trừu tượng khác ngoài công cụ cốt lõi, nghĩa là có nhiều khả năng xảy ra những điều tồi tệ hơn

Đây là ba vấn đề tôi đã thấy nhiều lần

• Nếu plugin không tồn tại cho công cụ dòng lệnh mà bạn muốn sử dụng, thì bạn không may rồi (trừ khi bạn viết nó)
• Plugin bạn đang cố sử dụng bao bọc phiên bản cũ hơn của công cụ bạn muốn sử dụng. Các tính năng và tài liệu không phải lúc nào cũng khớp giữa plugin bạn đang sử dụng và phiên bản hiện tại của công cụ cốt lõi
• Lỗi không phải lúc nào cũng được xử lý tốt. Nếu một plugin bị lỗi, nó có thể không chuyển lỗi từ công cụ cốt lõi, dẫn đến sự thất vọng và không thực sự biết cách gỡ lỗi sự cố

Nhưng, hãy ghi nhớ…

Hãy để tôi nói điều này. nếu bạn hài lòng với hệ thống xây dựng hiện tại của mình và nó hoàn thành tất cả những gì bạn cần, thì bạn có thể tiếp tục sử dụng nó. Chỉ vì các tập lệnh npm đang trở nên phổ biến hơn không có nghĩa là bạn nên nhảy việc. Tiếp tục tập trung vào viết mã của bạn thay vì học thêm công cụ. Nếu bạn bắt đầu có cảm giác rằng bạn đang chiến đấu với các công cụ của mình, thì đó là lúc tôi khuyên bạn nên xem xét các tập lệnh npm

Nếu bạn đã quyết định muốn điều tra hoặc bắt đầu sử dụng tập lệnh npm, hãy tiếp tục đọc. Bạn sẽ tìm thấy rất nhiều nhiệm vụ ví dụ trong phần còn lại của bài đăng này. Ngoài ra, tôi đã tạo npm-build-boilerplate với tất cả các tác vụ này mà bạn có thể sử dụng làm điểm bắt đầu. Chúng ta hãy đi đến đó

Viết kịch bản npm

Chúng tôi sẽ dành phần lớn thời gian của mình trong một `gói. tập tin json`. Đây là nơi tất cả các phụ thuộc và tập lệnh của chúng tôi sẽ tồn tại. Đây là phiên bản rút gọn từ dự án soạn sẵn của tôi

{
  "name": "npm-build-boilerplate",
  "version": "1.0.0",
  "scripts": {
    ...
  },
  "devDependencies": {
    ...
  }
}

Chúng tôi sẽ xây dựng `gói của chúng tôi. json` khi chúng tôi tiếp tục. Các tập lệnh của chúng tôi sẽ đi vào đối tượng

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

0 và bất kỳ công cụ nào chúng tôi muốn sử dụng sẽ được cài đặt và đưa vào đối tượng

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

1

Trước khi chúng tôi bắt đầu, đây là cấu trúc mẫu của dự án mà tôi sẽ đề cập đến trong suốt bài đăng này

Biên dịch SCSS sang CSS

Tôi là người sử dụng nhiều SCSS, vì vậy đó là những gì tôi sẽ làm việc với. Để biên dịch SCSS thành CSS, tôi chuyển sang node-sass. Đầu tiên, chúng ta cần cài đặt

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

2;

npm install --save-dev node-sass

Điều này sẽ cài đặt

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

2 trong thư mục hiện tại của bạn và thêm nó vào đối tượng

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

1 trong `gói của bạn. json`. Điều này đặc biệt hữu ích khi người khác điều hành dự án của bạn vì họ sẽ có mọi thứ họ cần để dự án chạy. Sau khi cài đặt, chúng ta có thể sử dụng nó trên dòng lệnh

node-sass --output-style compressed -o dist/css src/scss

Hãy chia nhỏ những gì lệnh này làm. Bắt đầu từ cuối, nó nói. tìm trong thư mục `src/scss` để tìm bất kỳ tệp SCSS nào;

Bây giờ chúng ta đã làm việc đó với dòng lệnh, hãy chuyển nó sang tập lệnh npm. Trong `gói của bạn. đối tượng json`

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

0, hãy thêm nó như vậy

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

Bây giờ, quay trở lại dòng lệnh và chạy

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

2

Bạn sẽ thấy kết quả tương tự khi chạy lệnh

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

2 trực tiếp trong dòng lệnh

Bất cứ khi nào chúng tôi tạo tập lệnh npm trong phần còn lại của bài đăng này, bạn có thể chạy nó bằng cách sử dụng lệnh như trên

Chỉ cần thay thế

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

9 bằng tên của tác vụ bạn muốn chạy

Như bạn sẽ thấy, nhiều công cụ dòng lệnh mà chúng tôi sẽ sử dụng có nhiều tùy chọn mà bạn có thể sử dụng để định cấu hình chính xác mà bạn thấy phù hợp. Chẳng hạn, đây là danh sách (tùy chọn nút-sass). Đây là một thiết lập khác cho thấy cách vượt qua nhiều tùy chọn

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

5

Tự động sửa tiền tố CSS với PostCSS

Bây giờ chúng tôi đang biên dịch Scss thành CSS, chúng tôi có thể tự động thêm tiền tố của nhà cung cấp bằng cách sử dụng Autoprefixer & PostCSS. Chúng tôi có thể cài đặt nhiều mô-đun cùng một lúc, ngăn cách chúng bằng dấu cách

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

6

Chúng tôi đang cài đặt hai mô-đun vì PostCSS không làm gì theo mặc định. Nó dựa vào các plugin khác như Autoprefixer để thao tác CSS mà bạn cung cấp cho nó

Với các công cụ cần thiết đã được cài đặt và lưu vào

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

1, hãy thêm tác vụ mới vào đối tượng

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

0 của bạn

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

9

Nhiệm vụ này nói. Này

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

22, sử dụng (

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

23 cờ)

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

24 để thay thế (

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

25 cờ) bất kỳ `. css` trong `dist/css` với mã có tiền tố của nhà cung cấp. Đó là nó. Cần thay đổi hỗ trợ trình duyệt mặc định cho autoprefixer?

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

4

Một lần nữa, có rất nhiều tùy chọn bạn có thể sử dụng để định cấu hình bản dựng của riêng mình. postcss-cli và autoprefixer

Linting JavaScript

Giữ một định dạng và kiểu dáng chuẩn khi viết mã là điều quan trọng để giữ lỗi ở mức tối thiểu và tăng hiệu quả của nhà phát triển. “Linting” giúp chúng ta làm điều đó một cách tự động, vì vậy hãy thêm JavaScript linting bằng cách sử dụng eslint

Một lần nữa, cài đặt gói;

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

5

Điều này cũng giống như

npm install --save-dev node-sass

0

Sau khi cài đặt, chúng tôi sẽ thiết lập một số quy tắc cơ bản để chạy mã của bạn bằng cách sử dụng ________ 126. Chạy phần sau để bắt đầu trình hướng dẫn

npm install --save-dev node-sass

1

Tôi khuyên bạn nên chọn “Trả lời các câu hỏi về phong cách của bạn” và trả lời các câu hỏi mà nó yêu cầu. Thao tác này sẽ tạo một tệp mới trong thư mục gốc của dự án mà

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

26 sẽ kiểm tra mã của bạn dựa trên

Bây giờ, hãy thêm một tác vụ lint vào `gói của chúng ta. đối tượng json`

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

0

npm install --save-dev node-sass

2

Nhiệm vụ lint của chúng tôi dài 13 ký tự. Nó tìm kiếm bất kỳ tệp JavaScript nào trong thư mục

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

29 và chạy chúng theo cấu hình mà nó đã tạo trước đó. Tất nhiên, bạn có thể phát điên với các tùy chọn

Làm xấu các tệp JavaScript

Hãy bắt tay vào việc kết hợp và thu nhỏ các tệp JavaScript của chúng ta, chúng ta có thể sử dụng uglify-js để thực hiện. Chúng tôi sẽ cần cài đặt

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

50 trước

npm install --save-dev node-sass

3

Sau đó, chúng ta có thể thiết lập tác vụ làm xấu xí của mình trong `gói. json`

npm install --save-dev node-sass

4

Một trong những điều tuyệt vời về tập lệnh npm là về cơ bản chúng là bí danh cho tác vụ dòng lệnh mà bạn muốn chạy đi chạy lại. Điều này có nghĩa là bạn có thể sử dụng mã dòng lệnh tiêu chuẩn ngay trong tập lệnh của mình. Tác vụ này sử dụng hai tính năng dòng lệnh tiêu chuẩn,

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

51 và

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

52

Nửa đầu của nhiệm vụ này,

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

53 nói. Tạo cấu trúc thư mục (

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

51), nhưng chỉ khi nó chưa tồn tại (cờ

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

55). Khi đã hoàn tất thành công, hãy chạy lệnh

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

56.

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

52 cho phép bạn xâu chuỗi nhiều lệnh lại với nhau, chạy tuần tự từng lệnh nếu lệnh trước hoàn thành thành công

Nửa sau của nhiệm vụ này yêu cầu

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

56 bắt đầu với tất cả các tệp JS (`*. js`) trong `src/js/`, áp dụng lệnh “mangle” (cờ

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

59) và xuất kết quả ra `dist/js/app. js`. Một lần nữa, hãy kiểm tra tài liệu về công cụ được đề cập để biết danh sách đầy đủ các tùy chọn

Hãy cập nhật tác vụ

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

60 của chúng ta để tạo phiên bản nén của `dist/js/app. js`. Xâu chuỗi một lệnh

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

56 khác và chuyển cờ “compress” (

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

62)

npm install --save-dev node-sass

5

Nén hình ảnh

Bây giờ chúng ta hãy chú ý đến việc nén hình ảnh. Theo httparchive. org, trọng lượng trang trung bình của 1000 URL hàng đầu trên internet là 1. 9mb, với hình ảnh chiếm 1. 1mb trong tổng số đó. Một trong những điều tốt nhất bạn có thể làm để tăng tốc độ trang là giảm kích thước hình ảnh của bạn

Cài đặt imagemin-cli

npm install --save-dev node-sass

6

Imagemin rất tuyệt vì nó sẽ nén hầu hết các loại hình ảnh, bao gồm GIF, JPG, PNG và SVG. Bạn có thể chuyển cho nó một thư mục hình ảnh và nó sẽ xử lý tất cả chúng, như vậy

npm install --save-dev node-sass

7

Nhiệm vụ này yêu cầu

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

63 tìm và nén tất cả hình ảnh trong `src/images` và đặt chúng vào `dist/images`. Cờ

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

55 được chuyển để tạo hình ảnh “tiến bộ” khi có thể. Kiểm tra tài liệu cho tất cả các tùy chọn có sẵn

Sinh vật SVG

Tin đồn xung quanh SVG đã tăng lên trong vài năm qua và vì lý do chính đáng. Chúng sắc nét trên tất cả các thiết bị, có thể chỉnh sửa bằng CSS và thân thiện với trình đọc màn hình. Tuy nhiên, phần mềm chỉnh sửa SVG thường để lại mã không liên quan và không cần thiết. May mắn thay, svgo có thể giúp bằng cách loại bỏ tất cả những thứ đó (chúng tôi sẽ cài đặt nó bên dưới)

Bạn cũng có thể tự động hóa quá trình kết hợp và chia nhỏ các SVG của mình để tạo một tệp SVG duy nhất (thêm về kỹ thuật đó tại đây). Để tự động hóa quá trình này, chúng ta có thể cài đặt svg-sprite-generator

npm install --save-dev node-sass

8

Mô hình có lẽ quen thuộc với bạn bây giờ. sau khi cài đặt, hãy thêm tác vụ vào `gói của bạn. đối tượng json`

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

0

npm install --save-dev node-sass

9

Lưu ý rằng tác vụ

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

66 thực hiện ba việc, dựa trên sự hiện diện của hai chỉ thị

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

52. Đầu tiên, chúng tôi sử dụng ________ 168, chuyển một thư mục (cờ ________ 169) của các SVG; . Thứ hai, chúng tôi sẽ tạo thư mục

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

90 nếu nó chưa tồn tại (sử dụng lệnh

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

91). Cuối cùng, chúng tôi sử dụng

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

92, chuyển cho nó một thư mục SVG (cờ

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

93) và một đường dẫn mà chúng tôi muốn sprite SVG xuất ra (cờ

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

5)

Cung cấp và tự động thực hiện các thay đổi với BrowserSync

Một trong những mảnh ghép cuối cùng của câu đố là BrowserSync. Một vài trong số những điều nó có thể làm. khởi động một máy chủ cục bộ, tự động đưa các tệp đã cập nhật vào bất kỳ trình duyệt được kết nối nào và đồng bộ hóa các lần nhấp và cuộn giữa các trình duyệt. Cài đặt nó và thêm một nhiệm vụ

node-sass --output-style compressed -o dist/css src/scss

0

node-sass --output-style compressed -o dist/css src/scss

1

Tác vụ BrowserSync của chúng tôi khởi động một máy chủ (cờ ____195) bằng cách sử dụng đường dẫn hiện tại làm gốc theo mặc định. Cờ

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

96 yêu cầu BrowserSync xem bất kỳ tệp CSS hoặc JS nào trong thư mục `dist`;

Bạn có thể mở nhiều trình duyệt (thậm chí trên các thiết bị khác nhau) và tất cả chúng sẽ được cập nhật các thay đổi về tệp theo thời gian thực

Nhiệm vụ nhóm

Với tất cả các nhiệm vụ từ trên, chúng tôi có thể

• Biên dịch SCSS thành CSS và tự động thêm tiền tố của nhà cung cấp
• Xơ và làm xấu JavaScript
• Nén hình ảnh
• Chuyển đổi một thư mục SVG thành một sprite SVG duy nhất
• Khởi động máy chủ cục bộ và tự động đưa các thay đổi vào bất kỳ trình duyệt nào được kết nối với máy chủ

Đừng dừng lại ở đó

Kết hợp các tác vụ CSS

Hãy thêm một tác vụ kết hợp hai tác vụ liên quan đến CSS (tiền xử lý Sass và chạy Autoprefixer), vì vậy chúng ta không phải chạy riêng từng tác vụ

node-sass --output-style compressed -o dist/css src/scss

2

Khi bạn chạy

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

97, nó sẽ báo dòng lệnh chạy

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

98;

Giống như với tác vụ

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

41 của chúng tôi, chúng tôi có thể xâu chuỗi các tác vụ JavaScript của mình lại với nhau để giúp chạy dễ dàng hơn

Kết hợp các tác vụ JavaScript

node-sass --output-style compressed -o dist/css src/scss

3

Bây giờ, chúng ta có thể gọi

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

42 để lint, nối và làm xấu JavaScript của chúng ta chỉ trong một bước

Kết hợp các nhiệm vụ còn lại

Chúng tôi có thể làm điều tương tự cho các tác vụ hình ảnh của mình, cũng như một tác vụ kết hợp tất cả các tác vụ xây dựng thành một

node-sass --output-style compressed -o dist/css src/scss

4

Theo dõi những thay đổi

Cho đến thời điểm này, các tác vụ của chúng tôi yêu cầu thực hiện thay đổi đối với một tệp, quay lại dòng lệnh và chạy (các) tác vụ tương ứng. Một trong những điều hữu ích nhất chúng ta có thể làm là thêm các tác vụ theo dõi các thay đổi tự động chạy các tác vụ khi tệp thay đổi. Để làm điều này, tôi khuyên bạn nên sử dụng onchange. Cài đặt như bình thường

node-sass --output-style compressed -o dist/css src/scss

5

Hãy thiết lập các tác vụ xem cho CSS và JavaScript

node-sass --output-style compressed -o dist/css src/scss

6

Đây là sự cố về các nhiệm vụ này.

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

43 yêu cầu bạn chuyển một đường dẫn dưới dạng chuỗi tới các tệp bạn muốn xem. Chúng tôi sẽ chuyển các tệp SCSS và JS nguồn của chúng tôi để xem. Lệnh chúng tôi muốn chạy xuất hiện sau

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

44 và nó sẽ chạy bất cứ khi nào một tệp trong đường dẫn đã cho được thêm, thay đổi hoặc xóa

Hãy thêm một lệnh theo dõi nữa để kết thúc quá trình xây dựng tập lệnh npm của chúng tôi

Cài đặt thêm một gói nữa, Parallelshell

node-sass --output-style compressed -o dist/css src/scss

7

Một lần nữa, thêm một nhiệm vụ mới vào đối tượng

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

0

node-sass --output-style compressed -o dist/css src/scss

8

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

46 nhận nhiều chuỗi, chúng tôi sẽ chuyển nhiều tác vụ

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

47 để chạy

Tại sao lại sử dụng

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

46 để kết hợp nhiều tác vụ thay vì sử dụng

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

52 như trong các tác vụ trước đây? . Vấn đề là

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

52 xâu chuỗi các lệnh lại với nhau và đợi mỗi lệnh kết thúc thành công trước khi bắt đầu lệnh tiếp theo. Tuy nhiên, vì chúng tôi đang chạy các lệnh

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

51 nên chúng không bao giờ kết thúc. Chúng ta sẽ bị mắc kẹt trong một vòng lặp vô tận

Do đó, sử dụng

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

46 cho phép chúng tôi chạy đồng thời nhiều lệnh

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

51

Tác vụ này kích hoạt máy chủ với BrowserSync bằng tác vụ

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

54. Sau đó, nó bắt đầu các lệnh theo dõi của chúng tôi cho cả tệp CSS và JavaScript. Bất cứ khi nào tệp CSS hoặc JavaScript thay đổi, tác vụ theo dõi sẽ thực hiện tác vụ xây dựng tương ứng; . Ngọt

Các nhiệm vụ hữu ích khác

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

55 đi kèm với rất nhiều nhiệm vụ hấp dẫn mà bạn có thể tham gia. Hãy viết thêm một tác vụ tận dụng một trong những tập lệnh được tạo này

node-sass --output-style compressed -o dist/css src/scss

9

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

56 chạy ngay sau khi bạn chạy

"scripts": {
  "scss": "node-sass --output-style compressed -o dist/css src/scss"
}

57 trong dòng lệnh của bạn. Đây là một điều tuyệt vời để có, đặc biệt là khi làm việc theo nhóm; . Họ sẽ tự động khởi động máy chủ, mở cửa sổ trình duyệt và các tệp đang được theo dõi để thay đổi

Gói (lại

chà. Chúng tôi thực hiện nó. Tôi hy vọng bạn đã có thể học được một số điều về cách sử dụng tập lệnh npm làm quy trình xây dựng và dòng lệnh nói chung

Đề phòng trường hợp bạn bỏ lỡ, tôi đã tạo dự án npm-build-boilerplate với tất cả các tác vụ này mà bạn có thể sử dụng làm điểm bắt đầu. Nếu bạn có câu hỏi hoặc nhận xét, vui lòng tweet cho tôi hoặc để lại nhận xét bên dưới. Tôi rất sẵn lòng giúp đỡ nếu có thể