gulp

tags: ‘gulp’

categories: “gulp”

Gulp基础

Gulp运行环境

// gulp的使用需要安装两个gulp，一个是本地的一个是全局的
// 第一步、安装gulp：
>全局的：npm i gulp -g        启动器（只负责启动）
>本地的：npm i gulp           核心库（只负责提供各种功能）
// 第二步
// gulp也好，webpack也好，它的每一个功能基本都是由一个独立的组件完成的，所以需要包管理
输入命令npm init -y
// 如果使用cnpm init -y，会出现很多乱的依赖项，cnpm的层级不对，需要删除配置中的依赖项
// 再输入本地安装命令：cnpm i gulp -D
// 第三步、编写配置：
文件名：gulpfile.js
gulpfile.js：

Gulp组件（模块）

压缩js的组件（模块）：gulp-uglify

输入命令：cnpm i gulp-uglify -D
gulp-uglify作用：帮助js文件压缩
// 没有经过压缩的文件都放在gulpProject/src中
gulpProject/src/js/jquery.js
gulpProject/src/js/vue.js
gulpProject/gulpfile.js：
const gulp=require('gulp'); // 引入gulp
const uglify=require('gulp-uglify'); // 引入压缩文件的组件(插件)uglify
// 声明gulp的任务：gulp.task(),gulp的任务可以声明多个
/*
    gulp.task('任务名称', ()=>{
        return 任务的具体操作;
    })
*/
/*
    gulp支持流操作
    gulp.src作用：读取一些文件
    .pipe作用：下一步操作
    uglify作用：压缩
    gulp.dest作用：输出到哪里
*/
gulp.task('js', ()=>{
  return gulp.src(['./src/js/*.js'])
    .pipe(uglify())
    .pipe(gulp.dest('./build/js/'));
});
gulp.task('default', ['js']);
/*
    default是一个特殊的任务
    当不指定执行哪个任务的时候，会自动执行default中的任务
    如果没有default，那么在运行的时候必须加名字，即需要输入gulp 声明的任务名
    gulp.task('default', [上面声明的任务的名字]);
*/
最后直接执行命令进行压缩：gulp

汇总js的组件（模块）：gulp-concat

// 1.初始化项目
npm init -y
// 2.安装相关的组件
cnpm i gulp gulp-uglify gulp-concat -D
// 3.编写配置
gulpProject/gulpfile.js：
const gulp=require('gulp'); // 引入gulp
const uglify=require('gulp-uglify'); // 引入uglify
const concat=require('gulp-concat'); // 引入concat
// .src(['./src/js/*/*.js'])：这个匹配的是js下面的一层目录的.js文件，例如:/js/user/1.js
// .src(['./src/js/**/*.js'])：这个匹配的是js下面的任意目录的.js文件，(任意目录既包括根目录也包括任意级别的子目录)例如:/js/user/1.js
// 每一个插件都有自己的参数
// 文件连接 
// concat作用：文件连接，.pipe(concat(输出的文件名))
// gulp.dest作用：输出.pipe(gulp.dest('./build/js'))，因为concat已经指定过文件名了，所以只需指定文件的目录
gulp.task('js', ()=>{
  return gulp
    .src(['./src/js/**/*.js'])
    .pipe(concat('bundle.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./build/js'));
});
gulp.task('default', ['js']);
// 如果需要每个打包成为单独的文件，则去除concat的使用即可

编译js中的ES6语法的组件（模块）：gulp-babel

安装：cnpm i gulp-babel @babel/core @babel/preset-env -D
// @babel是babel新版本的标志
// gulp-babel没有办法直接使用，需要其他库辅助来使用babel
// gulp-babel：编译ES6语法，babel没有办法直接使用，需要其他的插件（@babel/core和@babel/preset-env）辅助使用，@babel/core是babel本身的核心库，@babel/preset-env是babel的环境预设。gulp-babel插件只是一个桥梁(是一个适配器)，让gulp能调用babel，但是，它不是babel本身，所以还需要安装@babel/core和@babel/preset-env
// 编译文件
gulpProject/gulpfile.js：
const gulp=require('gulp'); // 引入gulp
const uglify=require('gulp-uglify'); // 引入uglify
const concat=require('gulp-concat'); // 引入concat
const rename=require('gulp-rename'); // 引入rename
// rename作用：重命名文件，具体参数可以参考npmjs网站，rename({suffix: '.min'})：添加后缀名.min
//babel：编译ES6，babel({presets: ['@babel/env']})：使用babel环境变量中的的预编译的配置
gulp.task('js', ()=>{
  return gulp
    .src(['./src/js/**/*.js'])
    .pipe(concat('bundle.min.js'))
    .pipe(babel({
      presets: ['@babel/env']
    }))
    .pipe(uglify())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('./build/js'));
});
gulp.task('default', ['js']);

更改编译后的文件的名字的组件（模块）：gulp-rename

安装：cnpm i gulp-rename -D
// 配置文件：
gulpProject/gulpfile.js：
const gulp=require('gulp'); // 引入gulp
const uglify=require('gulp-uglify'); // 引入uglify
const concat=require('gulp-concat'); // 引入concat
const rename=require('gulp-rename'); // 引入rename
// rename作用：重命名文件，具体参数可以参考npmjs网站，rename({suffix: '.min'})：添加后缀名.min
gulp.task('js', ()=>{
  return gulp
    .src(['./src/js/**/*.js'])
    .pipe(concat('bundle.min.js'))
    .pipe(uglify())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('./build/js'));
});
gulp.task('default', ['js']);

解决编译、压缩之后的代码难调试模块：gulp-sourcemaps

// gulp-sourcemaps：解决编译、压缩之后的代码难调试（保留编译之前的源码的信息，如果不开sourcemap，则只是压缩，压缩之后就结束，出错代码不容易调试；如果打开sourcemap，它会将源码中的信息带过来，一旦出错了或者调试的时候，它可以通过sourcemap将原始的源代码恢复过来），并不是所有的浏览器都支持sourcemap，目前chrom支持sourcemap很好，火狐支持不大，IE不支持。
安装: npm i gulp-sourcemaps -D
// sourcemap的位置是放置在编译之前执行
// 配置文件
gulpProject/gulpfile.js：
const gulp=require('gulp'); // 引入gulp
const uglify=require('gulp-uglify'); // 引入uglify
const concat=require('gulp-concat'); // 引入concat
const rename=require('gulp-rename'); // 引入rename
const babel=require('gulp-babel'); // 引入gulp-babel，它只是一个适配器
const sourcemaps=require('gulp-sourcemaps');
gulp.task('js', ()=>{
  return gulp
    .src(['./src/js/**/*.js'])
    //.pipe(concat('bundle.min.js'))
    .pipe(sourcemaps.init()) // 对sourcemaps进行初始化(开始记录编译对代码的影响，方便告诉浏览器如何恢复)
    .pipe(babel({
      presets: ['@babel/env']
    }))
    .pipe(uglify())
    .pipe(sourcemaps.write())// 对sourcemaps进行写出
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('./build/js'));
});
gulp.task('default', ['js']);
// 如果不使用合并concat而是使用include的方式引入，sourcemap的css会定位不准确

压缩css模块：gulp-cssmin

安装：npm i gulp-cssmin -D
// 配置文件
gulpProject/gulpfile.js：
const gulp=require('gulp');
const cssmin=require('gulp-cssmin'); // 引入cssmin
const concat=require('gulp-concat'); // 引入concat：合并css
// .src(['./src/css/**/*.css'])：读取文件
// .pipe(concat('style.min.css'))：合并文件
// .pipe(cssmin())：压缩文件
// .pipe(gulp.dest('./build/css/'))：输出
gulp.task('style', ()=>{
  return gulp
    .src(['./src/css/**/*.css'])
    .pipe(concat('style.min.css'))
    .pipe(cssmin())
    .pipe(gulp.dest('./build/css/'));
});
gulp.task('default', ['style']);

压缩图片：gulp-imagemin，还提供了渐进式的加载

安装：npm i gulp-imagemin -D
// gulp-imagemin提供了压缩图片的功能，还提供了渐进式的加载（图片加载比较慢时，一开始就能看见图片，但是比较模糊，渐渐就清晰了）
// 配置文件
gulpProject/gulpfile.js：
const gulp=require('gulp');
const cssmin=require('gulp-cssmin'); // 引入cssmin
const concat=require('gulp-concat'); // 引入concat：合并css
const imagemin=require('gulp-imagemin');
// .src(['./src/css/**/*.css'])：读取文件
// .pipe(concat('style.min.css'))：合并文件
// .pipe(cssmin())：压缩文件
// .pipe(gulp.dest('./build/css/'))：输出
gulp.task('style', ()=>{
  return gulp
    .src(['./src/css/**/*.css'])
    .pipe(concat('style.min.css'))
    .pipe(cssmin())
    .pipe(gulp.dest('./build/css/'));
});
// gulp-imagemin只能压缩下面的三种文件png、jpg、gif
gulp.task('image', ()=>{
  return gulp
    .src(['./src/img/**/*.jpg', './src/img/**/*.gif', './src/img/**/*.png']) // 读取文件，也可以写'./src/img/**/*.*'
    .pipe(imagemin([
      imagemin.gifsicle({interlaced: true}), // 优化.gif，隔行扫描(图片加载比较慢时，一开始就能看见图片，但是比较模糊，渐渐就清晰了)
      imagemin.jpegtran({propressive: true}), // 优化.jpg，渐进扫描（和上面的一样）
      imagemin.optipng({optimizationLevel: 5}) // 优化png(png是无损压缩)，
    ]))
    .pipe(gulp.dest('./build/img/')); // 输出
});
gulp.task('default', ['image']);

自动监视文件的变化，自动重新编译：gulp.watch（这个只能编译实时更新，但是浏览器的实时更新不可以，需要另外一个组件）

gulp.watch的功能也叫热更新
gulp.watch([文件列表], [任务列表])
gulp.watch(['./src/js/**/*.js'], ['js'])
// 任何一个文件变化了，它会自动执行任务列表中所有操作
// 配置文件
gulpProject/gulpfile.js：
const gulp=require('gulp');
const cssmin=require('gulp-cssmin');
const uglify=require('gulp-uglify');
const concat=require('gulp-concat');
const rename=require('gulp-rename');
const babel=require('gulp-babel');
const sourcemaps=require('gulp-sourcemaps');
const imagemin=require('gulp-imagemin');
// 可以使用数组存储一系列类型的地址
const js_path=['./src/js/**/*.js'];
gulp.task('js', ()=>{
  return gulp
    .src(js_path)
    //.pipe(concat('bundle.min.js'))
    .pipe(sourcemaps.init())
    .pipe(babel({
      presets: ['@babel/env']
    }))
    .pipe(uglify())
    .pipe(sourcemaps.write())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('./build/js'));
});
gulp.task('style', ()=>{
  return gulp
    .src(['./src/css/**/*.css'])
    .pipe(concat('style.min.css'))
    .pipe(cssmin())
    .pipe(gulp.dest('./build/css/'));
});
gulp.task('image', ()=>{
  return gulp
    .src(['./src/img/**/*.jpg', './src/img/**/*.gif', './src/img/**/*.png']) // 读取文件，也可以写'./src/img/**/*.*'
    .pipe(imagemin([
      imagemin.gifsicle({interlaced: true}), // 优化.gif，隔行扫描(图片加载比较慢时，一开始就能看见图片，但是比较模糊，渐渐就清晰了)
      imagemin.jpegtran({propressive: true}), // 优化.jpg，渐进扫描（和上面的一样）
      imagemin.optipng({optimizationLevel: 5}) // 优化png(png是无损压缩)，
    ]))
    .pipe(gulp.dest('./build/img/')); // 输出
});
gulp.task('watch', ()=>{
  gulp.watch(js_path, ['js']);
});
gulp.task('default', ['js', 'watch']);
// watch如果操作特别复杂，会比较慢

代码重新编译之后，浏览器实时更新：livereload

livereload是一个插件；
livereload首先需要一个服务端，浏览器还需要一个livereload插件
livereload的配置
1.首先需要服务器
  npm i http-server -g
// gulp带的服务器http-server
2.插件(gulp)
  npm i gulp-livereload -D
// 本地安装插件
3.插件(chrome)
  crx往里拖
4.配置
  编译之后，触发livereload
gulpProject/1.html：
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
    document.write(`<script src="build/js/bundle.min.js?t=${Math.random()}" charset="utf-8"></sc`+`ript>`)
    </script>
  </head>
  <body>
    aaabbbbdfasd
  </body>
</html>
gulpProject/gulpfile.js：
const gulp=require('gulp');
const livereload=require('gulp-livereload'); // 功能：浏览器实时更新
const babel=require('gulp-babel'); // 编译ES6
const uglify=require('gulp-uglify'); // js压缩
const concat=require('gulp-concat'); // 文件连接
const js_path=['./src/js/**/*.js'];
gulp.task('js', ()=>{
  return gulp
    .src(js_path) // 匹配文件
    .pipe(babel({ // 编译ES6
      presets: ['@babel/env']
    }))
    .pipe(concat('bundle.min.js')) // 文件合并
    .pipe(uglify()) // 压缩js文件
    .pipe(gulp.dest('./build/js')) // 输出文件目录
    .pipe(livereload()); // 浏览器实时更新
});
// 通过watch调用名字为js的任务，通过js的任务来调用livereload
gulp.task('watch', ()=>{
  // 开启livereload的服务（让服务器开始监听）
  livereload.listen();
  // 重新编译JS（监听js_path文件的修改，如果它修改了，则执行任务名为js的任务）
  gulp.watch(js_path, ['js']);
  // 监听html；标记文件修改
  gulp.watch([
    './1.html',
    ...js_path
  ], file=>{
    livereload.changed(file.path); // changed：告诉livereload哪个文件更改了，则更新哪个文件
  });
});
gulp.task('default', ['js', 'watch']);
开启http-server：输入命令：http-server

编译less：gulp-less

// 配置
gulpProject/gulpfile.js：
const gulp=require('gulp');
const less=require('gulp-less');
const sourcemaps=require('gulp-sourcemaps');
const concat=require('gulp-concat');
const cssmin=require('gulp-cssmin');
gulp.task('less', ()=>{
  return gulp
    .src(['./src/less/**/*.less'])
    .pipe(sourcemaps.init())
    .pipe(concat('main.less.min.css'))
    .pipe(less())
    .pipe(cssmin())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./build/css/'));
});
gulp.task('default', ['less']);

组合任务

gulp.series：按照顺序执行
gulp.paralle：可以并行计算

series和paralle可以混合使用，这两个方法中的参数是task或者是组合的任务

const gulp=require('gulp');
gulp.task('less1', ()=>{
  return gulp
    .src(['./src/less/**/*.less'])
    .pipe(sourcemaps.init())
    .pipe(concat('main.less.min.css'))
    .pipe(less())
    .pipe(cssmin())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./build/css/'));
});
gulp.task('less2', ()=>{
  return gulp
    .src(['./src/less/**/*.less'])
    .pipe(sourcemaps.init())
    .pipe(concat('main.less.min.css'))
    .pipe(less())
    .pipe(cssmin())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./build/css/'));
});
gulp.task('test', gulp.paralle('less1', 'less2'))
gulp.task('test', gulp.series('less1', 'less2', gulp.parallel(
    cssTranspile,
    gulp.series(jsTranspile, jsBundle)
  )))