Các tham số của Gulp

Sử dụng để dịch SASS

Để dịch SASS ta sử dụng thêm 1 package nữa là gulp-sass và cài đặt như sau:

npm i --save-dev gulp-sass

var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
    return gulp.src('app/css/style.scss').pipe(sass()).pipe(gulp.dest('app/css'));
});

Sau đó chạy lệnh gulp sass để biên dịch từ file scss sang file css.

Ở đây có 1 điều chúng ta cần quan tâm nữa đó là gulp.src(), trong đó sẽ lọc các file làm đầu vào với các quy tắc lọc như sau:

• css/app.css tìm chính xác file

• sass/.scss* tìm kiếm tất các file kết thúc bằng .scss và nằm trong thư mục sass

• sass//.scss* tìm kiếm tất cả các file kết thúc bằng .scss ở trong thư mục sass/ và tất cả thư mục con của nó

• !sass/app.scss tìm kiếm tất cả các file trong thư mục ngoại trừ file app.scss

• *.+(scss|css) tìm kiếm tất cả các file trong thư mục root có đuôi là .scss và .css

minify các file Javascript

Yêu cầu viết task minify với mục đích minify các file Javascript. Chúng ta cần cài đặt gulp-uglify plugin:

npm install --save-dev gulp-uglify

var gulp = require('gulp');
var uglify = require('gulp-uglify');
gulp.task('minify', function () {
    return gulp.src('app/js/index.js').pipe(uglify()).pipe(gulp.dest('app/js'));
});

Sau đó chúng ta dùng lệnh: gulp minify

Bạn có để ý đến function gulp.src()?, ở đây sẽ định nghĩa điều kiện lọc các files cho một task, chúng ta có thể xem các quy tắc dưới đây:

• js/app.js tìm chính xác file.

• js/*.js tìm kiếm tất các file kết thúc bằng `.js và nằm trong thư mục js.

• js/**/*.js tìm kiếm tất cả các file kết thúc bằng .js ở trong thư mục js/ và tất cả thư mục con của nó.

• !js/app.js tìm kiếm tất cả các file trong thư mục ngoại trừ file app.js

• *.+(js|css) tìm kiếm tất cả các file trong thư mục root có đuôi là .js và .css.

Watching files

Một trong những đặc tính nổi bât là Gulp có khả năng theo dõi kiểm soát sự thay đổi của các file trong dự án, và có thể chạy các task được quy định khi có sự thay đổi ở các file này, đồng thơi tự động reload lại trình duyệt mà không cần làm bất kỳ thao tác gì.

gulp.task('watch', function () {
    gulp.watch('js/*.js', ['minify']);
});

Như ví dụ bên trên, khi có sự thay đổi ở các file javascript trong thư mục js, Gulp sẽ tự động chạy task minify.

Để Gulp có thể tự động reload lại trình duyệt khi có sự thay đổi chúng ta cần cài đặt module BrowserSync

npm install browser-sync --save-dev

Để sử dụng BowerSync thực hiện khai báo trong gulpfile.js

var gulp = require('gulp'),
    browserSync = require('browser-sync');
gulp.task('browser-sync', function () {
    var files = [
        '*.html',
        'js/*.js'
    ];
    browserSync.init(files, {
        server: {
            baseDir: '.'
        }
    });
});

Chạy gulp browser-sync

Chạy gulp browser-sync để khởi tạo một server mới trong thư mục hiện hành và kiểm soát tất cả sự thay đổi của file html và js trong thư mục js.

Sau khi khởi động server cần sử dụng watch để theo dõi sự thay đổi và thực hiện reload lại trình duyệt:

gulp.watch(['*.html'], reload);
gulp.watch(['js/*.js'], reload);