gulp常用插件

smart_dream

已于 2024-08-12 15:46:16 修改

阅读量475

点赞数

分类专栏：项目配置文章标签： gulp node.js

于 2021-08-17 18:28:17 首次发布

本文链接：https://blog.csdn.net/xiaoxiong_jiaxin/article/details/119758062

版权

项目配置专栏收录该内容

4 篇文章 0 订阅

订阅专栏

gulp 自动化构建工具，中文官网、github上项目

yargs Node中处理命令行参数的通用解决方案，只要一句代码 var args = require('yargs').argv;就可以让命令行的参数都放在变量args上，可以根据参数判断是测试环境还是正式环境。

browser-sync 服务器同步浏览，自动刷新页面中文官网

gulp-nodemon 自动启动/重启node程序

wiredep 在.html文件中，会把默认bower.json的配置自动注入到下面标签中去

gulp-inject 在.html文件中，将自己任意指定的文件列表注入到下面标签中去

gulp-load-plugins 自动加载gulp插件（超级有用省去一大堆代码）

gulp-plumber 管道工不会让错误爆出来继续执行

gulp-if 用于判断

gulp-clean 清空文件夹

gulp-cache 图片快取，只有更改过得图片会进行压缩

gulp-imagemin 图片压缩

gulp-sass 预编译sass gulp-scss 预编译scss gulp-less 预编译less

gulp-autoprefixer 根据设置浏览器版本自动处理浏览器前缀

gulp-clean-css 压缩css

gulp-eslint 一个用于识别和报告在ECMAScript/JavaScript代码中找到的模式的Gulp插件

gulp-jslint 检测js代码不规范的地方

gulp-babel 解析es6转换为es5

gulp-strip-debug 删除目标文件中所有console.log语句

gulp-uglify 压缩js

gulp-htmlmin 压缩html

gulp-useref 将html引用顺序的CSS JS 变成一个文件，它只负责合并，不负责压缩！

gulp-concat 合并文件

gulp-filter 可以把stream里的文件根据一定的规则进行筛选过滤。比如gulp.src中传入匹配符匹配了很多文件，可以把这些文件pipe给gulp-filter作二次筛选

gulp-rev 为文件添加版本号

gulp-rev-replace 重写已被gulp-rev重命名的文件名

gulp-zip 文件压缩为zip格式

yargs

单字符的简单参数，如传入-m=5或-m 5，则可得到args.m = 5
多字符参数（必须使用双连字符），如传入--test=5或--test 5，则可得到args.test = 5。
不带值的参数，如传入--production，则会被认为是布尔类型的参数，可得到args.production = true。

//gulpfile.js
const gulp = require('gulp');
const argv = require('yargs').argv;

gulp.task('default', function (cb) {
  if (argv.verbose) {
    console.log('输出更多信息')
  } else {
    console.log('不输出更多信息')
  }
  cb();
});
module.exports = gulp;

X:\Users\xiong\git\my-app>gulp
[18:26:04] Using gulpfile ~\git\my-app\gulpfile.js
[18:26:04] Starting 'default'...
不输出更多信息
[18:26:05] Finished 'default' after 42 ms

X:\Users\xiong\git\my-app>gulp --verbose
[18:26:29] Using gulpfile ~\git\my-app\gulpfile.js
[18:26:29] Starting 'default'...
输出更多信息
[18:26:29] Finished 'default' after 2.39 ms

安装插件过程中遇到：Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: D:\p\xjx\node_modules\gulp-strip-debug
查看Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: D:\p\xjx\node_modules\gulp-strip-debug-CSDN博客