> For the complete documentation index, see [llms.txt](https://learncss.gitbook.io/cssadvand/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learncss.gitbook.io/cssadvand/cac-tham-so-cua-gulp.md).

# 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);
```