Gulp cho người mới bắt đầu

Gulp cho người bắt đầu Gulp gì? Gulp cơng cụ giúp bạn tự động hóa nhiều task (nhiệm vụ) q trình phát triển web Nó thường sử dụng để làm tác vụ front end như:  Tạo web server  Reload trình duyệt cách tự động file lưu  Sử dụng preprocessor giống Sass LESS  Tối ưu hóa tài ngun CSS, JavaScript hình ảnh Đây khơng phải danh sách toàn diện thứ mà Gulp làm Nếu muốn, bạn tạo generator web site tĩnh Gulp mạnh mẽ, bạn cần học cách sử dụng Gulp muốn tạo trình (process) riêng Bài viết giúp bạn có kiến thức Gulp sau bạn tự khám phá thứ Trước sâu vào Gulp, nói lý bạn sử dụng Gulp mà công cụ khác Tại lại Gulp? Những công cụ Gulp thường đề cập "build tools" chúng cơng cụ thực task q trình xây dựng website Hai build tools phổ biến Gulp Grunt Tất nhiên, có cơng cụ khác chẳng hạn Broccoli, Brunch Có nhiều viết đề cập tới khác Grunt Gulp lý bạn lại sử dụng công cụ mà cơng cụ khác Nhưng điểm khác biệt cách bạn cấu hình workflow với chúng Gulp cấu hình ngắn đơn giản so sánh với Grunt Gulp chạy nhanh Cái làm Khi kết thúc viết này, bạn có workflow thực task sau:  Tạo web server  Biên dịch Sass thành CSS  Refesh trình duyệt tự động bạn lưu file  Tối ưu hóa tài nguyên (CSS, JS, fonts, hình ảnh) cho phiên production Bạn học cách nối chuỗi task khác vào lệnh đơn giản Hãy bắt đầu cách cài đặt Gulp máy tính bạn Cài đặt Gulp Bạn cần cài đặt Node.js trước cài đặt Gulp Sau cài đặt Node, bạn cài đặt Gulp cách sử dụng lệnh sau: $ sudo npm install gulp -g Chú ý: người sử dụng Mac cần sử dụng từ khóa sudo npm install lệnh sử dụng Node Package Manager (npm) để cài đặt Gulp máy tính bạn Cờ -g lệnh nói với npm cài Gulp với phạm vi toàn cục máy tính bạn, cho phép sử dụng lệnh gulp đâu hệ thống bạn Bây Gulp cài đặt, tạo dự án sử dụng Gulp Tạo Gulp project Đầu tiên, tạo thư mục project Đây thư mục gốc dự án Di chuyển vào thư mục project chạy lệnh npm init: # from within our project folder $ npm init Lệnh npm init tạo file package.json lưu trữ thông tin project, dependencies sử dụng dự án (Gulp dependency) npm init yêu cầu bạn xác nhận: Khi file package.json tạo, cài đặt Gulp vào dự án cách sử dụng lệnh: $ npm install gulp save-dev Lệnh cài đặt Gulp vào project bạn thay cài đặt tồn cục Cờ save-dev thêm gulp dev dependency package.json Nếu kiểm tra thư mục project lệnh thực thi xong, bạn thấy có thêm thư mục node_modules Bạn nhìn thấy thư mục gulptrong node_modules Chúng ta gần sẵn sàng để bắt đầu làm việc với Gulp Nhưng trước làm điều đó, cần xác định cách sử dụng Gulp cho project, phần chọn cấu trúc thư mục Chọn cấu trúc thư mục Gulp đủ linh hoạt để làm việc với cấu trúc thư mục Trong viết này, sử dụng cấu trúc thường thấy: |- app/ |- css/ |- fonts/ |- images/ |- index.html |- js/ |- scss/ |- dist/ |- gulpfile.js |- node_modules/ |- package.json Trong cấu trúc này, sử dụng thư mục app cho mục đích phát triển, thư mục dist (distribution) sử dụng để chứa file tối ưu cho web site production Bây giờ, bắt đầu cách tạo Gulp task bạn gulpfile.js, lưu trữ tất cấu hình Gulp Viết Gulp task Bước để sử dụng Gulp require gulpfile var gulp = require('gulp'); Câu lệnh require nói với Node tìm kiếm thư mục node_modules package có tên gulp Khi package tìm thấy, gán nội dung tới biến gulp Bây viết gulp task Cú pháp sau: gulp.task('task-name', function() { // Stuff here }); task-name tên task, sử dụng bạn muốn chạy task Gulp Bạn chạy task command line lệnh gulp taskname Để kiểm tra, tạo task hello, in "Hello Zell" gulp.task('hello', function() { console.log('Hello Zell'); }); Chúng ta chạy task với lệnh gulp hello $ gulp hello Lệnh in "Hello Zell" Thực tế, Gulp task phức tạp chút Nó thường chứa phương thức Gulp, cộng với nhiều plugin Gulp Một task thực giống này: gulp.task('task-name', function () { return gulp.src('source-files') // Get source files with gulp.src pipe(aGulpPlugin()) // Sends it through a gulp plugin pipe(gulp.dest('destination')) // Outputs the file in the destination folder }) gulp.src nói với Gulp task file sử dụng, gulp.dest nói với Gulp nơi chứa file kết task hoàn tất Hãy thử xây dựng task thực sự, biên dịch file Sass thành CSS Preprocessing với Gulp Chúng ta biên dịch Sass thành CSS Gulp với plugin gulp-sass Bạn cài đặt với lệnh npm install làm với gulp Chúng ta thêm cờ save-dev để đảm bảo gulp-sass thêm vào devDependencies package.json $ npm install gulp-sass save-dev Chúng ta cần require gulp-sass làm với gulp trước sử dụng: var gulp = require('gulp'); // Requires the gulp-sass plugin var sass = require('gulp-sass'); Chúng ta sử dụng gulp-sass cách thay aGulpPlugin() với sass() Chúng ta đặt tên task biên dịch Sass thành CSS sass gulp.task('sass', function(){ return gulp.src('source-files') pipe(sass()) // Using gulp-sass pipe(gulp.dest('destination')) }); Chúng cần cung cấp cho task sass file nguồn thư mục đích để chứa file CSS, tạo file styles.scss thư mục app/scss Đây file thay cho source-files phương thức gulp.src Chúng ta muốn lưu file kết styles.css tới thư mục app/css, thay destination phương thức gulp.dest với app/css gulp.task('sass', function(){ return gulp.src('app/scss/styles.scss') pipe(sass()) // Converts Sass to CSS with gulp-sass pipe(gulp.dest('app/css')) }); Bạn kiểm tra task sass làm việc xác chưa cách thêm hàm Sass file styles.scss // styles.scss testing { width: percentage(5/7); } Nếu chạy gulp sass command line, bạn thấy file styles.css thư mục app/css Ngồi ra, có nội dung sau: /* styles.css */ testing { width: 71.42857%; } Đó cách kiểm tra task sass làm việc hay chưa Thỉnh thoảng cần biên dịch nhiều file scss thành CSS Chúng ta làm điều với Node globs Globbing Node Globs giống regular expressions, dành riêng cho đường dẫn file Hầu hết workflow với Gulp thường yêu cầu globbing pattern sau: *.scss: * ký tự đại diện có nghĩa phù hợp với pattern thư mục Trong trường hợp này, tất file kết thúc với scss thư mục gốc (project) **/*.scss: Tất file kết thúc với scss thư mục root thư mục !not-me.scss: ! báo hiệu Gulp bỏ qua pattern phù hợp Trong trường hợp file not-me.scss bỏ qua *.+(scss|sass): Dấu + () cho phép Gulp kết hợp nhiều pattern, pattern khác ngăn cách ký tự | Trong trường hợp file kết thúc với scss sass thư mục gốc Khi biết globbing, thay app/scss/styles.scss với pattern scss/**/*.scss, lấy file có phần mở rộng scss thư mục app/scss thư mục gulp.task('sass', function() { return gulp.src('app/scss/**/*.scss') // Gets all files ending with scss in app/scss and children dirs pipe(sass()) pipe(gulp.dest('app/css')) }) Mọi file Sass tìm thấy app/scss tự động thêm vào task sass Nếu bạn thêm file print.scss tới project, bạn thấy print.css app/css Hiện chúng quản lý việc biên dịch file Sass thành CSS với lệnh Câu hỏi là, phải chạy lệnh gulp sass thay đổi file sass để biên dịch Sass thành CSS? May mắn, nói với Gulp tự động chạy task sass file lưu thông qua process gọi "watching" Theo dõi thay đổi file Sass Gulp cung cấp cho phương thức watch, theo dõi file lưu Cú pháp watch là: // Gulp watch syntax gulp.watch('files-to-watch', ['tasks', 'to', 'run']); Nếu muốn theo dõi tất file Sass chạy task sass file Sass lưu, cần thay files-towatch với app/scss/**/*.scss, ['tasks', 'to', 'run'] với ['sass']: // Gulp watch syntax gulp.watch('app/scss/**/*.scss', ['sass']); Trong thực tế, muốn theo dõi nhiều kiểu file lúc Để làm điều này, gộp nhiều tiến trình theo dõi vào task watch: Chúng ta cần tạo task browserSync phép Gulp khởi tạo server sử dụng Browser Sync Khi chạy server, cần cho Browser Sync biết thư mục gốc server Trong trường hợp này, thư mục "app": gulp.task('browserSync', function() { browserSync.init({ server: { baseDir: 'app' }, }) }) Chúng ta thay đổi task sass chút Browser Sync tiêm style CSS (cập nhật CSS) vào trình duyệt, task sass chạy gulp.task('sass', function() { return gulp.src('app/scss/**/*.scss') // Gets all files ending with scss in app/scss pipe(sass()) pipe(gulp.dest('app/css')) pipe(browserSync.reload({ stream: true })) }); Chúng ta cấu hình Browser Sync Bây chạy task watch browserSync lúc để live-reloading Khá phiền phức mở sổ command line chạy gulp browserSync gulp watch, để Gulp chạy chúng đồng thời cách nói cho task watch browserSync phải hồn thành trước watch cho phép chạy Chúng ta làm điều cách thêm tham số thứ tới watch task Đây cú pháp: gulp.task('watch', ['array', 'of', 'tasks', 'to', 'complete','before', 'watch'], function (){ // }) Và trường hợp thêm browserSync task gulp.task('watch', ['browserSync'], function (){ gulp.watch('app/scss/**/*.scss', ['sass']); // Other watchers }) Chúng ta muốn đảm bảo sass chạy trước watch CSS ln chạy lệnh Gulp gulp.task('watch', ['browserSync', 'sass'], function (){ gulp.watch('app/scss/**/*.scss', ['sass']); // Other watchers }); Bây bạn chạy gulp watch command line, Gulp bắt đầu sass browserSync task đồng thời Khi task hoàn thành, watch chạy Tại thời điểm, cửa sổ trình duyệt trỏ đến app/index.html bật lên Nếu bạn thay đổi file styles.scss, bạn thấy trình duyệt tự động reload Cuối cùng, làm bạn muốn trình duyệt tự động reload file HTML JavaScript lưu? Chúng ta làm cách thêm nhiều tiến trình theo dõi, gọi hàm browserSync.reload file lưu: gulp.task('watch', ['browserSync', 'sass'], function (){ gulp.watch('app/scss/**/*.scss', ['sass']); // Reloads the browser whenever HTML or JS files change gulp.watch('app/*.html', browserSync.reload); gulp.watch('app/js/**/*.js', browserSync.reload); }); Đến làm thứ: Khởi tạo web server Sử dụng Sass preprocessor Reloading trình duyệt tự động file lưu Phần đề cập tới việc tối ưu tài nguyên Chúng ta bắt đầu với việc tối ưu hóa file CSS JavaScript Tối ưu hóa file CSS JavaScript Các lập trình viên có task cần thực cố gắng tối ưu hóa file CSS JavaScript cho phiên production: nối file minification Một vấn đề lập trình viên phải đối mặt khó nối file js theo thứ tự xác Ví dụ có thẻ script file index.html Các script nằm thư mục khác Rất khó để nối chúng với plugin kiểu gulp-concatenate Thật may mắn, sử dụng gulp-useref để giải vấn đề Gulp-useref nối tất file CSS JavaScript thành file cách tìm kiếm comment bắt đầu với "" Giống này: > HTML Markup, list of script / link tags js, css remove Thường type kiểu file muốn nối Nếu bạn thiết lập type remove Gulp xóa tồn block mà không phát sinh file đường dẫn tới file nối Ở đây, muốn file JavaScript nối nằm thư mục js có tên main.min.js Cú pháp sau: Bây cấu hình gulp-useref plugin gulpfile Chúng cần cài đặt require trước $ npm install gulp-useref save-dev var useref = require('gulp-useref'); Thiết lập task useref tương tự task làm: gulp.task('useref', function(){ return gulp.src('app/*.html') pipe(useref()) pipe(gulp.dest('dist')) }); Bây bạn chạy task useref, Gulp đọc file thẻ script nối chúng thành thành file main.min.js thư mục dist/js Tuy nhiên file kết chưa minify Chúng ta sử dụng gulpuglify plugin để minifying file JavaScript Chúng ta cần plugin thứ gọi gulp-if để đảm bảo minify file JavaScript $ npm install gulp-uglify save-dev // Other requires var uglify = require('gulp-uglify'); var gulpIf = require('gulp-if'); gulp.task('useref', function(){ return gulp.src('app/*.html') pipe(useref()) // Minifies only if it's a JavaScript file pipe(gulpIf('*.js', uglify())) pipe(gulp.dest('dist')) }); Gulp tự động minify "main.min.js" bạn chạy useref task Gulp-useref tự động thay tất thẻ script " thành thẻ trỏ tới "js/main.min.js" Chúng ta sử dụng phương thức tương tự để nối file CSS (nếu bạn có nhiều file) Chúng ta làm theo tiến trình tương tự nối file js thêm build comment Để minify file CSS nối Chúng ta cần sử dụng package gulp-cssnano $ npm install gulp-cssnano var cssnano = require('gulp-cssnano'); gulp.task('useref', function(){ return gulp.src('app/*.html') pipe(useref()) pipe(gulpIf('*.js', uglify())) // Minifies only if it's a CSS file pipe(gulpIf('*.css', cssnano())) .pipe(gulp.dest('dist')) }); Bây tối ưu hóa file CSS JavaScript bạn chạy useref task Tiếp theo tối ưu hình ảnh Tối ưu hóa ảnh Chúng ta cần sử dụng gulp-imagemin để tối ưu hóa hình ảnh $ npm install gulp-imagemin save-dev var imagemin = require('gulp-imagemin'); Chúng ta tối ưu hóa ảnh png, jpg, gif chí svg với gulpimagemin Hãy tạo images task gulp.task('images', function(){ return gulp.src('app/images/**/*.+(png|jpg|gif|svg)') pipe(imagemin()) pipe(gulp.dest('dist/images')) }); Các kiểu file khác tối ưu hóa theo nhiều cách, bạn thêm tùy chọn imagemin để tối ưu loại file Ví dụ, bạn tạo interlaced GIFs cách thiết lập tùy chọn interlaced true gulp.task('images', function(){ return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)') pipe(imagemin({ // Setting interlaced to true interlaced: true })) pipe(gulp.dest('dist/images')) }); Bạn thử nghiệm tùy chọn khác muốn Tuy nhiên tối ưu hóa hình ảnh, tiến trình chậm bạn không muốn lặp lại trừ cần thiết Để làm điều sử dụng gulp-cache plugin $ npm install gulp-cache save-dev var cache = require('gulp-cache'); gulp.task('images', function(){ return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)') // Caching images that ran through imagemin pipe(cache(imagemin({ interlaced: true }))) pipe(gulp.dest('dist/images')) }); Chúng ta gần hồn thành q trình tối ưu hóa Chỉ cịn thư mục cần chuyển từ thư mục "app" tới thư mục "dist", thư mục fonts Hãy làm điều ... site production Bây giờ, bắt đầu cách tạo Gulp task bạn gulpfile.js, lưu trữ tất cấu hình Gulp Viết Gulp task Bước để sử dụng Gulp require gulpfile var gulp = require( ''gulp'' ); Câu lệnh require... Cờ -g lệnh nói với npm cài Gulp với phạm vi tồn cục máy tính bạn, cho phép sử dụng lệnh gulp đâu hệ thống bạn Bây Gulp cài đặt, tạo dự án sử dụng Gulp Tạo Gulp project Đầu tiên, tạo thư mục project... with gulp. src pipe(aGulpPlugin()) // Sends it through a gulp plugin pipe (gulp. dest(''destination'')) // Outputs the file in the destination folder }) gulp. src nói với Gulp task file sử dụng, gulp. dest