---
description: https://www.tutorialspoint.com/gulp/gulp_optimizing_css_javascript_files.htm
---

# \[GULP] Gulp - Optimizing CSS and JavaScript

> Chú ý: Để kết hợp được các task với nhau từ phiên bản 4.x trở đi chúng ta phải
>
> gulp.task('default', gulp.series('css','js'));
>
> Chú ý: Nếu thì sử dụng &#x20;
>
> ```
> gulp.task('default', gulp.series('a', 'b', 'c'));
> ```
>
> Thì sử dụng
>
> ```
> gulp.task('default', gulp.parallel('a', 'b', 'c'));
> ```

C:\xampp\htdocs\gulp\gulpfile.js

```
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var minify = require('gulp-minify-css');
gulp.task('default', function() {
});
gulp.task('js', function(){
   gulp.src('src/scripts/*.js')
   .pipe(concat('script.js'))
   .pipe(uglify())
   .pipe(gulp.dest('build/scripts/'));
});
gulp.task('css', function(){
   gulp.src('src/styles/*.css')
   .pipe(concat('styles.css'))
   .pipe(minify())
   .pipe(gulp.dest('build/styles/'));
});
gulp.task('default', gulp.series('css','js'));
```

C:\xampp\htdocs\gulp\package.json

```
{
  "name": "gulp",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "gulp": "gulp default"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "gulp": "^4.0.2",
    "gulp-livereload": "^4.0.2"
  },
  "devDependencies": {
    "browser-sync": "^2.27.5",
    "gulp-concat": "^2.6.1",
    "gulp-minify-css": "^1.2.4",
    "gulp-sass": "^5.0.0",
    "gulp-uglify": "^3.0.2",
    "node-sass": "^6.0.1",
    "sass": "^1.38.0"
  }
}

```

### Install Plugins to Optimize CSS and JavaScript

```
npm install gulp-uglify gulp-minify-css gulp-concat
```

### Declare Dependencies and Create Tasks

```
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var minify = require('gulp-minify-css');
```

Next, you need to create tasks for optimizing CSS and JavaScript as shown in the following code

```
gulp.task('js', function(){
   gulp.src('src/scripts/*.js')
   .pipe(concat('script.js'))
   .pipe(uglify())
   .pipe(gulp.dest('build/scripts/'));
});

gulp.task('css', function(){
   gulp.src('src/styles/*.css')
   .pipe(concat('styles.css'))
   .pipe(minify())
   .pipe(gulp.dest('build/styles/'));
});

gulp.task('default',['js','css'],function(){
});
```
