新手教学 gulp 合并压缩js、css文件

打包压缩js、css文件

先上代码，如下所示

// 获取 gulp
var gulp = require('gulp');

// 获取 uglify 模块（用于压缩 JS）
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
// 获取 cleancss 模块（用于压缩 CSS）
var cleanCSS = require('gulp-clean-css');

//重命名
var rename = require('gulp-rename');


// 压缩 css 文件
// 在命令行使用 gulp csscompress 启动此任务
gulp.task('csscompress', function () {
     //     // 1. 找到文件
  return gulp.src('./css/*.css')
    .pipe(concat('main.css'))
    //     // 2. 压缩文件
    .pipe(cleanCSS())
    .pipe(rename("css.css"))    
    //     // 3. 另存压缩后的文件
    .pipe(gulp.dest('./dist/css'));
});



//压缩js
gulp.task('jscompress', function () {
  return gulp.src('./js/*.js')
     //1. 合并文件
    .pipe(concat('main.js'))
    // 2. 压缩文件
    .pipe(uglify())
    .pipe(rename({suffix:'.min'}))  
    // 3. 另存压缩后的文件
    .pipe(gulp.dest('./dist/js'));
});


//gulp4
gulp.task('hello', gulp.series('jscompress', 'csscompress'));

如何运行

1. 安装gulp

   命令如下：npm install gulp -g 全局安装gulp

2. 安装css，js合并压缩插件

  命令如下：npm install gulp-uglify gulp-concat gulp-clean-css

3. 安装文件重命名插件

 命令如下：npm install gulp-rename 

4. 执行

   命令如下：gulp hello