18: Công cụ xây dựng - Grunt svgstore - Thủ thuật CSS

Chúng tôi chắc chắn có thể trở nên nhạy bén hơn một chút với các công cụ xây dựng của mình. Tại thời điểm đăng bài này, con áp phích của các công cụ xây dựng là Grunt. Có những đối thủ cạnh tranh, nhưng Grunt đã được yêu thích nhất trong một thời gian. Nếu bạn là thương hiệu mới đối với Grunt, tôi có rất nhiều thứ mà tôi đã viết và trình chiếu về nó:

Grunt cho những người nghĩ những điều giống như Grunt là kỳ lạ và khó khăn
# 130: Khoảnh khắc đầu tiên với Grunt
# 134: Tham quan một trang web đang được xây dựng với Jekyll, Grunt, Sass, một Hệ thống SVG, v.v.

Ngay cả khi bạn chưa bao giờ sử dụng Grunt, trong chương trình truyền hình này, chúng tôi bắt đầu từ đầu và hoàn thành công việc. Ý tưởng là chúng tôi đang làm việc từ “thư mục chứa đầy SVG” tinh túy. Mỗi tệp.svg đại diện cho một số hình ảnh mà chúng tôi muốn sử dụng trên trang web. Chúng tôi muốn tổng hợp tất cả những thứ đó thành một khối SVG defs đã sẵn sàng để sử dụng. Các ký hiệu được tạo, thông tin trợ năng được thêm vào khả năng tự động tốt nhất của chúng tôi, v.v.

Khi chúng tôi bắt đầu Grunt và cài đặt công cụ xây dựng mà chúng tôi đang tập trung ở đây, grunt-svgstore, chúng tôi sẵn sàng tiếp tục.

Trong bản demo nhỏ của chúng tôi, chúng tôi đã định cấu hình Grunt, thông qua Gruntfile.js, để xem thư mục chứa đầy SVG của chúng tôi và tạo tệp defs.svg mà chúng tôi đặt trong thư mục bao gồm.

module.exports = function(grunt) ( grunt.initConfig(( svgstore: ( options: ( formatting : ( indent_size : 2 ) ), default: ( files: ( 'includes/defs.svg': ('svg/*.svg'), ), ), ), )); grunt.loadNpmTasks('grunt-svgstore'); );

Việc nâng cấp từ đây sẽ bao gồm việc sử dụng plugin “watch” để xem thư mục SVG đó và tự động chạy tác vụ này khi bất kỳ tệp nào thay đổi (hoặc được thêm hoặc xóa). Nếu bạn đang sử dụng trình tạo trang web như Jekyll, bạn thậm chí có thể kích hoạt jekyll buildsau đó để đảm bảo tệp mới có sẵn trong trang web đã xây dựng.