Tôi biết về Sass và Gulp và lợi ích của chúng, nhưng tôi không biết làm thế nào để thực sự sử dụng chúng

Rõ ràng, tôi biết họ yêu cầu git, nhưng đó là nơi kiến ​​thức của tôi kết thúc.

Giả sử tôi có tệp .scss tôi đã chỉnh sửa và tôi muốn biên dịch nó và đặt nó trên máy chủ từ xa của tôi để xem nó trông như thế nào. Gì bây giờ?

Có rất ít thông tin về cách thực sự làm điều này. Tương tự với Gulp.

Tôi cảm thấy tôi đang thiếu một số người trung gian ở đây.

ai đó có thể chỉ cho tôi phương hướng đúng không?

1. Cài đặt Node.js
2. Cài đặt Gulp trên toàn cầu vớinpm install gulp-cli --global
3. Tạo một thư mục mới cho các tác vụ Gulp và tệp Sass của bạn
4. Trong thư mục đó khởi tạo npm vớinpm init
5. Cài đặt Gulp và Sass với npm install gulp gulp-sass --save-dev
6. Tạo một gulpfile.jsnội dung sau:

var gulp = Yêu cầu ('gulp')

var sass = Yêu cầu ('gulp-sass')

gulp.task ('scss', hàm () {
  gulp.src ('scss / main.scss')
  .pipe (sass ())
  .pipe (gulp.dest ('./ xây dựng / css'))
})

gulp.task ('mặc định', ['scss'])

gulp.task ('xem', hàm () {
  gulp.watch ('scss / ** / *. scss', ['scss'])
})

7. Tạo một thư mục được gọi scssvới một tệp được gọi làmain.scss
8. Bây giờ bạn có thể xây dựng nó gulpvà xem nó vớigulp watch

Tôi khuyên bạn cũng nên sử dụng PostCSS với cssnext để tự động phát lại và gulp-clean-css để thu nhỏ CSS của bạn. Để sử dụng, bạn phải làm những điều sau đây:

1. Cài đặt chúng với npm install gulp-postcss postcss-cssnext gulp-clean-css --save-dev
2. Thay đổi của bạn gulpfile.jsthành như sau:

var gulp = Yêu cầu ('gulp')

var cssnext = Yêu cầu ('postcss-cssnext')
var Cleancss = Yêu cầu ('gulp-clean-css')
var postcss = Yêu cầu ('gulp-postcss')
var sass = Yêu cầu ('gulp-sass')

gulp.task ('scss', hàm () {
  gulp.src ('scss / main.scss')
  .pipe (sass ())
  .pipe (postcss ([cssnext ()]))
  .pipe (Cleancss ())
  .pipe (gulp.dest ('./ xây dựng / css'))
})

gulp.task ('mặc định', ['scss'])

gulp.task ('xem', hàm () {
  gulp.watch ('scss / ** / *. scss', ['scss'])
})

Tôi cũng khuyên bạn nên đọc nó để tìm hiểu về Sass bascis.

Có một số trang web có video về cách sử dụng các thành phần phát triển web khác nhau. Dưới đây là danh sách các địa điểm được xếp theo thứ tự chữ cái, nơi người ta có thể xem một loạt video về các chủ đề lập trình khác nhau:

1. https://www.codeschool.com
2. https://www.lynda.com
3. https://www.khanacademy.org
4. https://www.youtube.com (Chỉ cần tìm kiếm Git hoặc Gulp, Phát triển web, v.v ...)

Đối với Git , bạn sẽ muốn lấy một trong những phần mềm này khi chúng có GUI trực quan:

1. GitHub
2. SmartGit
3. Nguồn gốc Atlassian

CLI (Giao diện dòng lệnh) dành cho người dùng nhiều năng lượng hơn. Ít nhất bạn có thể bắt đầu tìm hiểu cách Git hoạt động, bằng cách xem cách phân nhánh & hợp nhất hoạt động. Đây là trang chính thức về cách hoạt động của Git Branching . Các hình minh họa sẽ giúp hiểu ý nghĩa của các nhãn / thẻ nhánh mà phần mềm sử dụng. Đây không phải là một quá trình dễ dàng để tìm hiểu về Git ... nhưng với một số công việc và sự kiên nhẫn, bạn có thể chọn nó như một kỹ năng cho bộ kỹ năng của mình.

Saas là một hệ thống xây dựng linh hoạt cho các tệp CSS. Nó cho phép bạn thêm một chút logic vào các tệp CSS của mình dưới dạng mẫu và giúp dễ dàng thay đổi các giá trị nhất định khi xây dựng. Một ví dụ là bạn muốn thay đổi màu phông chữ cho một số lượng lớn các phần tử, phương pháp trước đó là đi qua tệp CSS và thay đổi từng quy tắc CSS một cách riêng biệt và có thể mất nhiều thời gian, phương thức mới với Saas nếu bạn sử dụng nó chỉ định giá trị trong tệp .scss làm biến và để xác định giá trị đó ở đầu tài liệu hoặc thông qua cấu hình, sau đó khi bạn xây dựng tệp .scss thành tệp .css, các biến được thay thế bằng giá trị mà chúng đại diện. ( http://sass-lang.com/ )

Gulp chỉ là một hệ thống tự động hóa xây dựng. Gulp có thể được sử dụng từ một số ngôn ngữ của IDE và một loạt các ngôn ngữ và được bán trên thị trường dưới dạng bộ công cụ để giúp tự động hóa các tác vụ tốn thời gian trong quy trình phát triển. ( http://gulpjs.com/ )