一、gulp是什么
gulp 是基于 node 实现 Web 前端自动化开发的工具，利用它能够极大的提高开发效率。在 Web 前端开发工作中有很多“重复工作”，比如压缩CSS/JS文件。而这些工作都是有规律的。找到这些规律，并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”。
二、安装gulp
使用 gulp 需要全局安装和本地安装。
1、全局安装
全局安装的意思就是以后在电脑的每一个位置都可以使用 gulp 的命令，全局安装也只用进行一次，安装成功后，以后再次使用无需安装。
键入如下命令：
cnpm install gulp -g
2、本地安装
本地安装是如果你需要使用 gulp，每次都要进行安装的，这里新建一个 gulp-demo 文件夹用于演示。
命令行切换到 gulp-demo 目录，用如下命令创建一个配置文件：
npm init --yes
已经初始化好配置文件了，键入如下命令本地安装 gulp：
cnpm install gulp --save-dev // 因为 gulp 是开发依赖，所以使用 --save-dev
完毕，如果成功的话，就可以在刚刚生成的配置文件 package.json 中，看到安装信息了：
三、使用gulp
安装好 gulp 之后，就可以使用它来压缩代码了。
1、压缩js
压缩 js 文件是需要安装 gulp-uglify 这个插件的。
cnpm install gulp-uglify --save-dev
安装完毕，为了演示，初始化了一下目录结构，如下：
|--gulp | |--share | |--src | |--js | |--test.js | |--gulpfile.js | |--package.json | |--node_modules
逐一介绍下每个文件夹的作用，src 文件夹就是源文件，目录下 js 文件夹用于放置 js 文件，目前放置了一个 test.js，用于测试；dist 文件夹用于待会放置经过 gulp 压缩后的 js 代码；gulpfile.js 文件是一个只要使用 gulp 就必须存在的一个配置文件，且名字不能更改；
下面是 gulpfile.js 文件的内容：
上面代码首先引入了 gulp 和 gulp-uglify，然后就可以使用 gulp 对象的方法了，
- task(...)：新建一个任务，第一个参数为字符串，值随意，最好取一个有意义的名字，这里这个任务的作用就是用来压缩 js 代码的，所以叫 min-js 好了。第二个参数是一个函数，也就是配置 min-js 任务的具体内容。
- src(...)：对哪个目录里面的哪些文件进行处理，上面的 'src/js.js' 代表了对 'src/js' 目录下的所有 js 文件进行处理。
- pipe(uglify())：把压缩 js 的任务加入队列。
- pipe(gulp.dest('share/js')：把压缩后的 js 文件输出到 'share/js' 目标目录。
2、压缩css
压缩 css 文件是需要安装 gulp-clean-css 插件的，来键入如下命令安装一下：
cnpm i gulp-clean-css -D // -D 是 --save-dev 的简写，说明是开发依赖
接着，就可以在命令行执行压缩 css 文件的命令了。
gulp min-css
3、编译less
less 是可以方便我们书写 css 样式的，但是浏览器是不认识的，必须经过编译成普通的 css 文件，才会被浏览器认识，使用 gulp 也可以做到，首先安装 gulp-less 插件：
cnpm i gulp-less -D
最后，就可以进行编译了：
gulp compile-less
sass使用gulp-sass,安装：
npm install --save-dev gulp-sass
var gulp = require('gulp'),
sass = require("gulp-sass");
gulp.task('compile-sass',
function () { gulp.src('sass/*.sass')
.pipe(sass())
.pipe(gulp.dest('dist/css'));
}
);
4、自动监测文件的改变
手动执行gulp命令，是可以进行压缩，编译等功能，但是并不时实时的，也就是说，如果希望我改变了一些代码，会自动进行压缩，编译等时，需要编写gulpfile.js文件，编写实时监测的代码，如下：
现在，就可以执行 gulp 命令，进行实时监控了：
gulp
5.利用gulp将ES6转化ES5
安装gulp-babel，babel-core 和babel-preset-es2015
cnpm install gulp-babel@7.0.1 babel-core babel-preset-es2015 --save-dev
注：gulp-babel版本不能超过8.0.0，否则会error
.babelrc文件中写入
{ "presets": ["es2015"]}
6. 压缩 html 文件，可以压缩页面 javascript，css，去除页面空格，注释，删除多余属性等操作。
1.安装
cnpm install --save-dev gulp-load-plugins gulp-htmlmin
7 图片压缩
可以使用gulp-imagemin插件来压缩jpg、png、gif等图片。安装：npm install --save-dev gulp-imagemin
var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant'); //png图片压缩插件
gulp.task('default',
function () {
return gulp.src('src/images/*')
.pipe(imagemin({ progressive: true, use: [pngquant()] //使用pngquant来压缩png图片 }))
.pipe(gulp.dest('dist'));
}
);
gulpfile.js文件代码
/* * @Author: your name
* @Date: 2021-11-30 11:56:09
* @LastEditTime: 2021-12-01 16:14:36
* @LastEditors: shh
* @Description:
*/
let gulp = require('gulp')
let uglify = require('gulp-uglify')
let cleanCss = require('gulp-clean-css')
let less = require('gulp-less')
let babel = require('gulp-babel')
let htmlmin = require('gulp-htmlmin')
let sass = require('gulp-sass');
let runSequence = require('run-sequence')
plugins = require('gulp-load-plugins')() // 装载插件
;(imagemin = require('gulp-imagemin')),
(pngquant = require('imagemin-pngquant')),
//确保本地已安装gulp-cache [cnpm install gulp-cache --save-dev]
(cache = require('gulp-cache'))
// ;(runSequence = require('run-sequence')),
// (rev = require('gulp-rev')),
// (revCollector = require('gulp-rev-collector'))
// gulp.task('dev-js', async() => {
// gulp.src('src/js/*.js').pipe(uglify()).pipe(gulp.dest('share/js'))
// })
gulp.task('dev_less', async () => {
gulp.src('src/css/*.less').pipe(less()).pipe(gulp.dest('share/css'))
})
gulp.task('dev_sass', async () => {
gulp.src('src/css/*.sass').pipe(sass()).pipe(gulp.dest('share/css'))
})
gulp.task('dev_css', async () => {
gulp.src('src/css/*.css').pipe(cleanCss()).pipe(gulp.dest('share/css'))
// .pipe(rev.manifest())
// .pipe(gulp.dest('share/css'))
})
gulp.task('glo_css', async () => {
gulp.src('src/global/*.css').pipe(cleanCss()).pipe(gulp.dest('share/global'))
})
gulp.task('dev_js', async () => {
gulp
.src('src/js/*.js')
.pipe(babel())
.pipe(uglify())
.pipe(gulp.dest('share/js'))
// .pipe(rev.manifest())
// .pipe(gulp.dest('share/js'))
})
// //Html替换css、js文件版本
// gulp.task('revHtmlCss', function () {
// return gulp
// .src(['./src/css/*.json', './shalen/zhuye.html'])
// .pipe(revCollector()) //替换html中对应的记录
// .pipe(gulp.dest('./share')) //输出到该文件夹中
// })
// gulp.task('revHtmlJs', function () {
// return gulp
// .src(['./src/js/*.json', './yes/zhuye.html'])
// .pipe(revCollector())
// .pipe(gulp.dest('./share'))
// })
gulp.task('dev_html', async () => {
var options = {
removeComments: true, // 清除 HTML 注释
collapseWhitespace: true, // 省略空白
collapseBooleanAttributes: true, // 省略所有标签内的布尔属性
removeEmptyAttributes: true, // 清除所有标签内值为空的属性
removeScriptTypeAttributes: true, // 清除 <script> 标签内的 type 属性
removeStyleLinkTypeAttributes: true, // 清除 <style> 和 <link> 标签内的 type 属性
minifyJS: true, // 压缩 html 页面内的 js 代码
minifyCSS: true, // 压缩 html 页面内的 css 代码
}
return gulp
.src('src/*.html')
.pipe(plugins.htmlmin(options))
.pipe(gulp.dest('share/'))
})
gulp.task('dev_img', async () => {
gulp
.src('src/images/*.{png,jpg,gif,ico}')
.pipe(
cache(
imagemin({
progressive: true,
svgoPlugins: [{ removeViewBox: false }],
use: [pngquant()],
})
)
)
.pipe(gulp.dest('share/images'))
})
gulp.task('copy', async () => {
gulp.src('src/Library/*.*')
.pipe(gulp.dest('src/Library'))
});
gulp.task('dev', gulp.series('dev_js', 'dev_css', 'dev_less','glo_css','dev_img','dev_html','copy'));
gulp.task('auto', function() {
// gulp.run('dev_js', 'dev_css', 'dev_less', 'dev_sass','glo_css','dev_img','dev_html','copy');
gulp.watch('src/js/*.js', gulp.series('dev_js'))
gulp.watch('src/css/*.css', gulp.series('dev_css'))
gulp.watch('src/css/*.css', gulp.series('dev_less'))
gulp.watch('src/css/*.css', gulp.series('dev_sass'))
gulp.watch('src/global/*.css', gulp.series('glo_css'))
gulp.watch('src/images/*.*', gulp.series('dev_img'))
gulp.watch('src/*.html', gulp.series('dev_html'))
gulp.watch('src/Library', gulp.series('copy'))
})
gulp.task('default', gulp.series('auto'))
总结：可能会碰到的错误
运行gulpfile文件时报错
- 报错内容： TypeError: gulp.on(…).on(…).on(…).on(…).start is not a function
- 问题分析：一般这种情况是因为gulp版本引起的。
- 解决方法：gulp4.0.0更新变动较大，可以考虑把本地版本和全局版本都切回3.9.1版本。也有其他解决方法，
npm install --save-dev gulp@3.9.1
npm install -g gulp@3.9.1
gulp-uglify压缩js文件时报错之 punc(()
- 报错内容： gulp SyntaxError: Unexpected token: punc (()
- 问题分析： 这种大多是js代码中包含ES6语法的函数声明方式。报错提供的行号不一定准确，只能自己找到使用ES6语法的位置，改成ES5。
- 解决方法： 把ES6代码替换成ES5代码。
gulp-uglify压缩js文件时报错之 Unexpected token name
- 报错内容： _Unexpected token name «p», expected punc «
- 问题分析： 问题原因同上，也是ES6语法引起的。不过这个是声明变量let的原因。
- 解决方法： 把let改成var。
gulp-htmlmin
- 报错内容： throw er; // Unhandled ‘error’ event ^ Error: Parse Error: <= 95% </spa<div
- 问题分析： 遇到html压缩时的解析错误，此处是因为小于号<引起的。
- 解决方法： 小于号<改用编码方式<。
