Name: Agence Web Tremplin Numérique
Price range: $$$

tôi biết GruntJS mà chưa bao giờ sử dụng nó nhưng tôi sẽ phải nghe từ một nhà phát triển Symfony tôi khối lượng để tôi dựa vào giải pháp này. Đầu tiên, thay thế Giả định mệnh GruntJS đối với tôi là một giải pháp để làm cho các dự án của tôi hoạt động Symfony avec HHVM. Bây giờ máy chủ PHP de Facebook hoạt động hoàn hảo với Giả định nhưng tôi thấy ngày càng ít lý do để tiếp tục sử dụng Giả định. Cuối cùng, việc sử dụng Tiếng càu nhàu, một plugin dựa trên Nút Node, thúc đẩy hầu hết các nhà phát triển sử dụng Cung cấp, một plugin khác để quản lý các phụ thuộc. Chúng tôi sẽ nói về Cung cấp thấp hơn. Chúng ta hãy xem nhanh những ưu và nhược điểm.

Chú ý ! Trước khi bạn bắt đầu di chuyển ứng dụng của mình, tôi khuyên bạn nên phiên bản mã của mình và thực hiện một số thử nghiệm. Bạn nên đọc toàn bộ bài báo trước khi bắt tay vào sứ mệnh dài hạn này.

tóm lại

Giới thiệu

Assetic, người bạn bị hiểu lầm

Về phần mình, tôi cho rằngGiả định bị hiểu sai và sử dụng sai. Tôi sẽ giải thích suy nghĩ của tôi cho bạn. (Ngoài ra, tôi đã sửa bài viết này sau một sự hiểu lầm từ phía tôi, cảm ơn sự phản hồi của Manuel Klein).

Lợi ích

Việc sử dụngGiả định cho phép bạn hủy bộ đệm trên tài nguyên vì tên của tài nguyên JS và CSS được tạo sẽ thay đổi mỗi khi bạn khởi chạy lệnh “tài sản:dump”. Một lợi thế nhất định!

nhược điểm

Assetic cung cấp một số tùy chọn để định cấu hình cách tạo tài nguyên.
Cần phải cài đặt các gói PHP để tạo các tài nguyên kỳ lạ như LESS. Mã PHP được cài đặt trong nhà cung cấp trong khi nhiệm vụ này chỉ hữu ích cho khách hàng. Không cho máy chủ. Ngoài ra, nó làm tăng số lượng dự án của bạn.
Mã số PHP là cần thiết trong mẫu Cành utilisant Giả định hoặc gần như tất cả chúng. Trong khi với Grunt, tài nguyên được biên dịch sẽ được gọi theo tên mà bạn đã đặt cho nó.

Thực sự sử dụng Assetic trong các mẫu của bạn

Tôi thường thấy trong mẫu Cành mà tôi bắt gặp, các tài nguyên đôi khi được liên kết qua Giả định, đôi khi thông qua tài sản de Giao hưởng.

# Sử dụng tài sản
@NamespaceMyBundle/Resources/public/css/main.css
# Unused Assetic, sử dụng Assets
/bó/namespacemy/css/main.css

Trong trường hợp đầu tiên, Giả định thực sự áp dụng. Trong trường hợp thứ hai, Giả định được che giấu hoàn toàn để không sử dụng tài sản de Symfony. Việc sử dụng tài sản Theo tôi, đó cũng là một sai lầm, ít nhất là đối với quyền truy cập vào các tài nguyên JS và CSS. Kết thúc dấu ngoặc đơn...

Grunt JS trình biên dịch linh hoạt Sooo!

GruntJS dựa trên Node.js. Nó là một công cụ phía máy khách đi qua các mô-đun để thực hiện nhiều hành động như nối tệp, Thu nhỏ, nén ảnh, biên dịch LESS, TypeScript… Không giống như Giả định, bạn sẽ phải thiết lập một số cấu hình nhất định nhưng hãy yên tâm, khoản đầu tư ban đầu này sẽ được đền đáp và cuối cùng sẽ nhanh hơn nhiều so vớiGiả định.

Giới thiệu về Bower, composer.json tài nguyên

GruntJS là tốt và sẽ được đặt trên cùng một phân khúc nhưGiả định. Nhưng miễn là bạn sử dụng Node.js, cũng như sử dụng Cung cấp ! Nó là một người quản lý phụ thuộc. Nói một cách đơn giản, bạn xác định các tài nguyên bạn cần, "thư viện như vậy trong phiên bản như vậy" và Cung cấp chăm sóc để có được phiên bản bạn muốn. Tất nhiên, giống như nhà soạn nhạc.json vì PHP, bạn có thể thêm phạm vi phiên bản. Nếu bạn muốn có một thư viện trong phiên bản 3.3., * Người cúi đầu sẽ giúp bạn có phiên bản mới nhất hiện có. Một giải pháp để dễ dàng cập nhật các tài nguyên này. Một sự cố lặp lại đối với các dự án tiêu chuẩn của chúng tôi vì chúng tôi (đã có!) có xu hướng tải xuống một phiên bản và không bao giờ cập nhật phiên bản đó sau đó. Chúng tôi không có những cập nhật nhỏ đôi khi rất hữu ích.

Về mặt kỹ thuật, Cung cấp sử dụng tệp bower.json. Cú pháp của nó rất đơn giản. Tôi khuyên bạn nên sử dụng nó ngay cả khi bạn có thể tiếp tục mà không cần nó. Tệp sẽ cần được tạo phiên bản không giống như các tài nguyên Cung cấp sẽ đến tải về cho bạn. Để giúp bạn bắt đầu, tôi sẽ cung cấp cho bạn một ví dụ dưới đây.

Lập phiên bản các tài nguyên đã biên dịch

Về phần mình, tôi đã có thói quen không phiên bản các tài nguyên đã biên dịch của mình cho Giả định nhưng tôi quyết định làm ngược lại cho GruntJS. Vì tôi không có tài nguyên để quản lý bởi Cung cấp (xem Giới thiệu về Cung cấp), tôi sẽ biên dịch tài nguyên của mình và máng xối. Bằng cách này, tôi có thể nhanh chóng triển khai ứng dụng của mình. Tôi chưa bao giờ nhận được phản hồi về phương pháp này nhưng tôi thấy nó đáng nể vì hai thao tác bị hủy tại thời điểm triển khai (khôi phục tài nguyên bằng Cung cấp và biên dịch với GruntJS), cũng như sự cần thiết phải có Node.js trên máy của mình.

Xóa Assetic khỏi dự án Symfony của chúng tôi

Giả định đã được chọn làm thành phần mặc định chịu trách nhiệm biên dịch tài nguyên. Xin lưu ý rằng bất chấp mọi thứ, nó rất dễ bị xóa.

Xóa khối Cành Thuộc loại javascript et bảng định kiểu. Chúng không cần thiết. Giữ các tập tin bạn đang sử dụng sang một bên. Trong tuong lai, cac tac pham muon dung se duoc quyet dinh trong tac pham Gruntfile.js. Chúng ta sẽ thấy điều đó một lát sau.

#app/config/config.yml
# Xóa cấu hình khỏi tài sản. Cũng sẽ có một số tệp trong config_prod.yml, config_dev.yml và các tệp đã tải lên khác
tài sản:
 gỡ lỗi: “%kernel.debug%”
 bộ điều khiển sử dụng: sai
 bó: []
 bộ lọc:
 viết lại css: ~

#app/AppKernel.php
# Dừng tải AsseticBundle bằng cách xóa dòng khỏi AppKernel
...
mới SymfonyBundleAsseticBundleAsseticBundle()
...

# nhà soạn nhạc.json
# Xóa gói tài sản
...
“symfony/assetic-bundle”: “~2.3”
...

Thế là xong, bạn đã hủy kích hoạt Giả định trên toàn cầu. Bằng cách này, không còn mong đợi tìm thấy lệnh tài sản: kết xuất et tài sản: đồng hồ.

Grunt JS sẽ hoạt động như thế nào trong dự án của chúng ta?

Chúng tôi sẽ phải định cấu hình dự án của mình với ba tệp:

package.json điều này sẽ cho phép chúng tôi cài đặt các plugin Node.js (GruntJS và những đóng góp của anh ấy);
bower.json để báo cáo về các phụ thuộc cần được giải quyết để tổng hợp các tài nguyên của chúng tôi;
Gruntfile.js mà bạn sẽ làm việc nhiều nhất. Nó sẽ chứa tất cả các hành động có thể và/hoặc được thực hiện để biên dịch một phần hoặc toàn bộ dự án của bạn.

package.json để cài đặt Grunt JS

{
"phụ thuộc": {
"tiếng càu nhàu": “^0.4.5”,
“grunt-contrib-less”: “~0.11.0”,
“grunt-contrib-uglify”: “^0.6.0”,
"tải-grunt-nhiệm vụ": “^0.6.0”
},
“phụ thuộc dev”: {
"tiếng càu nhàu": “^0.4.5”
}
}

Đầu tiên, sử dụng nội dung này. Nó yêu cầu cài đặt GruntJS và đóng góp, hai trong số đó (grunt-Contrib-less et grunt-contrib-uglify) sẽ cho phép bạn biên dịch các tệp và tệp JavaScript của mình lesscss.

bower.json để giải quyết các phụ thuộc của tôi (bootstrap, font-awesome,…)

{
"phớt lờ": [
“**/.*”,
“nút_mô-đun”,
“bower_components”,
" Bài kiểm tra ",
"thử nghiệm"
],
"phụ thuộc": {
"khởi động": “3.3.*”
}
}

Đây là một tập tin tối thiểu. Trong trường hợp của tôi, tôi đã yêu cầu phiên bản mới nhất của nhánh 3.3 của bootstrap được tải xuống. Theo mặc định, khi bạn thực hiện một cài đặt bower phụ thuộc của bạn sẽ được cài đặt trong thư mục bower_components. Thông qua việc sử dụng các .bowerrc bạn có thể thay đổi thư mục đích. Bạn có thể tìm thêm thông tin trên trang web của Bower.

1 2	# Cài đặt phụ thuộc bằng Bower cài đặt $ bower

Gruntfile.js – Nơi tất cả bắt đầu

Tất cả các lệnh và hành động bạn muốn thêm thực tế đó vào tệp Gruntfile.js. Trong số những thứ khác, bạn có thể biên dịch các tập tin lesscss et sass, nối bất kỳ loại tệp nào, biên dịch TypeScript, người thu nhỏ Các tệp JavaScript, hình ảnh cũng như các tệp HTML. Bạn cũng có thể thay đổi kích thước hình ảnh và sao chép tệp (như phông chữ).

Hôm nay mình sẽ chỉ cho các bạn cách biên dịch file .ít hơn và thu nhỏ các tập tin . Js. Các hành động mà tôi thực hiện hàng ngày và cho phép tôi hôm nay dễ dàng sử dụng phần này hoặc phần kia của bootstrap. Thay vì sử dụng tất cả bootstrap khi tất cả những gì bạn cần là glyphicons, có thể thú vị khi làm việc trên một thư viện tùy chỉnh.

mô-đun.exports= chức năng (tiếng càu nhàu) {
yêu cầu('tải-grunt-nhiệm vụ')(tiếng càu nhàu);
grunt.initConfig({
ít: {
xa: {
lựa chọn: {
nén: đúng,
yuicompress: đúng,
tối ưu hóa: 2
},
các tập tin: {
“web/css/main.css”: [
“bower_components/bootsrap/dist/css/bootstrap.css”,
“src/Namespace/MyBundle/Resources/public/css/main.less”
]
}
}
},
không phù hợp: {
lựa chọn: {
mangle: sai,
nguồnBản đồ: đúng
},
xa: {
các tập tin: {
'web/js/main.js': [
'src/Namespace/MyBundle/Resources/public/js/main.js',
]
}
}
}
});
càu nhàu.registerTask('mặc định', ["ít hơn", “làm xấu mặt”]);
};

Đây là một tập tin làm việc hoàn hảo. Tôi cũng sử dụng nó trên một dự án với ít khung bởi vì nó là một API. Giả định trong trường hợp của tôi khá vô dụng. Vì vậy, tôi muốn làm mà không có nó để sử dụng một công cụ bên ngoài máy chủ và cung cấp các tài nguyên được xây dựng hoàn hảo tại thời điểm triển khai.

Hãy mô tả các hành động cho Gruntfile.js

Trong tệp trước, tôi định cấu hình hai đóng góp của GruntJS (_không _và không phù hợp) mà tôi đã cài đặt nhờ package.json. Bạn sẽ nhận thấy rằng các plugin rất dễ phân biệt với nhau. Lấy trường hợp của phần mở rộng ít.

Mỗi đóng góp Tiếng càu nhàu mà bạn sẽ sử dụng phải được khai báo thông qua một từ khóa được xác định cho phần đóng góp. Ví dụ như grunt-Contrib-less từ khóa là ít. Trong phần này, chúng ta có thể định nghĩa mục tiêu. theo thuật ngữ mục tiêu hiểu phần phụ. Trong một trường hợp cụ thể, chúng ta có thể định nghĩa một mục tiêu bootstrap để biên dịch thư viện cùng tên từ nguồn ít. Chúng ta có thể định nghĩa một tập hợp khác xa để biên dịch các nguồn của dự án của chúng tôi. Việc sử dụng một số tập hợp con là không cần thiết nhưng bạn sẽ có cơ hội sử dụng chúng sau này khi bạn sử dụng đồng hồ đóng góp Để tiết kiệm thời gian.

Sau đó, cấu trúc của các tập hợp con của cùng một phần mở rộng là ISO. Tại Contrario, cấu trúc của mỗi khoản đóng góp khác nhau. Đóng góp tiêu chuẩn thường được trình bày với nhiều ví dụ. Các plugin chính thức có sẵn trên kho GitHub.

Hãy quay lại ví dụ của chúng tôi và cấu hình biên dịch các tệp của chúng tôi .ít hơn. Trong tro choi các tập tin chúng tôi thêm tên của các tệp cuối cùng làm khóa và làm giá trị, một mảng các tệp đầu vào để biên dịch. Tôi nghĩ không cần thiết phải chi tiết hơn vì cú pháp khá trực quan.

sự đóng góp không phù hợp được sử dụng để nối, thu nhỏ và nén các tệp JavaScript, sử dụng cùng một cấu trúc. Trong trường hợp này, khá đơn giản để sử dụng hai đóng góp của nó.

Nghệ thuật biên soạn

Và bây giờilons nguồn của chúng tôi. Với Giả định, chúng tôi chạy lệnh này:

1	ứng dụng php/bảng điều khiển tài sản: kết xuất

Bây giờ chúng tôi đã loại bỏ Gói tài sản. Chúng tôi không còn đơn hàng này nữa. Vì vậy, chúng tôi sẽ chạy plugin của chúng tôi từ Node.

1	tiếng càu nhàu

Bạn thấy nó vẫn không phức tạp lắm... Trong trường hợp này, các tác vụ sẽ được thực thi sẽ là tác vụ được cung cấp cho hồ sơ mặc định. Nó đã được xác định trong dòng cuối cùng.

1	càu nhàu.registerTask('mặc định', ["ít hơn", “làm xấu mặt”]);

Bạn đã xác định rất rõ một hồ sơ javascript ai sẽ không thực hiện không phù hợp.

1	càu nhàu.registerTask('javascript', ['làm xấu đi']);

Trong trường hợp bạn có thể đã chạy lệnh Tiếng càu nhàu với tên hồ sơ sau.

1	javascript càu nhàu

Bạn có thể xác định bao nhiêu cấu hình tùy thích. Trong trường hợp hồ sơ của tôi javascript, tiền lãi sẽ ít hơn vì bạn cũng có thể thực hiện cuộc gọi sau.

1	càu nhàu làm xấu đi

Kết luận

Bây giờ bạn đã biết cách biên dịch tài nguyên của mình. Nếu bạn chưa nắm được tất cả những điều tinh tế, bạn sẽ nhanh chóng có thể đánh giá cao tất cả sự linh hoạt được cung cấp bởi Tiếng càu nhàu đối vớiGiả định. Hơn nữa, ngoài các tài nguyên điển hình như javascript và css, bạn còn có thể xử lý phông chữ, hình ảnh... Một tài sản đã nhanh chóng chinh phục tôi.

Lợi thế thực sự của Tiếng càu nhàu là tính linh hoạt của nó sử dụng nó. Tiếng càu nhàu et Cung cấp giữa chúng là hiện thân của một giải pháp thay thế cho Assetic. Không có Cung cấp bạn vẫn có thể làm việc với Tiếng càu nhàu nhưng kinh nghiệm sẽ không được toàn bộ.

Tôi hy vọng bài viết này sẽ cho phép bạn dễ dàng hiểu được việc sử dụng Tiếng càu nhàu. Hãy dũng cảm, bạn gần như ở đó!