Gulp4.0入门第一课：合并压缩css/js

• 全局安装gulp（为了使用gulp命令）：

  $ npm install -g gulp

关于npm install命令请参考npm install/i -g/-S/-D命令总结
关于node和npm的使用请参考编写和发布一个npm模块

• 项目目录下安装gulp：

  $ npm install -D gulp

• 安装del和相应的gulp插件：

  $ npm install -D gulp-clean-css gulp-uglify gulp-rename gulp-concat gulp-clean gulp-notify del

安装完成之后，项目目录下package.json的devDependencies中会多出类似如下的dev依赖项：

"del": "^5.1.0",
"gulp": "^4.0.2",
"gulp-clean": "^0.4.0",
"gulp-clean-css": "^4.2.0",
"gulp-concat": "^2.6.1",
"gulp-notify": "^3.2.0",
"gulp-rename": "^1.4.0",
"gulp-uglify": "^3.0.2"

• 项目目录下新建gulpfile.js:

//gulpfile.js 引入 gulp及组件
var gulp = require('gulp'),  //gulp基础库
  cleanCSS = require('gulp-clean-css'),   //css压缩
  concat = require('gulp-concat'),   //合并文件
  uglify = require('gulp-uglify'),   //js压缩
  rename = require('gulp-rename'),   //文件重命名
  notify = require('gulp-notify'),   //提示
  del = require('del');

function clean(cb) {
  const deletedPaths = del.sync(['dist/*']);
  console.log('Deleted files and directories:\n', deletedPaths.join('\n'));
  cb();
}

//css处理
function minifycss() {
  gulp.src('test/*.css')      //设置css
    .pipe(concat('test.css'))      //合并css文件到test.css
    .pipe(rename({ suffix: '.min' }))         //修改文件名
    .pipe(cleanCSS())                    //压缩文件
    .pipe(gulp.dest('dist/css'))            //输出文件目录
    .pipe(notify({ message: 'minifycss ok' }));   //提示成功
};

//JS处理
function minifyjs() {
  gulp.src(['test/test1.js', 'test/test2.js'])  //选择合并的JS
    .pipe(concat('test.js'))   //合并js
    .pipe(rename({ suffix: '.min' }))    //重命名
    .pipe(uglify())                   //压缩
    .pipe(gulp.dest('dist/js'))            //输出 
    .pipe(notify({ message: "minifyjs ok" })); //提示
};

function build(cb) {
  minifycss();
  minifyjs();
  cb();
}

exports.clean = clean;
exports.default = gulp.series(clean, build);

gulp使用相对比较简单，请直接看里面的注释。

值得注意的是里面导出的task函数(clean/build)里面都带有一个cb参数，需要通过调用cb()告诉gulp任务已经完成，否则会有提醒。详见gulp官网

The following tasks did not complete: xxxx
Did you forget to signal async completion?

• 执行

$ gulp clean #清空dist目录
$ gulp       #执行gulp default任务