gulp学习

京尤不想
90 阅读4分钟

1. 什么是gulp

  • gulp是可以自动执行任务的工具，在平时开放流程里面，有一些任务需要手工重复执行的，比如：
    • 把文件从开发目录拷贝到生产目录
    • 把多个 JS 或者 CSS 文件合并成一个文件
    • 对JS文件和CSS进行压缩
    • 把sass或者less文件编译成CSS
    • 压缩图像文件
    • 创建一个可以实时刷新页面内容的本地服务器

2. 安装gulp

npm install --g gulp-cli 
npm install --save-dev gulp

3. gulp核心Api

  • series()：按顺序执行多个任务一个一个执行
  • parallel()：并行执行任务或者任务组
  • src()：读取数据源文件转换成stream流
  • dest：输出数据流到目标路径
  • pipe()：管道-可以在中间对数据流进行处理
  • on：事件监听
  • watch：数据源监听 这里只是部分常用api 想看全部的请到gulp中文官网 www.gulpjs.com.cn/docs/api/co…

4. gulp实战

  1. 安装
  2. 编译样式文件
  3. 编译脚本文件
  4. 编译html文件
  5. 编译任务
  6. 压缩图片
  7. 拷贝静态文件
  8. 删除输出目录
  9. 开发服务器
  10. 监听文件变化
  11. 合并和压缩

1.安装

cnpm install gulp gulp-less --save

2.编译less 文件

const gulp = require('gulp');
const less = require('gulp-less');

// 定义 less 任务
gulp.task('less', function () {
  return gulp.src('src/styles/*.less')   // 源文件路径
    .pipe(less())                        // 执行 LESS 编译
    .pipe(gulp.dest('dist/styles'));      // 输出目录路径
});

// 默认任务，可根据需要自定义
gulp.task('default', gulp.series('less'));

image.png

编译脚本

npm install gulp gulp-babel @babel/core @babel/preset-env --save-dev

// 编译脚本 

const gulp = require('gulp')
const babel = require('gulp-babel')

// 定义脚本任务
gulp.task('scripts', function () {
  return gulp.src('./src/scripts/*.js') // 源文件路径
    .pipe(babel(
      {
        presets: ['@babel/env']
      }
    ))                                  // 执行 Babel 编译
    .pipe(gulp.dest('dist/scripts'))// 输出目录路径
})
// 默认任务，可根据需要自定义
gulp.task('default', gulp.series('scripts'));

image.png

编译html

npm install gulp gulp-htmlmin --save-dev

// 编译html
### 
const gulp = require('gulp')
const htmlmin = require('gulp-htmlmin')
gulp.task('html', function () {
  return gulp.src('src/*.html')  // 源文件路径
    .pipe(htmlmin({ collapseWhitespace: true }))  // 执行 html压缩
    .pipe(gulp.dest('dist')) // 输出目录路径
})

压缩图片

npm install gulp gulp-imagemin imagemin-pngquant imagemin-jpegtran imagemin-gifsicle imagemin-svgo --save-dev

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const pngquant = require('imagemin-pngquant');
const jpegtran = require('imagemin-jpegtran');
const gifsicle = require('imagemin-gifsicle');
const svgo = require('imagemin-svgo');

// 定义压缩图片任务
gulp.task('images', function () {
  return gulp.src('src/images/*.{jpg,png,gif,svg}')   // 匹配指定格式的图片文件
    .pipe(imagemin([
      pngquant(),   // 压缩 png 
      jpegtran(),   // 压缩 jpg
      gifsicle(),   // 压缩 gif
      svgo()        // 压缩 svg
    ]))
    .pipe(gulp.dest('dist/images'));                  // 输出目录路径
});

// 默认任务，可根据需要自定义
gulp.task('default', gulp.series('images'));

拷贝静态文件

// 拷贝静态文件
const gulp = require('gulp');

// 定义任务拷贝静态文件
gulp.task('copy', function () {
  return gulp.src('src/static/**/*') // 使用通配符选择静态文件源路径
    .pipe(gulp.dest('dist/static')); // 拷贝文件到目标路径
});
gulp.task('default', gulp.series('copy'));

删除输出目录

npm install gulp-clean --save-dev


const gulp = require('gulp');
const gulpClean = require('gulp-clean');

// 定义任务删除目录
gulp.task('clean', function () {
  return gulp.src("dist/**", { read: false })  //  删除dist 目录
    .pipe(gulpClean())
});
gulp.task('default', gulp.series('clean'));

自动加载插件

  • gulp 插件太多了怎么办，你就可以使用gulp 的自动加载插件 这样你就可以不用一个个去引用了
npm install gulp-load-plugins --save-dev

const gulp = require('gulp');
const plugins = require('gulp-load-plugins')();
// 定义任务删除目录
gulp.task('clean', function () {
  return gulp.src("dist/**", { read: false })  //  删除dist 目录
    .pipe(plugins.clean())
});
gulp.task('html', function () {
  return gulp.src('src/*.html')  // 源文件路径
    .pipe(plugins.htmlmin({ collapseWhitespace: true }))  // 执行 html压缩
    .pipe(gulp.dest('dist')) // 输出目录路径
})
gulp.task('default', gulp.series('clean', 'html'));

开发服务器

cnpm i browser-sync -D

// 自动
const gulp = require('gulp');
const plugins = require('gulp-load-plugins')();
const browserSync = require('browser-sync')
// 定义任务删除目录
gulp.task('clean', function () {
  return gulp.src("dist/**", { read: false })  //  删除dist 目录
    .pipe(plugins.clean())
});
// 打包html文件
gulp.task('html', function () {
  return gulp.src('src/*.html')  // 源文件路径
    .pipe(plugins.htmlmin({ collapseWhitespace: true }))  // 执行 html压缩
    .pipe(gulp.dest('dist')) // 输出目录路径
})
// 开发服务器
gulp.task('serve', function () {
  return browserSync.create().init({
    notify: false,
    server: {
      baseDir: 'dist',
      livereload: true
    }
  })
})

gulp.task('default', gulp.series('clean', 'html', 'serve'));

监听文件变化

// 自动
const gulp = require('gulp');
const plugins = require('gulp-load-plugins')();
const browserSync = require('browser-sync')
// 定义任务删除目录
gulp.task('clean', function () {
  return gulp.src("dist/**", { read: false })  //  删除dist 目录
    .pipe(plugins.clean())
});
// 打包html文件
const html = () => {
  return gulp.src('src/*.html')  // 源文件路径
    .pipe(plugins.htmlmin({ collapseWhitespace: true }))  // 执行 html压缩
    .pipe(gulp.dest('dist')) // 输出目录路径
}
gulp.task('html', function () {
  return gulp.src('src/*.html')  // 源文件路径
    .pipe(plugins.htmlmin({ collapseWhitespace: true }))  // 执行 html压缩
    .pipe(gulp.dest('dist')) // 输出目录路径
})
// 开发服务器
gulp.task('serve', function () {
  gulp.watch("src/*.html", html); // 监听html文件变化
  return browserSync.create().init({
    notify: false,
    server: {
      baseDir: 'dist',
      livereload: true
    }
  })
})

gulp.task('default', gulp.series('clean', html, 'serve'));

 合并和压缩

const { src, dest, parallel, series, watch } = require('gulp');
const plugins = require('gulp-load-plugins')();
const browserSync = require('browser-sync');
const path = require('path');
const browserServer = browserSync.create();
const styles = () => {
  return src("src/styles/*.less", { base: 'src' })
    .pipe(plugins.less())
    .pipe(dest('temp'))
}

const scripts = () => {
  return src("src/scripts/*.js", { base: 'src' })
    .pipe(plugins.babel({
      presets: ["@babel/preset-env"]
    }))
    .pipe(dest('temp'))
}

const html = () => {
  return src("src/*.html", { base: 'src' })
    .pipe(plugins.ejs({ title: 'gulp' }, { cache: false }))
    .pipe(dest('temp'))
}

const images = async () => {
  let imagemin = await import('gulpimagemin');
  return src("src/assets/images/**/*.@(jpg|png|gif|svg)", { base: 'src' })
    .pipe(imagemin.default())
    .pipe(dest('dist'))
}

const static = async () => {
  return src("static/**", { base: 'static' })
    .pipe(dest('dist'))
}
const clean = () => {
  return src(["dist/**", "temp/**"], { read: false })
    .pipe(plugins.clean({ allowEmpty: true }));
}
const serve = () => {
  watch("src/styles/*.less", styles);
  watch("src/scripts/*.js", scripts);
  watch("src/*.html", html);
  watch([
    "src/assets/images/**/*.@(jpg|png|gif|svg)",
    "static/**"
  ], browserServer.reload);
  return browserServer.init({
    notify: false,
    files: ['dist/**'],
    server: {
      baseDir: ['temp', 'src', 'static'],
      routes: {
        '/node_modules': path.resolve('node_modules')
      }
    }
  });
}

const concat = () => {
  return src('temp/*.html', { base: 'temp' })
    .pipe(plugins.useref({
      searchPath: ['temp', '.']
    }))
    .pipe(plugins.if('*.html', plugins.htmlmin({
      collapseWhitespace: true,
      minifyCSS: true,
      minifyJS: true
    })))
    .pipe(plugins.if('*.js', plugins.uglify()))
    .pipe(plugins.if('*.css', plugins.cleanCss()))
    .pipe(dest('dist'));
}

const compile = parallel(styles, scripts, html);
const build = series(clean, parallel(series(compile, concat), images, static));
const dev = series(clean, compile, serve);
module.exports = {
  clean,
  build,
  dev
}

这篇文章对应的git地址gitee.com/little1/gul…

avatar
文章
阅读
粉丝