[GULP] Gulp - Optimizing CSS and JavaScript

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

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

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(){
});