简介

gulp是基于Nodejs的自动任务运行器， 能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。 在实现上，借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。Gulp是一个基于流的自动化构建工具，需要注意两点：一为自动化; 二为流;

特点

• 易于使用： 通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。
• 构建快速：利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。
• 插件高质：Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。
• 易于学习：通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。

gulp与grunt比较

在gulp之前又一款名为Grunt的工具拉开了前端自动化的帷幕。 gulp是一种基于流的自动化构建工具，基于nodeJs中的stream（流）来读取和写入数据，相对于grunt直接对文件进行IO读写来说速度更快。 gulp与webpack最大的不同点体现在gulp并不能像webpack那样将css/less/image等非js类资源模块化打包。

Gulp的特点 易用：代码优于配置 高效：通过流，不需要中间文件 高质量：插件完成单一功能 易学：仅有4个核心api Grunt的特点 完善：插件库庞大 易用：常见任务都有现成插件，仅需要参考文档进行配置

gulp3与gulp4比较

gulp3与gulp4的变化，主要体现在任务定义及执行体系的变化。

gulp3中任务定义及执行顺序

gulp3对于任务，顺序执行完该任务的依赖任务后，才执行该任务。

gulp4中任务定义及执行顺序

gulp4中不再支持gulp3中任务定义及依赖执行方式。

解决方法：采用async await方式定义任务

API(v3)

仅有4个核心api;【SDTW SP】

gulp.src(globs[, options])

gulp.dest(path[, options])

gulp.task(name[, deps], fn)

gulp.watch(glob, xxx)

gulp.series(task1, task2, task3) (gulp4新增)

串行执行任务

gulp.parallel(task1, task2, task3) (gulp4新增)

并行执行任务

gulp4中任务执行不再采用依赖执行方式，而是采用串行执行(gulp.series)和并行执行(gulp.parallel)两种方式。

CLI

gulp 只有你需要熟知的参数标记，其他所有的参数标记只在一些任务需要的时候使用

参数命令

-v 或 --version 会显示全局和项目本地所安装的 gulp 版本号 --require 将会在执行之前 reqiure 一个模块。 --gulpfile 手动指定一个 gulpfile 的路径，这在你有很多个 gulpfile 的时候很有用。这也会将 CWD 设置到该 gulpfile 所在目录 --cwd 手动指定 CWD; 定义 gulpfile 查找的位置，此外,所有的相应的依赖（require）会从这里开始计算相对路径 --T 或 --tasks 会显示所指定 gulpfile 的 task 依赖树 --tasks-simple 会以纯文本的方式显示所载入的 gulpfile 中的 task 列表 --color 强制 gulp 和 gulp 插件显示颜色，即便没有颜色支持 --no-color 强制不显示颜色，即便检测到有颜色支持 --silent 禁止所有的 gulp 日志

插件

加载方式

方式一：普通加载；

var imagemin = require('gulp-imagemin')
var cssmin = require('gulp-minify-css')
var htmlmin = require('gulp-minify-html')
var uglify = require('gulp-uglify')
var debug = require('gulp-debug')
var rev = require('gulp-rev') //压缩文件对应关系
var revCollector = require('gulp-rev-collector')//依赖,压缩依赖

方式二：gulp-load-plugins加载；

var gulp = require('gulp')
var $ = require('gulp-load-plugins')(gulp)
gulp.task('jsmin', () =>
    gulp.src(['src/js/*.js', 'dist/rev/img/*.json', 'dist/rev/css/*.json'])
        .pipe($.debug({ title: 'jsmin---->' }))
        .pipe($.revCollector({ replaceReved: true }))
        .pipe($.uglify())
        .pipe($.rev())
        .pipe(gulp.dest('dist/js/'))
        .pipe($.rev.manifest())
        .pipe(gulp.dest('dist/rev/js'))
);

常用插件

加载顺序

v4版本直接内置了series; const { series, parallel } = require('gulp')

var sequence = require('run-sequence')
gulp.task('build', (done) =>
    sequence('imagemin', 'cssmin', 'jsmin', 'htmlmin', done)
);
gulp.task('default', function () { 
    sequence('sass', 'sass-watch', 'coffee','coffeeWatch',['mainjs', 'vendorjs'])
 })
//从左到右的顺序; //执行gulp（默认会执行default任务）
// 定义default任务，依赖于task1任务和task2任务
gulp.task('default', ['task1', 'task2'], function() {
  console.log('done');
});
//执行顺序： 
//start task1 =>finish task1 => start task2 =>finish task2 =>start default =>finish default

v4版本示例：

const gulp = require('gulp');
// 定义任务task1
gulp.task('task1', async() => {
  await console.log('task1');
});
// 定义任务task2
gulp.task('task2', async() => {
  await console.log('task2');
});

// 串行执行task1、task2任务
gulp.task('default', gulp.series('task1', 'task2'));
//执行顺序： 
//start default =>start task1 =>finish task1 =>start task2 =>finish task2 =>finish default

// 并行执行task1、task2任务
gulp.task('default', gulp.parallel('task1', 'task2'));
//执行顺序：
start default =>start task1 =>start task2 =>finish task1 =>finish task2 =>finish default 

clean及删除

//  # 清空目录  npm install del --save-dev
 gulp.task('clean',function () { 
  del('./build')
  del('./js/main.js')
  del('./js/vendor.js')
  //await del(['./dist/']);
  //del.sync(['dist/**', `${etag_adm}/public/web/*`], {force: true});
 })

img压缩

gulp.task('imagemin', function () {
    return gulp.src('src/img/*.*')
        .pipe($.debug({ title: 'imagemin---->' }))
        .pipe($.imagemin({
            // interlaced: true,
            // optimizationLevel: 5,
            progressive: true,
            svgoPlugins: [{ removeViewBox: true }],
            use: [pngquant()]
        }))
        .pipe($.rev())
        .pipe(gulp.dest('dist/img/'))
        .pipe($.rev.manifest())
        .pipe(gulp.dest('dist/rev/img'))
})

css压缩/sass/less

//npm install gulp-minify-css -S
gulp.task('cssmin', () =>
    gulp.src(['src/css/*.css', 'dist/rev/img/*.json'])
        .pipe($.debug({ title: 'cssmin---->' }))
        .pipe($.revCollector({ replaceReved: true }))
        // .pipe(cssmin())
        .pipe($.minifyCss())
        .pipe($.rev())
        .pipe(gulp.dest('dist/css/'))
        .pipe($.rev.manifest())
        .pipe(gulp.dest('dist/rev/css'))
);

gulp.task('miniCss', function () { 
     gulp.src([
         'assets/css/bootstrap.css',
         'assets/css/index.css',
        ])
     //.pipe(minifyCss())   
     .pipe(concat('main.css'))//合并为main.css
     .pipe(cleanCss())
     .pipe(gulp.dest('css/'))
  })
//var cleanCss = require('gulp-clean-css');
//var sass = require('gulp-sass');
var isProduction = process.env.ENV === 'prod'
gulp.task('sass', function () { 
    gulp.src([
        'assets/css/main.scss',
       ])
    .pipe(sass())
    .pipe(gif(isProduction, cleanCss()))
    .pipe(gulp.dest('css/'))
})
gulp.task('sass-watch', function () { 
    gulp.watch('assets/css/*.sass', ['sass'])
 })

//注意这里；依赖node-sass;
//npm install node-sass gulp-sass --save-dev
var sass = require('gulp-sass');
sass.compiler = require('node-sass');
gulp.task('sass', function () {
  return gulp.src('./sass/**/*.scss')
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});

gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

var less = require('gulp-less')
gulp.task('less', function () {
    gulp.src('less/**.less')
        .pipe(less())
        .pipe(gulp.dest('dist/css'))
});

js压缩

var uglify = require('gulp-uglify')
gulp.task('minjs', function() {
    gulp.src('js/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'))
})

//Tips，对应有ES6代码的情况，得先用babel转换后(而且得去掉sourcemaps)，再次压缩uglify()
//通过gulp-if判断是否是生产和开发环境
gulp.task('jsmin', () =>
    gulp.src(['src/js/*.js', 'dist/rev/img/*.json', 'dist/rev/css/*.json'])
        .pipe($.debug({ title: 'jsmin---->' }))
        .pipe($.revCollector({ replaceReved: true }))
        .pipe($.uglify())
        .pipe($.rev())
        .pipe(gulp.dest('dist/js/'))
        .pipe($.rev.manifest())
        .pipe(gulp.dest('dist/rev/js'))
);

html压缩

gulp.task('htmlmin', () =>
    gulp.src(['src/index.html', 'dist/rev/img/*.json', 'dist/rev/css/*.json', 'dist/rev/js/*.json'])
        .pipe($.debug({ title: 'htmlmin---->' }))
        .pipe($.revCollector({ replaceReved: true }))
        // .pipe($.livereload())
        // .pipe($.stripCode({
        //     start_comment: "start-dev-code",
        //     end_comment: "end-dev-code"
        //   }))
        .pipe($.stripCode({pattern: /<script\s+src=\".*livereload.js.*\"><\/script>/}))
        // .pipe(htmlmin())
        .pipe($.minifyHtml())
        .pipe(gulp.dest('dist/'))
);

文件拷贝/合并/替换

gulp.task('copy', (callback) =>
    gulp.src('./src/**/*.*')
        .pipe(gulp.dest('./dist/'))
);
//gulp-concat 	gulp-replace
gulp.task('miniCss', function () { 
     gulp.src([
         'assets/css/bootstrap.css',
         'assets/css/index.css',
        ])
     //.pipe(minifycss())   
     .pipe(concat('main.css'))//合并为main.css
     .pipe(cleanCss())
     .pipe(gulp.dest('css/'))
  })

判断条件

var gif = require('gulp-if');
var isProduction = process.env.ENV === 'prod'
 .pipe(gif(isProduction, uglify()))//代码压缩，ES5

var gulpif = require('gulp-if');
var uglify = require('gulp-uglify');
var beautify = require('gulp-beautify');

gulp.task('task', function() {
    gulp.src('./src/*.js')
      .pipe(gulpif(condition, uglify(), beautify()))
      .pipe(gulp.dest('./dist/'));
  });

balel/coffee转换

var coffee = require('gulp-coffee');
var babel = require('gulp-babel');
 // 得先删除build中文件和js/main.js&js/vendor.js，再次gulp
gulp.task('babel', function () { 
    gulp.src('./assets/js/*.js')
    .pipe(babel({
        //.babelrc  {"presets":["es2015"]}
        presets:['es2015'] //cnpm i -D babel-preset-es2015 babel-core
    }))
    .pipe(gulp.dest('./build/js/'))
 })
gulp.task('babelWatch', function () { 
    gulp.watch('./assets/js/*.js', ['babel'])
 })
 
// 得先删除build中文件和js/main.js&js/vendor.js，再次gulp
gulp.task('coffee', function () { 
    gulp.src('./assets/js/*.coffee')
    .pipe(coffee())
    .pipe(gulp.dest('./build/js/'))
 })
gulp.task('coffeeWatch', function () { 
    gulp.watch('./assets/js/*.coffee', ['coffee'])
 })

功能总括(v4示例)

gulp检测、转换、打包、压缩js

实现功能： 将当前目录下的main.js、hello.js、world.js进行eslint检测，babel转换，合并压缩成app.min.js输出到dist目录

• gulp-eslint：eslint检测
• gulp-babel：babel转换
• gulp-concat：合并文件（js/css/html等）
• gulp-uglify：压缩js

const gulp = require('gulp');
const babel = require('gulp-babel'); // babel转换
const eslint = require('gulp-eslint'); // eslint检测
const concat = require('gulp-concat'); // 合并文件
const uglify = require('gulp-uglify'); // 压缩js
const del = require('del'); // 清空目录

// 合并压缩的文件
const jsFiles = ['./main.js', './hello.js', './world.js'];

// eslint任务，实现eslint检测和代码格式化
gulp.task('eslint', async() => {
  await gulp.src(jsFiles)
            .pipe(eslint())
            .pipe(eslint.format()) // 格式化
            .pipe(eslint.failAfterError()); // 报错
});

// clean任务，清空dist文件夹
gulp.task('clean', async() => {
  await del(['./dist/']);
});

// jsCompress任务，实现js转换、合并、压缩
gulp.task('jsCompress', async() => {
  await gulp.src(jsFiles)
            .pipe(babel({
              presets: ['@babel/env'] // es6转换为es5
            }))
            .pipe(concat('app.min.js')) // 合并为app.min.js
            .pipe(uglify()) // 文件压缩
            .pipe(gulp.dest('./dist/')) // 文件写入到dist文件夹
});
// 顺序执行clean、eslint、jsCompress任务
gulp.task('default', gulp.series('clean', 'eslint', 'jsCompress'));

gulp转换、合并、压缩scss/css

实现功能： （1）当前目录下的main.scss、style.scss转换css然后合并压缩成scss.css写入到dist目录。 （2）当前目录下的所有css文件合并压缩成style.min.css写入到dist目录。

• gulp-sass：sass编译
• gulp-concat：合并文件
• gulp-clean-css：压缩css

const gulp = require('gulp');
const concat = require('gulp-concat'); // 合并文件
const cleanCss = require('gulp-clean-css'); // 压缩css
const sass = require('gulp-sass'); // sass编译
const del = require('del'); // 清空目录

// clean任务，清空dist目录
gulp.task('clean', async() => {
   await del(['./dist']);
});
// sass任务，实现scss文件编译、合并、压缩
gulp.task('sass', async() => {
  await gulp.src(['./main.scss', './style.scss'])
            .pipe(sass()) // sass编译
            .pipe(concat('scss.css')) // 合并为scss.css
            .pipe(cleanCss()) // 压缩css文件
            .pipe(gulp.dest('./dist'));
});
// css任务，实现css合并、压缩
gulp.task('css', async() => {
  await gulp.src(['./*.css'])
            .pipe(concat('style.min.css')) // 合并为style.min.css
            .pipe(cleanCss()) // 压缩
            .pipe(gulp.dest('./dist'));
});
// 先执行clean任务，再并行执行sass和css任务
gulp.task('default', gulp.series('clean', gulp.parallel('sass', 'css')));

gulp压缩html、image

实现功能： （1）实现当前目录下的html压缩输出到dist目录下 （2）实现当前目下的png图片输出到dist目录下

• gulp-htmlmin：html压缩
• gulp-imagemin：图片压缩

const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin'); // html压缩
const imagemin = require('gulp-imagemin'); // 图片压缩
const del = require('del'); // 清空目录

// clean任务，清空dist目录
gulp.task('clean', async() => {
  await del('./dist');
});
// html任务，压缩html文件代码
gulp.task('html', async() => {
  await gulp.src('./*.html')
            .pipe(htmlmin({ collapseWhitespace: true })) // 压缩去除空格
            .pipe(gulp.dest('dist'));
});
// image任务，压缩图片
gulp.task('image', async() => {
  await gulp.src('./*.png')
            .pipe(imagemin())
            .pipe(gulp.dest('./dist'));
})
// 先串行执行clean任务，后并行执行html和image任务
gulp.task('default', gulp.series('clean', gulp.parallel('html', 'image')));

其他插件

gulp-notify, gulp-autoprefixer, gulp-livereload

• gulp-load-plugins (opens new window)：自动加载 package.json 中的 gulp 插件，避免一个个require插件
• gulp-rename (opens new window)： 重命名
• gulp-uglify (opens new window)：文件压缩
• gulp-concat (opens new window)：文件合并
• gulp-less (opens new window)：编译 less
• gulp-sass (opens new window)：编译 sass
• gulp-clean-css (opens new window)：压缩 CSS 文件
• gulp-htmlmin (opens new window)：压缩 HTML 文件
• gulp-babel (opens new window): 使用 babel 编译 JS 文件
• gulp-jshint (opens new window)：jshint 检查
• gulp-imagemin (opens new window)：压缩jpg、png、gif等图片
• gulp-livereload (opens new window)：当代码变化时，它可以帮我们自动刷新页面，除在模块中需要安装外，还需要在浏览器中安装。browser-sync ，推荐用gulp-connect，看后面的示例；
• gulp-autoprefixer (opens new window)：autoprefixer 解析 CSS 文件并且添加浏览器前缀到CSS规则里。
• gulp-minify-css (opens new window)：压缩 css 的方式
• gulp-sourcemaps (opens new window)：压缩后的代码不存在换行符和空白符，导致出错后很难调试，好在我们可以使用 sourcemap (opens new window) 帮助调试

gulp.task('minifycss', function () {
    gulp.src('src/css/**/*.css')
        .pipe(sourcemaps.init())
        .pipe(autoprefixer({
          browsers: 'last 2 versions'
        }))
        .pipe(minifycss())
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('dist/css/'))
})

示例

gulp-cli https://github.com/vincentSea/gulp-cli/blob/master/gulpfile.js

gulp.task('default', () => {
  console.log(chalk.green(
   `
  Build Setup
    开发环境： npm run dev
    生产环境： npm run build
    执行压缩： gulp zip
    编译页面： gulp html
    编译脚本： gulp script
    编译样式： gulp styles
    语法检测： gulp eslint
    压缩图片： gulp images
    `
  ))
})

前端示例

assets.json

{
  "assetsFonts": [
    "./src/assets/plugins/bootstrap/fonts/*.*"
  ],
  "assetsJs": [
    "./src/assets/plugins/jquery/jquery.js",
    "./src/assets/plugins/bootstrap/js/bootstrap.js",
    "./src/assets/plugins/angular/angular.js",
    "./src/assets/plugins/angular/angular-*.js"
  ],
  "assetsCss": [
    "./src/assets/plugins/bootstrap/css/bootstrap.css"
  ],
  "appHtml": [
    "./src/**/*.html"
  ],
  "appJs": [
    "./src/index.js",
    "./src/app/**/*.js",
    "./src/services/**/*.js"
  ],
  "appCss": [
    "./src/css/*.css"
  ],
  "configJs": [
    "./src/config/config.js"
  ]
}

gulpfile.coffee

# 因现在为coffee文件;用webstorm配置编译；-> 就是相当于 function(){return ***;};
gulp = require('gulp');
del = require('del');
uglify = require('gulp-uglify');
minifyCss = require('gulp-minify-css');
#unCss = require('gulp-uncss');
concat = require('gulp-concat')
browserSync = require('browser-sync').create();
runSequence = require('run-sequence');

fs = require('fs')
#获取参数
assets = JSON.parse(fs.readFileSync('assets.json'))//这个直接require就可以；

# 构建任务部分
gulp.task('default',(callback)->
  runSequence(['clean'],['build'],['serve','watch'],callback)
);

# 清空目录  npm install del --save-dev
gulp.task('clean',(callback)->
  del('./dist/',callback)
);

gulp.task('build',(callback)->
#  方式一:
#  runSequence(['copy','miniJs','miniCss'],callback)
#  方式二:优化使用；
#  替换之前的全拷贝；开发时不做压缩；
  runSequence(
    ['assetsFonts','assetsJs', 'assetsCss',],
    [ 'appHtml', 'appJs', 'appCss', 'configJs'],
    callback
  )
);

# 文件复制
gulp.task('copy',(callback)->
  gulp.src('./src/**/*.*')
  .pipe(gulp.dest('./dist/'));
);

#拷贝资源部分；
gulp.task('assetsFonts', ->
  gulp.src(assets.assetsFonts)
  .pipe(gulp.dest('./dist/assets/fonts/'))
)
gulp.task('assetsJs', ->
  gulp.src(assets.assetsJs)
  .pipe(concat('assets.js', {newLine: ';\n'}))
  .pipe(gulp.dest('./dist/assets/js/'))
)
gulp.task('assetsCss', ->
  console.log("--------assetsCss------->"+assets.assetsCss)
  gulp.src(assets.assetsCss)
  .pipe(concat('assets.css', {newLine: '\n\n'}))
  .pipe(gulp.dest('./dist/assets/css/'))
)

# app文件处理部分；
# 拷贝资源部分；跟index.html配合加载使用,优化修改；
gulp.task('appHtml', ->
#  gulp.src(['./src/**/*.html'])
  gulp.src(assets.appHtml)
  .pipe(gulp.dest('./dist/'))
)

gulp.task('appJs', ->
  gulp.src(assets.appJs)
  .pipe(concat('app.js', {newLine: ';\n'}))
  .pipe(gulp.dest('./dist/assets/js/'))
)

gulp.task('appCss', ->
  gulp.src(assets.appCss)
  .pipe(concat('app.css', {newLine: '\n\n'}))
  .pipe(gulp.dest('./dist/assets/css/'))
)

# 加载配置JS文件
gulp.task('configJs', ->
  gulp.src(assets.configJs)
  .pipe(gulp.dest('./dist/assets/js/'))
)

# js压缩 npm install gulp-uglify --save-dev
gulp.task('miniJs',->
  gulp.src('./src/**/*.js')
  .pipe(uglify())
  .pipe(gulp.dest('./dist/'));
);

# css压缩 npm install gulp-minify-css gulp-uncss --save-dev
#gulp-minify-css@1.2.4: Please use gulp-clean-css
gulp.task('miniCss',->
  gulp.src('./src/**/*.css')
  .pipe(minifyCss())
#  .pipe(unCss())
  .pipe(concat('app.css', {newLine: '\n\n'}))
  .pipe(gulp.dest('./dist/assets/css/'))
);

# 文件合并
gulp.task('concat',->
  gulp.src('./src/*.js')
  .pipe(concat('all.js',(newLine:';\n')))
  .pipe(gulp.dest('./dist/'));
);

# 监视
gulp.task('watch',->
  gulp.watch('./src/**/*.*',['reload'])
)

#use serve task to launch Browsersync
# npm install browser-sync --save-dev  --msvs_version=2008
gulp.task('serve',->
  browserSync.init({
    server: {
      baseDir:'./dist/'
    }
    port:7411
  });
);

# 启动浏览器 npm install browser-sync --save-dev
gulp.task('reload-browser',->
  browserSync.reload();
)

# npm install run-sequence --save-dev 重新加载刷新，按照指定顺序执行；
gulp.task('reload',(callback)->
#  runSequence(['copy','miniJs','miniCss'],['reload-browser'],callback)
  runSequence(['build'],['reload-browser'],callback)
)

后端示例

# 因现在为coffee文件;用webstorm配置编译；-> 就是相当于 function(){return ***;};
gulp = require('gulp');
del = require('del');
runSequence = require('run-sequence');
developServer = require('gulp-develop-server')
notify = require('gulp-notify')

# 构建任务部分
gulp.task('default',(callback)->
  runSequence(['clean'],['copyJS'],['serve','watch'],callback)
);

#gulp.task('build',(callback)->
#  runSequence(['copy','miniJs','miniCss'],callback)
#);

# 清空目录  npm install del --save-dev
gulp.task('clean',(callback)->
  del('./dist/',callback)
);

# 文件复制
gulp.task('copyJS',(callback)->
  gulp.src('./src/**/*.js')
  .pipe(gulp.dest('./dist/'));
);

# 启动node、监听node 指定文件  npm install gulp-develop-server --save-dev
gulp.task('serve',->
  developServer.listen({
     path: './dist/index.js'
  })
);

# 监视
gulp.task('watch',->
  gulp.watch('./src/**/*.*',['reload'])
)

# 修改后重新加载文件； npm install run-sequence --save-dev
gulp.task('reload',(callback)->
  runSequence(['copyJS'],['reload-node'],callback)
)

# 重启node服务  npm install gulp-notify --save-dev
gulp.task('reload-node',->
  developServer.restart()
  gulp.src('./dist/index.js')
  .pipe(notify('Server restarted ...'))
);

完整示例(v4) : gulp在生产和开发环境下的应用;[推荐]

前端开发过程中，针对开发环境和生产环境配置往往不同： 开发环境：起本地服务，支持调试，热更新。 生产环境：压缩合并代码用于部署线上环境。 所需插件：

• del：清空目录； gulp-concat：合并文件；
• gulp-eslint：eslint代码检测； gulp-babel：babel转换，将es6代码转为es5；gulp-uglify：js压缩；
• gulp-sass：sass编译； gulp-clean-css：css压缩
• gulp-htmlmin：html压缩；gulp-imagemin：图片压缩
• gulp-connect：起server服务调试

实现功能： （1）实现js eslint检测、babel转换、合并、压缩 （2）实现sass编译与css合并、压缩 （3）实现html压缩 ；实现image压缩 （5）开发环境预览、热更新 ；生产环境各个文件打包

const gulp = require('gulp');
const babel = require('gulp-babel'); // es6转为es5语法
const eslint = require('gulp-eslint'); // eslint代码检测
const concat = require('gulp-concat'); // 文件合并
const uglify = require('gulp-uglify'); // js压缩
const sass = require('gulp-sass'); // sass编译
const htmlmin = require('gulp-htmlmin'); // html压缩
const connect = require('gulp-connect'); // 起server服务
const imagemin = require('gulp-imagemin'); // 图片压缩
const del = require('del'); // 清空目录
const cleanCss = require('gulp-clean-css'); // css压缩

// 清空dist目录
gulp.task('clean', async() => {
 await del(['./dist']);
});

// html压缩公共函数
const htmlMin = () => {
 return gulp.src('./index.html')
            .pipe(htmlmin(
                 {collapseWhitespace: true}
                 ))
            .pipe(gulp.dest('dist'));
};

// html:dev task，用于开发环境下，浏览器自动刷新
gulp.task('html:dev', async() => {
 await htmlMin().pipe(connect.reload());
});
// html:build task，用于生产环境
gulp.task('html:build', async() => {
 await htmlMin();
});

// sass转换、合并、压缩css公共函数
const cssMin = () => {
 return gulp.src(['./css/style.scss', './css/*.css'])
            .pipe(sass())
            .pipe(concat('style.min.css'))
            .pipe(cleanCss())
            .pipe(gulp.dest('./dist/css'))
};

// css:dev任务，用于开发环境
gulp.task('css:dev', async() => {
 await cssMin().pipe(connect.reload());
});
// css:dev任务，用于生产环境
gulp.task('css:build', async() => {
 await cssMin();
});

// js eslint检测、babel转换、合并、压缩公共函数
const jsMin = () => {
 return gulp.src('./js/*.js')
            .pipe(eslint())
            .pipe(eslint.format())
            .pipe(eslint.failAfterError())
            .pipe(babel({
               presets: ['@babel/env']
             }))
            .pipe(concat('main.min.js'))
            .pipe(uglify())
            .pipe(gulp.dest('./dist/js'));
};

// js:dev任务，用于开发环境
gulp.task('js:dev', async() => {
 await jsMin().pipe(connect.reload());
});
// js:build，用于生产环境
gulp.task('js:build', async() => {
 await jsMin();
});

// 图片压缩公共函数
const imageMin = () => {
 return gulp.src('./img/*.png')
            .pipe(imagemin())
            .pipe(gulp.dest('./dist/img'));
};

// image:dev任务，用于开发环境
gulp.task('image:dev', async() => {
 await imageMin().pipe(connect.reload());
});
// image:build任务，用于生产环境
gulp.task('image:build', async() => {
 await imageMin();
});

// server任务，目录为dist，入口文件为dist/index.html，port 8080
gulp.task('server', () => {
  connect.server(
   {
     root: './dist',
     port: 8080,
     livereload: true
   }
 )
});

// watch任务，监听源文件变化，执行对应开发任务
gulp.task('watch', () => {
 gulp.watch(['./css/*.css', './css/*.scss'], gulp.series('css:dev'));
 gulp.watch('./js/*.js', gulp.series('js:dev'));
 gulp.watch('./index.html', gulp.series('html:dev'));
 gulp.watch('./img/*.png', gulp.series('image:dev'));
});

// dev任务，启动开发环境
gulp.task('dev', gulp.series(gulp.parallel('watch', 'server')));

// build任务，用于生产环境下打包压缩源代码
gulp.task('build', gulp.series('clean', gulp.parallel('html:build', 'js:build', 'css:build', 'image:build')))

package.json

"scripts": {
   "dev": "gulp dev",
   "build": "gulp build"
 },

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./css/style.min.css">
</head>
<body>
  <div>Document</div>
  <div class="hello"></div>
  <div class="main"></div>
  <div>
    <img src="./img/samy.png" width="200" height="200">
  </div>
  <script src="./js/main.min.js"></script>
</body>
</html>

参考链接

https://v3.gulpjs.com.cn/docs/

https://v3.gulpjs.com.cn/docs/cli/